Playwright giao tiếp với các trình duyệt thông qua các giao thức đặc thù của từng trình duyệt, sử dụng kênh WebSocket hoặc giao tiếp giữa các tiến trình (IPC). Mỗi trình duyệt được hỗ trợ (như Chromium, WebKit, và Firefox) cung cấp một giao thức tự động hóa mà Playwright sử dụng để gửi lệnh và nhận sự kiện.

Hãy cùng tìm hiểu quy trình giao tiếp này một cách chi tiết và rõ ràng trong bài này cùng Playwright Việt Nam nhé!

1. Khởi động trình duyệt

Khi Playwright khởi động một phiên bản trình duyệt, nó tạo ra một tiến trình trình duyệt. Tiến trình này lắng nghe các lệnh thông qua các giao thức, bao gồm:

• DevTools Protocol cho các trình duyệt dựa trên Chromium (Chrome, Edge).
• WebKit Debug Protocol cho WebKit (Safari).
• Firefox Remote Debug Protocol cho Firefox.

2. Thiết lập kênh giao tiếp WebSocket/IPC

Sau khi khởi động, Playwright thiết lập một kênh giao tiếp WebSocket hoặc IPC giữa đoạn mã kiểm thử (test script) viết bằng Node.js (hoặc Python, Java, v.v.) và tiến trình trình duyệt.

• Playwright gửi các lệnh được mã hóa dưới dạng JSON qua kênh này, và trình duyệt sẽ hiểu và thực thi các lệnh đó.

3. Thực thi lệnh và xử lý phản hồi

Playwright giao tiếp với trình duyệt theo cách không đồng bộ:

• Gửi một lệnh (ví dụ: nhấn vào một nút hoặc truy cập một URL).
• Trình duyệt xử lý lệnh và trả về các sự kiện hoặc kết quả (ví dụ: trang đã tải xong, tìm thấy phần tử, v.v.).

4. Lắng nghe và đăng ký sự kiện

Trình duyệt gửi các sự kiện trở lại Playwright qua cùng kênh giao tiếp, chẳng hạn như:

• Hoàn tất điều hướng trang.
• Các phần tử DOM được tải.
• Các yêu cầu mạng được thực hiện.
  Playwright tự động lắng nghe các sự kiện này để đồng bộ hóa các hành động mà không yêu cầu người dùng thêm các lệnh chờ (wait) thủ công.

5. Xử lý tương tác network và DOM

Thông qua giao thức của trình duyệt, Playwright có thể:

• Chặn các network request và response, chỉnh sửa tiêu đề, hoặc giả lập phản hồi.
• Truy vấn và thao tác với DOM bằng các selector, ví dụ: page.click('button').

Ví dụ: Giao tiếp với trình duyệt Chromium

Dưới đây là luồng đơn giản hóa cho sự kiện nhấn nút:

1. Playwright gửi lệnh tới Chromium qua giao thức DevTools:

   {
     "method": "Runtime.evaluate",
     "params": {
       "expression": "document.querySelector('button').click()"
     }
   }

2. Trình duyệt thực thi lệnh:

• Chạy code JavaScript trong môi trường runtime của trình duyệt.
• Nếu button tồn tại, thực hiện hành động click.

2. Trình duyệt gửi phản hồi:

   {
     "id": 1,
     "result": {
       "type": "undefined"
     }
   }

4. Nếu xảy ra lỗi (ví dụ: không tìm thấy button), trình duyệt trả về thông báo lỗi qua giao thức, và Playwright throw exception trong quá trình kiểm thử (testing).

Tại sao giao thức trình duyệt quan trọng?

• DevTools Protocol (Chromium): Cung cấp quyền truy cập vào mọi khía cạnh của trình duyệt như thao tác DOM, hoạt động mạng, giám sát hiệu suất, v.v.
• WebKit Debug Protocol: Cho phép kiểm thử trên Safari bằng cách tương tác với công cụ render của WebKit.
• Firefox Remote Debug Protocol: Kích hoạt điều khiển từ xa Firefox thông qua các yêu cầu mạng và đánh giá runtime JavaScript.

Cách Playwright “trừu tượng hóa” các tương tác

Playwright ẩn đi các tương tác giao thức cấp thấp dưới dạng các API dễ sử dụng. Ví dụ:

Khi bạn viết:

await page.goto('https://example.com');

Bên trong, Playwright:

• Gửi lệnh Page.navigate qua giao thức trình duyệt.
• Trình duyệt xử lý việc điều hướng và phát ra sự kiện Page.loadEventFired khi trang được tải hoàn tất.
• Playwright chờ sự kiện này để đảm bảo lệnh tiếp theo chỉ chạy khi trang đã sẵn sàng.

So sánh với Selenium/WebDriver

Lời kết

Playwright giao tiếp trực tiếp với trình duyệt thông qua các giao thức tự động hóa gốc (như DevTools cho Chromium). Nó thiết lập kênh WebSocket hoặc IPC để gửi lệnh và nhận sự kiện không đồng bộ, giúp xử lý các tương tác hiệu quả và tự động chờ các phần tử hoặc sự kiện mạng.

Giao tiếp độ trễ thấp này là lý do chính khiến Playwright nhanh hơn và đáng tin cậy hơn so với các công cụ như Selenium, vốn dựa trên giao thức WebDriver qua HTTP.

Tham khảo

Bài viết có tham khảo nội dung từ bài viết trên blog của 93days