[Playwright tips] Strict mode violation là gì? Cách xử lý!

Lỗi Strict Mode Violation là gì?

Trong Playwright, lỗi Strict Mode Violation xảy ra khi bạn sử dụng các selector mà trả về nhiều hơn một phần tử trên trang web, trong khi Playwright đang chạy ở strict mode. Strict mode yêu cầu mỗi selector chỉ được khớp với duy nhất một phần tử để đảm bảo tính chính xác và tránh hành vi không mong muốn.

Ví dụ, nếu bạn viết:

await page.locator('button').click();

và trên trang có nhiều thẻ <button>, Playwright sẽ báo lỗi vì nó không biết nên chọn phần tử nào.

Cách khắc phục

1. Tinh chỉnh selector:
   • Sử dụng selector cụ thể hơn, ví dụ:

await page.locator('button#submit').click(); // Chọn button có id="submit"

await page.locator('button:has-text("Login")').click(); // Chọn button chứa text "Login"

2. Sử dụng first() hoặc nth():
   • Nếu bạn muốn chọn phần tử đầu tiên hoặc một phần tử cụ thể trong danh sách:

await page.locator('button').first().click(); // Chọn button đầu tiên
await page.locator('button').nth(1).click(); // Chọn button thứ hai

3. Tắt strict mode (không khuyến khích):
   • Bạn có thể tắt strict mode bằng cách thêm tùy chọn { strict: false }, nhưng nên tránh vì có thể gây ra hành vi không đoán trước:

await page.locator('button', { strict: false }).click();

2. Kiểm tra DOM trước:
   • Sử dụng công cụ DevTools của trình duyệt để kiểm tra cấu trúc DOM và đảm bảo selector của bạn chỉ khớp với một phần tử duy nhất.

Mẹo

• Luôn kiểm tra selector bằng page.locator().count() để xem có bao nhiêu phần tử được khớp:

console.log(await page.locator('button').count());

• Viết test case rõ ràng và ưu tiên selector ngắn gọn, dễ bảo trì.

Hãy ưu tiên cách 1 và 2 để giữ code sạch và đáng tin cậy!

Bạn nghĩ sao về bài viết này? Hãy cho chúng mình biết quan điểm của bạn nhé ^^