מנצלים את העוצמה של WebDriver BiDi: האוטומציה של Chrome ו-Firefox עם Puppeteer

Jecelyn Yeen

Puppeteer מדבר עכשיו עם Firefox! 🎉 אבל רגע, לא כבר? 🤔 נצלול ל-WebDriver BiDi, הפרוטוקול החדש ב-Puppeteer, ונגלה מה המשמעות של הפיתוח המלהיב הזה לתהליך העבודה של האוטומציה ב-Firefox.

WebDriver BiDi הוא פרוטוקול אוטומציה חדש וסטנדרטי בדפדפנים שונים, שמשלב את מיטב היכולות של WebDriver Classic ו-Chrome DevTools Protocol (CDP). הוא מבטיח תקשורת דו-כיוונית, שמאפשרת אוטומציה יעילה יותר ויכולות מתקדמות יותר, וגם שליטה פרטנית. אפשר לעקוב אחר ההתקדמות שלו במפת הדרכים הרשמית.

מאז עדכון הסטטוס הקודם שלנו, המשכנו לעבוד בשיתוף פעולה הדוק עם קבוצת העבודה של W3C לבדיקת דפדפנים וכלים. בזכות הפיתוחים ב-WebDriver BiDi, ב-Puppeteer מיישמים עכשיו תכונות כמו רישום ביומן, אירועי רשת ושליחה של טפסים.

אני רוצה לראות את הקוד

הסקריפט הבא של 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, אבל זוהי התפתחויות עתידיות ומבטיחות.

תכונות מסוימות, כמו גישה לקובצי cookie, תיעוד של בקשות רשת, תכונות ספציפיות של הדמיה והרשאות, עדיין נמצאות בתהליך סטנדרטיזציה פעיל. הן ישולבו ב-Puppeteer ברגע שהן יהיו מוכנות. בינתיים, כדאי לעיין ברשימה המלאה של תכונות Puppeteer נתמכות על ידי WebDriver BiDi.

Puppeteer כבר תומך ב-Firefox, לא?

בעבר, Puppeteer הציע תמיכה ניסיונית ב-Firefox באמצעות הטמעה מוגבלת של CDP שלא פועלת בכל הדפדפנים. הפתרון הזה סבל ממגבלות ולא היה פתרון בר-קיימא.

ההטמעה הניסיונית החדשה של BiDi ב-Firefox וב-WebDriver פותרת את הבעיות האלה.

אנחנו יודעים שיכול להיות שיש לך שאלות נוספות, למשל:

• האם תמיכת CDP ב-Firefox תבוטל?
• האם כל התכונות של Puppeteer נתמכות?

לתשובות מפורטות ומידע נוסף, אפשר לקרוא את ההודעה הייעודית של Firefox.

ימים מרגשים לפנינו

בדיקה בכמה דפדפנים היא אחד מהצרכים העיקריים של המפתחים, ולכן אנחנו שמחים להוביל את השילוב של WebDriver BiDi ב-Puppeteer. השילוב הזה מסמן נקודת מפנה לעבר חוויית אוטומציה חלקה ויעילה יותר בכמה דפדפנים. מומלץ לבדוק את WebDriver BiDi עם Puppeteer.

בעתיד, WebDriver BiDi יהפוך בסופו של דבר לפרוטוקול ברירת המחדל של Puppeteer, ויאפשר חוויית אוטומציה עקבית וחזקה יותר.

אם נתקלתם בבעיות במהלך הפעלת בדיקות Puppeteer עם WebDriver BiDi, תוכלו לפתוח בעיות במערכת למעקב אחר בעיות ב-Puppeteer.