Khai thác sức mạnh của WebDriver BiDi: Tự động hoá Chrome và Firefox bằng Puppeteer

Jecelyn Yeen
Jecelyn Yeen

Puppeteer hiện đã tương thích với Firefox! 🎉 Nhưng chờ đã, máy đã sẵn sàng chưa? 🤔 Hãy cùng tìm hiểu về WebDriver BiDi, giao thức mới trong Puppeteer và khám phá ý nghĩa của sự phát triển thú vị này đối với quy trình tự động hoá của Firefox.

WebDriver BiDi là một giao thức tự động hoá mới trên nhiều trình duyệt, kết hợp những điểm ưu việt nhất của WebDriver phiên bản cũ và Giao thức Công cụ của Chrome cho nhà phát triển (CDP). Phiên bản này hứa hẹn khả năng giao tiếp hai chiều, cho phép tự động hoá hiệu quả và nhiều năng lực hơn, cũng như khả năng kiểm soát chi tiết hơn. Bạn có thể theo dõi tiến trình của những tính năng này trong lộ trình chính thức.

Kể từ thông tin cập nhật về trạng thái trước đó, chúng tôi đã tiếp tục hợp tác chặt chẽ với Nhóm hoạt động về công cụ và thử nghiệm trình duyệt W3C. Puppeteer hiện triển khai các tính năng như ghi nhật ký, sự kiện mạng cũng như gửi biểu mẫu, nhờ các tiến bộ của WebDriver BiDi.

Cho tôi xem mã

Tập lệnh Puppeteer sau đây giới thiệu WebDriver BiDi trong thực tế và hoạt động trơn tru trên Chrome và Firefox:

  1. Chạy trình duyệt bạn đã chọn với chế độ cài đặt giao thức.
  2. Theo dõi thông báo trên bảng điều khiển để phát hiện lỗi.
  3. Di chuyển đến một trang web, thiết lập kích thước khung nhìn và nhấp vào một nút.
  4. Xác minh nội dung văn bản và xác nhận sự cân bằng.
import * as assert from 'node:assert'; 
import puppeteer from 'puppeteer';

// Arrange: Launch browser with WebDriver BiDi
const browser = await puppeteer.launch({
  protocol: 'webDriverBiDi',
     product: 'firefox', // or 'chrome'
});
const context = await browser.createIncognitoBrowserContext();
const page = await context.newPage();

// Arrange: Monitor console messages
page.on('console', message => {
  if (message.type() != 'error') return;
  console.log('RECEIVED: %s', message.text());
});

// Action
await page.setViewport({width: 600, height: 1041});
await page.goto('https://coffee-cart.app/?breakable=1');

const coffee = await page.waitForSelector('[data-test="Espresso"]');
await coffee.click();

// Assert 
const checkout = await page.$('[data-test="checkout"]');
const total = await checkout.evaluate(el => el.textContent);
assert.equal(total, 'Total: $10.00');

browser.close();

Tiến trình của WebDriver BiDi trong Puppeteer

Để đánh giá khả năng của WebDriver BiDi trong Puppeteer, chúng tôi đã sử dụng bộ thử nghiệm Puppeteer toàn diện. Mặc dù việc triển khai Puppeteer và WebDriver BiDi vẫn đang trong quá trình hoàn thiện và chưa có tất cả các tính năng thông thường của Puppeteer với Chrome và CDP, chúng tôi muốn cung cấp cho bạn hình ảnh rõ ràng về mọi thứ.

Firefox:

  • WebDriver BiDi đã đạt đến mức chất lượng phù hợp với các tác vụ tự động hoá thực tế. Mozilla đã chuyển thành công các thử nghiệm Puppeteer cho pdf.js từ Firefox và CDP sang Firefox và WebDriver BiDi.
  • Hơn 55% kiểm thử vượt qua thành công nhờ WebDriver BiDi, chứng tỏ chức năng ngày càng phát triển của WebDriver BiDi.
  • Đáng chú ý là hơn 82 thử nghiệm mới sử dụng WebDriver BiDi một cách hiệu quả, tạo điều kiện cho các cải tiến hơn nữa.

Chrome:

  • Chrome hiện đạt được tỷ lệ vượt qua là 68% với WebDriver BiDi, chứng minh chức năng đáng tin cậy. Mặc dù vẫn còn khả năng để tối ưu hoá hơn nữa so với cách tiếp cận dựa trên CDP, nhưng điều này hứa hẹn sẽ có nhiều bước phát triển thú vị trong tương lai.

Một số tính năng như truy cập vào cookie, chặn yêu cầu mạng, các tính năng mô phỏng cụ thể và các quyền vẫn đang trong quá trình tiêu chuẩn hoá. Các chú thích này sẽ được tích hợp vào Puppeteer khi đã sẵn sàng. Trong thời gian chờ đợi, hãy xem danh sách đầy đủ các tính năng của Puppeteer mà WebDriver BiDi hỗ trợ.

Puppeteer không hỗ trợ Firefox?

Mặc dù trước đây Puppeteer đã cung cấp hỗ trợ thử nghiệm cho Firefox bằng cách sử dụng triển khai CDP có giới hạn và không trên nhiều trình duyệt, nhưng vẫn còn nhiều hạn chế và không phải là một giải pháp bền vững.

Việc triển khai Firefox và WebDriver BiDi thử nghiệm mới giải quyết các vấn đề này.

Chúng tôi biết bạn có thể có thêm câu hỏi như:

  • Hỗ trợ CDP của Firefox có ngừng hoạt động không?
  • Tất cả các tính năng của Puppeteer có được hỗ trợ không?

Để biết câu trả lời chi tiết và biết thêm thông tin, hãy xem thông báo riêng của Firefox!

Những điều thú vị sắp tới

Thử nghiệm trên nhiều trình duyệt là một trong những nhu cầu hàng đầu của nhà phát triển. Vì vậy, chúng tôi rất vui mừng được tích hợp WebDriver BiDi vào Puppeteer, đánh dấu một bước chuyển hướng đến trải nghiệm tự động hoá trên nhiều trình duyệt liền mạch và hiệu quả hơn. Bạn nên khám phá WebDriver BiDi bằng Puppeteer.

Sắp tới, WebDriver BiDi sẽ trở thành giao thức mặc định cho Puppeteer, mở đường cho trải nghiệm tự động hoá nhất quán và hiệu quả.

Đối với mọi vấn đề bạn gặp phải khi chạy kiểm thử Puppeteer bằng WebDriver BiDi, hãy xem các vấn đề chưa giải quyết trong Công cụ theo dõi lỗi của Puppeteer.