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

עכשיו 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, אולם הוא סבל ממגבלות ולא היה פתרון בר קיימא.

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

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

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

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

זמנים מרגשים בהמשך

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

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

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