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

Puppeteer hiện đã giao tiếp với Firefox! 🎉 Nhưng chờ đợi, phải không? 🤔 Hãy cùng tìm hiểu 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á đa trình duyệt mới được chuẩn hoá, kết hợp những tính năng tốt nhất của WebDriver Classic và Giao thức công cụ phát triển Chrome (CDP). Công nghệ này hứa hẹn giao tiếp hai chiều, cho phép tự động hoá hiệu quả và mạnh mẽ hơn, cũng như khả năng kiểm soát chi tiết. Bạn có thể theo dõi tiến trình của tính năng này trên lộ trình chính thức.

Kể từ lần cập nhật trạng thái trước, chúng tôi vẫn tiếp tục làm việc chặt chẽ với Nhóm làm việc về công cụ và kiểm thử trình duyệt của W3C. Puppeteer hiện triển khai các tính năng như ghi nhật ký, sự kiện mạng và gửi biểu mẫu nhờ những 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 đang hoạt động và hoạt động liền mạch trên Chrome và Firefox:

  1. Chạy trình duyệt bạn đã chọn bằng chế độ cài đặt giao thức.
  2. Theo dõi thông báo của bảng điều khiển để tìm lỗi.
  3. Chuyển đến một trang web, đặt kích thước khung nhìn rồi nhấp vào một nút.
  4. Xác minh nội dung văn bản và xác nhận tính bằng nhau.
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ộ kiểm thử 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ó đầy đủ tính năng của Puppeteer với Chrome và CDP, nhưng chúng tôi muốn cung cấp cho bạn thông tin rõ ràng về tình hình hiện tại.

Firefox:

  • WebDriver BiDi đã đạt đến một mức chất lượng phù hợp với các công việc tự động hoá thực tế. Mozilla đã chuyển thành công các chương trình kiểm thử Puppeteer cho pdf.js từ Firefox và CDP sang Firefox và WebDriver BiDi.
  • Hơn 55% số lượt kiểm thử đã vượt qua thành công với WebDriver BiDi, thể hiện chức năng ngày càng tăng 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ả, mở đường cho những cải tiến hơn nữa.

Chrome:

  • Chrome hiện đạt tỷ lệ đạt 68% với WebDriver BiDi, thể hiện chức năng đáng tin cậy. Mặc dù vẫn có thể tối ưu hoá hơn nữa so với phương pháp dựa trên CDP, nhưng đây là một phương pháp phát triển đầy hứa hẹn trong tương lai.

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

Puppeteer không hỗ trợ Firefox sao?

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

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

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

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

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

Những điều thú vị đang chờ đón

Kiểm thử 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 khi được dẫn dắt quá trình tích hợp WebDriver BiDi vào Puppeteer. Đây là bước ngoặt hướng tới 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.

Trong tương lai, 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à mạnh mẽ.

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