Từ thủ công đến tự động: Viết bài kiểm tra đầu tiên của bạn với Playwright

Thử nghiệm tự động hóa với Playwright

Kiểm thử tự động hóa đang trở nên phổ biến mỗi ngày và có nhiều công cụ có sẵn để giúp bạn trở thành bậc thầy trong lĩnh vực này. Đôi khi phần khó nhất là chọn đúng.

Playwright là một công cụ tuyệt vời đang trở nên phổ biến nhờ tính linh hoạt và dễ sử dụng, đặc biệt là với JavaScript. Nhà viết kịch được coi là một trong những người chạy thử nghiệm giao diện người dùng nhanh nhất. Trong bài viết này, chúng tôi sẽ thảo luận về quá trình viết bài kiểm tra đầu tiên của bạn với Playwright bằng cách sử dụng JavaScript với các ví dụ về mã.

Cài đặt nhà viết kịch

Trước khi chúng tôi bắt đầu viết trường hợp thử nghiệm đầu tiên của mình, bạn cần cài đặt Playwright. Bạn có thể thực hiện việc này bằng cách chạy lệnh sau trong thiết bị đầu cuối của mình bên trong IDE. Tôi cũng khuyên bạn nên cài đặt VScode (miễn phí và tuyệt vời để tạo các thử nghiệm đầu tiên của bạn)

 npm install playwright

Viết bài kiểm tra đầu tiên của chúng tôi 🍾

trường hợp thử nghiệm

1. Khởi chạy google.com
2. Tìm kiếm nhà viết kịch
3. Kiểm tra Nhà viết kịch trong tiêu đề sau khi tìm kiếm
4. Đóng trình duyệt

Trước tiên hãy bắt đầu viết kiến trúc của bài kiểm tra của chúng tôi.

 const { chromium } = require('playwright'); describe('Google Search Test', () => { let browser; let page; beforeAll(async () => { }); afterAll(async () => { }); it('should return result search in google ', async () => { }); });

beforeAll luôn xảy ra một lần trước tất cả các bài kiểm tra. Nó khá thuận tiện để sử dụng để thiết lập các yêu cầu kiểm tra trước khi kiểm tra thực tế. Ví dụ: tạo dữ liệu cho các thử nghiệm thông qua API hoặc khởi tạo các biến mà bạn sẽ sử dụng trong các thử nghiệm.

afterAll có cùng ý tưởng với beforeAll.

Nó xảy ra sau tất cả các bài kiểm tra chỉ một lần. Bạn có thể sử dụng để đóng trình duyệt hoặc thực hiện một số hành động để xóa dữ liệu sau khi chạy thử nghiệm.

Chúng tôi cần các biến này để hoạt động với trình duyệt và trang sau này.

 let browser; let page;

Đây là phần thân bài kiểm tra, nơi chúng tôi sẽ viết bài kiểm tra thực tế của mình.

 it('should return result search in google ', async () => { });

Hãy thêm mở một trình duyệt bên trong beforeAll

 beforeAll(async () => { browser = await chromium.launch(); // here you can use any other browser if you want page = await browser.newPage(); await page.goto('https://www.google.com'); });

Bên trong beforeAll, chúng tôi đã khởi chạy Chrome và điều hướng đến google.com.

Hãy thêm một cơ thể thử nghiệm

 it('should return search results', async () => { await page.fill('id=input', 'Automation testing'); // you an search any other text here await page.press('id=input', 'Enter'); await page.waitForNavigation(); const title = await page.title(); expect(title).toContain('Automation testing'); });

Kết quả của chúng ta ⬆️

1. Chúng tôi tìm đầu vào trên một trang và viết Nhà viết kịch ở đó. fill là một phương pháp mà bạn thường sử dụng để nhập giá trị vào đầu vào mà bạn muốn kiểm tra.

 await page.fill('id=input', 'Automation testing');

2. Chúng tôi mô phỏng nhấn Enter khi chúng tôi đang ở trong đầu vào này.

 await page.press('id=input', 'Enter');

3. Chúng tôi đợi cho đến khi tải trang. Vì vậy, chúng tôi sẽ không tiếp tục thử nghiệm trước khi trang được tải đầy đủ.

 await page.waitForNavigation();

4. Cuối cùng, chúng tôi sử dụng chức năng title để lấy tiêu đề của trang kết quả tìm kiếm.

 const title = await page.title();

5. Sử dụng xác nhận, chúng tôi kiểm tra xem tiêu đề có chứa Nhà viết kịch hay không (hoặc một chuỗi khác mà chúng tôi đang tìm kiếm để xác nhận rằng chúng tôi đã chuyển hướng đến đúng trang)

 expect(title).toContain('Automation testing');

Hãy thêm đóng trình duyệt bên trong afterAll

 afterAll(async () => { await browser.close(); });

Bên trong afterAll, chúng tôi đóng trình duyệt sau khi kiểm tra tất cả

Chạy thử nghiệm của bạn

Điều này sẽ chạy tất cả các bài kiểm tra của bạn

 npx playwright test

Nếu bạn muốn chạy một tệp thử nghiệm cụ thể

 npx playwright test your-file.js

Khi bạn chạy thử nghiệm, Playwright cũng tạo các báo cáo HTML, rất hữu ích để gỡ lỗi. Nó chia bài kiểm tra của bạn thành các bước và nếu bạn có một bài kiểm tra không thành công, bạn luôn có thể biết lỗi xảy ra ở đâu và sửa lỗi nhanh hơn.

Chạy cái này để mở báo cáo của bạn

 npx playwright show-report

Hình ảnh chính cho bài viết này được tạo bởiTrình tạo hình ảnh AI của HackerNoon thông qua lời nhắc "nhà phát triển viết mã".