ใช้ประโยชน์จากศักยภาพของ WebDriver BiDi: การทำงานอัตโนมัติของ Chrome และ Firefox ด้วย Puppeteer

ตอนนี้ Puppeteer พูดคุยกับ Firefox ได้แล้ว! 🎉 แต่เดี๋ยวก่อน 🤔 มาเจาะลึกเกี่ยวกับ WebDriver BiDi ซึ่งเป็นโปรโตคอลใหม่ใน Puppeteer และสำรวจกันว่าการพัฒนาอันน่าตื่นเต้นนี้ส่งผลต่อเวิร์กโฟลว์ระบบอัตโนมัติของ Firefox อย่างไร

WebDriver BiDi เป็นโปรโตคอลการทำงานอัตโนมัติแบบข้ามเบราว์เซอร์ที่ได้มาตรฐานใหม่ ซึ่งรวมสิ่งที่ดีที่สุดของ WebDriver แบบคลาสสิกและ Chrome DevTools Protocol (CDP) เข้าด้วยกัน ซึ่งสัญญาว่าด้วยการสื่อสารแบบ 2 ทิศทาง ทำให้มีการทำงานอัตโนมัติที่มีประสิทธิภาพและมีความสามารถมากยิ่งขึ้น รวมถึงการควบคุมแบบละเอียด ติดตามความคืบหน้าได้ในแผนกลยุทธ์อย่างเป็นทางการ

ตั้งแต่การอัปเดตสถานะก่อนหน้านี้ เราได้ทำงานอย่างใกล้ชิดกับกลุ่มทำงานด้านเครื่องมือและการทดสอบเบราว์เซอร์ W3C ตอนนี้ Puppeteer ใช้ฟีเจอร์อย่างการบันทึก กิจกรรมในเครือข่าย และการส่งแบบฟอร์มได้โดยใช้ความก้าวหน้าของ WebDriver BiDi

แสดงรหัส

สคริปต์ Puppeteer ต่อไปนี้แสดงการทำงานของ WebDriver BiDi และทำงานได้อย่างราบรื่นบน Chrome และ Firefox

  1. เปิดเบราว์เซอร์ที่คุณเลือกโดยใช้การตั้งค่าโปรโตคอล
  2. ตรวจสอบข้อความในคอนโซลเพื่อหาข้อผิดพลาด
  3. ไปที่หน้าเว็บ ตั้งค่าขนาดวิวพอร์ต และคลิกปุ่ม
  4. ตรวจสอบเนื้อหาข้อความและยืนยันความเท่าเทียม
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();

ความคืบหน้าของ WebDriver BiDi ใน Puppeteer

เราใช้ชุดทดสอบ Puppeteer ที่ครอบคลุมเพื่อวัดความสามารถของ WebDriver BiDi ใน Puppeteer แม้ว่าการใช้งาน Puppeteer และ WebDriver BiDi ยังอยู่ระหว่างการพัฒนาและยังไม่มีฟีเจอร์ Puppeteer ที่ใช้ Chrome และ CDP อยู่ทั้งหมด แต่เราก็อยากให้คุณได้เห็นภาพที่ชัดเจนว่าอะไรอยู่ในจุดใด

Firefox:

  • WebDriver BiDi ได้ก้าวสู่ระดับคุณภาพที่เหมาะกับงานระบบอัตโนมัติเชิงปฏิบัติ Mozilla ถ่ายโอนการทดสอบ Puppeteer สำหรับ pdf.js จาก Firefox และ CDP ไปยัง Firefox และ WebDriver BiDi ได้สำเร็จ
  • การทดสอบกว่า 55% ผ่าน WebDriver BiDi ซึ่งแสดงให้เห็นถึงฟังก์ชันการทำงานที่เพิ่มขึ้น
  • สิ่งที่เห็นได้ชัดคือการทดสอบใหม่กว่า 82 รายการใช้ WebDriver BiDi อย่างมีประสิทธิภาพ ซึ่งเป็นการปูทางไปสู่การเพิ่มประสิทธิภาพที่ดียิ่งขึ้นไปอีก

Chrome

  • ปัจจุบัน Chrome มีอัตราการส่งผ่าน 68% ด้วย WebDriver BiDi ซึ่งแสดงให้เห็นถึงฟังก์ชันการทำงานที่เชื่อถือได้ แม้จะมีทางเลือกในการเพิ่มประสิทธิภาพเพิ่มเติมเมื่อเทียบกับแนวทางที่ใช้ CDP แต่นี่ถือเป็นการพัฒนาที่น่าตื่นเต้นในอนาคต

ฟีเจอร์บางอย่าง เช่น การเข้าถึงคุกกี้ การสกัดกั้นคำขอเครือข่าย ฟีเจอร์การเลียนแบบที่เฉพาะเจาะจง และสิทธิ์ยังคงอยู่ภายใต้การกำหนดมาตรฐานที่ใช้งานอยู่ และจะมีการรวมเข้ากับ Puppeteer เมื่อพร้อม ในระหว่างนี้ ดูรายการฟีเจอร์ Puppeteer ทั้งหมดที่ WebDriver BiDi รองรับ

Puppeteer ยังไม่รองรับ Firefox ใช่ไหม

แม้ว่าก่อนหน้านี้ Puppeteer จะให้การสนับสนุนเวอร์ชันทดลองสำหรับ Firefox โดยใช้ CDP ที่จำกัดและไม่ได้ใช้เบราว์เซอร์ แต่ก็ยังประสบกับข้อจำกัดและไม่เป็นโซลูชันที่ยั่งยืน

การใช้งาน Firefox และ WebDriver BiDi เวอร์ชันทดลองใหม่นี้ช่วยแก้ไขปัญหาเหล่านี้ได้

เราทราบว่าคุณอาจมีคำถามเพิ่มเติมต่อไปนี้

  • การสนับสนุน CDP ของ Firefox จะยุติลงหรือไม่
  • ระบบรองรับฟีเจอร์ Puppeteer ทั้งหมดไหม

สำหรับคำตอบโดยละเอียดและข้อมูลเพิ่มเติม โปรดดูประกาศเฉพาะจาก Firefox!

ช่วงเวลาอันน่าตื่นเต้นที่กำลังจะมาถึง

การทดสอบข้ามเบราว์เซอร์เป็นหนึ่งในความต้องการอันดับต้นๆ ของนักพัฒนาซอฟต์แวร์ เราจึงตื่นเต้นที่จะได้เป็นผู้นำการผสานรวม WebDriver BiDi เข้ากับ Puppeteer ซึ่งเป็นจุดเปลี่ยนไปสู่ประสบการณ์การทำงานอัตโนมัติข้ามเบราว์เซอร์ที่ราบรื่นและมีประสิทธิภาพมากขึ้น เราขอแนะนำให้คุณสำรวจ WebDriver BiDi กับ Puppeteer

ในอนาคต WebDriver BiDi จะกลายเป็นโปรโตคอลเริ่มต้นสำหรับ Puppeteer และช่วยปูทางสู่ประสบการณ์การทำงานอัตโนมัติที่มีความสอดคล้องและทรงพลัง

สำหรับปัญหาที่พบเมื่อทำการทดสอบ Puppeteer ด้วย WebDriver BiDi ให้เปิดปัญหาในเครื่องมือติดตามปัญหา Puppeteer