Giới thiệu
Vào ngày 7/5/2024 mới đây, Playwright đã cho ra mắt phiên bản 1.44 với khá nhiều tính năng hay ho. Cùng chúng mình đi qua các phần chính sau đây nhé:
- Những update xịn xò cho anh em tester trong Playwright v1.44.
- 1 tip nhỏ giúp chúng ta sử dụng Playwright Trace Viewer dễ dàng và hiệu quả hơn.
Playwright 1.44 có gì?
Đầu tiên, chúng ta đi luôn vào phần chính, Playwright v1.44 có những cải tiến về:
- VS Code update: Project và Watch mode
- Accessibility assertion: toHaveAccessibleName và toHaveAccessibleDescription
- Run the last failed test via CLI
- Locator handler update
- Cookie function update
VS Code extension UI updates
Tại phiên bản mới nhất này, extension Playwright test for VS code có 2 cải tiến là Watch mode và Projects
Projects
Mục projects sẽ hiển thị tất cả những project được định nghĩa tại file Playwright config, cho phép chúng ta lựa chọn sẽ thực hiện run cases test trên các browser nào. Chẳng hạn như hình 1.1, khi chọn duy nhất 1 project, mục Test explorer sẽ không có gì thay đổi so với các phiên bản trước, vì chúng ta chỉ setup run test trên 1 project duy nhất.
Tuy nhiên, khi ta chọn nhiều hơn 1 project, Playwright extension sẽ cho phép chúng ta lựa chọn chạy test cases “get started link” với project nào, ở đây là chromium hay firefox:
Vậy nếu chúng ta không chọn projects nào thì sao nhỉ? Câu trả lời là Playwright sẽ không thể tìm thấy bất cứ test cases nào trong trường hợp này. Do đó, cần chọn ít nhất 1 projects:
Watch mode
Nếu bạn để ý tại phần Test explorer, sẽ thấy 1 icon hình con mắt khá “lạ”, cho phép chúng ta watch một hoặc nhiều test cases bất kì. Trong trường hợp file chứa test cases thay đổi và được lưu lại, những test cases tương ứng trong group sẽ được chạy lại .
Để dễ hình dung, mọi người có thể thấy trong hình dưới, khi ta set watch mode tại file example.spec.ts, mỗi khi có bất cứ thay đổi nào trong file và được lưu lại, Playwright sẽ tự động run lại 2 cases “has title” và “get started link”
Và nếu chúng ta chỉ set watch mode tại case “has title”, khi file example.spec.ts có sự thay đổi, Playwright sẽ chỉ chạy lại case “has title”, không tự động chạy lại “get started link” nữa:
Dù tính năng watch cho phép chúng ta theo dõi status của test case liên tục, tuy nhiên cái gì liên quan đến watch thì thường sẽ khiến máy bị lag, nên mọi người chỉ dùng khi thực sự cần thiết nhé.
Accessibility assertion
Tại version 1.44, Playwright cung cấp 2 hàm assertion toHaveAccessibleName và toHaveAccessibleDescription, giúp người dùng verify các thuộc tính liên quan tới Accessibility
Để hiểu được cách dùng của 2 hàm trên, trước hết chúng ta cần hiểu Accessibility là gì.
Accessibility là việc thiết kế và phát triển các trang web sao cho mọi người, bao gồm cả những người khuyết tật, có thể truy cập và sử dụng được một cách dễ dàng.
Dưới đây là 1 thẻ body có accessibility:
<body>
<button aria-label="Submit Form" aria-describedby="submitDesc">Submit</button>
<p id="submitDesc" style="display: none;">Clicking this button will submit your form data.</p>
</body>
Trong đó:
- Submit: Đây là một nút với nhãn “Submit”. Tuy nhiên, văn bản “Submit” có thể không đủ thông tin cho một số người dùng.
- aria-label=”Submit Form”: Thuộc tính aria-label cung cấp một mô tả ngắn gọn và cụ thể cho nút. Trình đọc màn hình sẽ đọc nhãn này thay vì văn bản hiển thị trên nút. Trong trường hợp này, nút sẽ được đọc là “Submit Form”, giúp người dùng hiểu rõ hơn về chức năng của nó
- aria-describedby=”submitDesc”: Thuộc tính aria-describedby liên kết nút với phần tử khác có id=”submitDesc”. Trình đọc màn hình sẽ đọc nội dung của phần tử này khi người dùng tập trung vào nút, cung cấp thêm ngữ cảnh về chức năng của nút. Accessibility description trong trường hợp này sẽ là nội dung của thẻ <p </p> : Clicking this button will submit your form data.
Sau khi đã hiểu Accessibiliy là gì, chúng ta hoàn toàn có thể sử dụng 2 hàm toHaveAccessibleName và toHaveAccessibleDescription để verify aria-label và aria -describedby của đoạn body phía trên:
import { test, expect } from '@playwright/test';
test('Demo accessible test', async( { page }) => {
await page.goto("http://127.0.0.1:5500/html/1.44/html/01-accessible.html");
const locator = page.locator("//button");
// Accessible name là giá trị của aria-lable
await expect(locator).toHaveAccessibleName("Submit Form")
// Accessible description là giá trị của thẻ có id trùng với aria-describedby
await expect(locator).toHaveAccessibleDescription("Clicking this button will submit your form data.")
await expect(locator).toHaveRole("button");
})Run the last failed test via CLI
Dưới đây mình có 1 file test bao gồm 3 test cases, và sau khi thực hiện run test bằng CLI, nhận được kết quả 2 passed, 1 failed:
Lúc này, với version 1.44, chúng ta có thể chọn chỉ run lại những cases chạy failed bằng CLI bằng cách thêm option –last-failed vào câu lệnh chạy test:
Lúc này, chỉ duy nhất 1 case test failed được chạy lại.
Locator handler update
Nếu bạn đã theo dõi các phiên bản v1.41 hay v1.42 thì sẽ hiểu locator handle là gì và dùng để làm gì. Với những người chưa biết, các bạn có thể nắm được kiến thức về cách Playwright đang xử lý Locator handle qua video này nhé (từ phút thứ 8p30 – 11p).
Trong version 1.44, Playwright có cũng cấp thêm 1 số option khác cho Locator handle:
- Locator is a parameter: Cho phép truyền locator như 1 parameter
// Version 1.42
await page.addLocatorHandler(page.getByLabel("Close"), async () => {
await page.getByLabel("Close").click();
})
// Version 1.44
await page.addLocatorHandler(page.getByLabel("Close"), async (locator) => {
await locator.click();
})- Times: Cho phép remove Locator handler sau số lần thực hiện handler nhất định
// Sau 5 lần thực hiện handler thì sẽ remove locator handle
await page.addLocatorHandler(page.getByLabel("Close"), async (locator) => {
await locator.click();
}), { times: 5 };Cookie function update
Playwright 1.44 cho phép chúng ta clear toàn bộ toàn bộ hoặc 1 vài cookie với các options:
- Clear toàn bộ cookies:
await context.clearCookies();
- Clear cookies qua name:
await context.clearCookies({ name: 'session-id' });
- Clear cookies qua path:
await context.clearCookies({ path: '$path');
- Clear cookies qua domain:
await context.clearCookies({ domain: '$domain' });
- Clear cookies khi kết hợp các điều kiện:
await context.clearCookies({ path: '$path', domain: '$domain' })
Tip of the day: Snapshot is a live DOM
- Snapshot là một tính năng quan trọng trong Playwright, được sử dụng để chụp lại trạng thái hiện tại của DOM (Document Object Model) của trang web.
- Kể cả những phiên bản trước, khi chúng ta bật option “Show trace viewer”, Playwright sẽ chụp lại trạng thái của DOM trong quá trình kiểm thử và hiển thị tại Trace Viewer. Dưới đây là ảnh snapshot của trang web playwright.dev sau khi mình run file test example.spec.ts:
- Bằng cách click hyperlinked icon hình mũi tên ở góc trái, chúng ta hoàn toàn có thể theo dõi toàn bộ DOM của trang web tại một thời điểm bất kì trong quá trình kiểm thử tự động dưới dạng 1 browser bình thường:
Kết luận
Cảm ơn mọi người đã đọc đến đây, chúng mình hi vọng những kiến thức bên trên hữu ích với mọi người.
Nếu có bất kỳ thắc mắc hay góp ý thì đừng ngại ngần comment nhé!
Tham gia cộng đồng Playwright Vietnam tại:
Trả lời