Playwright được tạo ra đặc biệt để đáp ứng nhu cầu của end-to-end testing. Playwright hỗ trợ tất cả các trình duyệt hiện đại bao gồm Chromium, WebKit và Firefox. Bài viết này sẽ giới thiệu về chức năng nổi bật và cách sử dụng cơ bản của Playwright.
1. Một số chức năng nổi bật:
- Playwright cho phép người sử dụng test trên tất cả các trình duyệt.
- Các test case có thể được hoạt động song song hoặc độc lập tùy vào config
- Cung cấp chức năng quay video, chụp ảnh màn hình
- Có thể mở rộng thông qua fixture
2. Cài đặt:
Để cài đặt Playwright, đầu tiên cần sử dụng một trong các câu lệnh sau tùy thuộc vào dự án:
yarn create playwright
npm init playwright@latest
Sau khi gõ dòng lên trên vào Terminal, sẽ có một số xác nhận trước khi cài đặt Playwright, nếu muốn tiếp tục, bạn vui lòng gõ chữ y như hình bên dưới:
Sau khi chọn ngôn ngữ lập trình, bạn sẽ chọn thư mục để lưu trữ các file kịch bản kiểm thử, mặc định sẽ là thư mục tests, bạn hoàn toàn có thể đổi thư mục này.
Sau đó, Playwright sẽ xác nhận rằng bạn có thêm Github action workflow hay không, đây là quy trình tự động liên quan đến CI/CD, vì vậy hiện tại bạn chưa cần quan tâm và có thể để mặc định là false và nhấn enter.
Cuối cùng, bạn sẽ được hỏi rằng có cài đặt trình duyệt Playwright để hỗ trợ cho việc thực thi chạy tự động hay không, mặc định là true, mình khuyến khích các bạn sử dụng chúng.
Cây thư mục dự án của bạn sẽ được khởi tạo với một số thư mục và tệp cơ bản như ảnh bên dưới:
3. Sử dụng:
Playwright về cơ bản sẽ cung cấp HTML Report và UI Report tùy theo nhu cầu của người sử dụng
HTML Report:
npx playwright show-report
- Kết quả thu được sẽ là thông tin về các case test bao gồm cả pass và fail, kèm theo đó là thông tin của trình duyệt và khoảng thời gian hoàn thành.
- Để có thể xem trực quan hơn, xem log và xem cả UI của từng bước thì Playwright cung cấp Test trong UI Mode
UI Testing mode:
npx playwright test --ui- Sau khi chạy câu lệnh, Playwright sẽ mở cửa sổ UI để có thể xem trực quan
- Có thể dễ dàng thấy icon hình tam giác ở mỗi test case, khi bấm vào playwright sẽ chạy automation testing
- Phần trên của màn hình sẽ là UI thực tế được chạy
- Phần bên dưới sẽ là đoạn code đang được thực thi giúp dễ dàng debug hơn, người dùng có thể xem thêm về log, console và tab network
- Bên trái sẽ là thanh action, có thể xem được khoảng thời gian và thông tin chi tiết khi bấm vào
- Bên cạnh đó ở góc màn hình phía trên bên phải, người dùng có thể filter các test case của mình theo status
- Để xem chi tiết hơn về DOM, người dùng có thể click icon open in new tab
4. Một số syntax cơ bản:
Chúng ta có thể hiểu đoạn code hoạt động như sau:
- Định nghĩa một test case. Có tên là basic test
- Truy cập vào trang playwright.dev
- Tìm đến selector .navbar__inner .navbar__title. Kiểm tra xem selector đấy có chứa text là Playwright hay không.
Trong thực tế, sẽ có rất nhiều các test case cần được gộp vào một nhóm, Playwright cũng có giải pháp cho điều này:
- Dùng describe để định nghĩa 1 nhóm các testcase
- Có thể dùng beforeEach, before để chạy các đoạn code trước mỗi / trước tất cả các test case
- Mặc định các testcase sẽ được chạy một cách song song, trong trường hợp bạn cần testcase chạy một cách tuần tự thì có thể dùng thuộc tính describe.serial
Để thực hiện một số các Action cơ bản bạn có thể dùng locator:
- locator.click(): Để click vào một element
- locator.fill(): Để điền vào một ô input
- locator.press(): Để nhấn một nút
- locator.hover(): Để hover vào một element
Để kiểm tra một điều kiện nào đó, bạn có thể dùng expect():
- expect(locator).toHaveText(): Kiểm tra xem có chứa string cụ thể
- expect(locator).toHaveCount(): Kiểm tra độ dài của từ
- expect(locator).toHaveUrl(): Kiểm tra URL của trang web
Để có thể hiểu rõ hơn và có thể sử dụng được nhiều chức năng thú vị hơn, hãy xem thêm trên trang chủ chính thức của Playwright: Fast and reliable end-to-end testing for modern web apps | Playwright
