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

Jecelyn Yeen

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

WebDriver BiDi เป็นโปรโตคอลการทำงานอัตโนมัติแบบข้ามเบราว์เซอร์มาตรฐานใหม่ซึ่งรวมข้อดีของ WebDriver Classic และ 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

ในการประเมินความสามารถของ WebDriver BiDi ใน Puppeteer เราใช้ชุดทดสอบ 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 แบบจํากัดและใช้งานข้ามเบราว์เซอร์ไม่ได้ แต่ก็มีข้อจํากัดและไม่ใช่โซลูชันที่ยั่งยืน

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

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

• Firefox จะหยุดรองรับ CDP ไหม
• รองรับฟีเจอร์ Puppeteer ทั้งหมดไหม

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

ช่วงเวลาที่น่าตื่นเต้น

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

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

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