Используйте возможности WebDriver BiDi: автоматизация Chrome и Firefox с помощью Puppeteer

Puppeteer теперь общается с Firefox! 🎉 Но подождите, не так ли уже? 🤔 Давайте углубимся в WebDriver BiDi, новый протокол в Puppeteer, и узнаем, что означает эта захватывающая разработка для рабочего процесса автоматизации Firefox.

WebDriver BiDi — это новый стандартизированный протокол кросс-браузерной автоматизации, сочетающий в себе лучшее от WebDriver Classic и протокола Chrome DevTools (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, мы хотим дать вам четкое представление о том, как обстоят дела.

Фаерфокс:

  • WebDriver BiDi достиг уровня качества, подходящего для практических задач автоматизации. Mozilla успешно перенесла тесты Puppeteer для pdf.js из Firefox и CDP в Firefox и WebDriver BiDi.
  • Более 55% тестов успешно проходят с помощью WebDriver BiDi, демонстрируя его растущую функциональность.
  • Примечательно, что более 82 новых тестов эффективно используют WebDriver BiDi, что открывает путь для дальнейших улучшений.

Хром:

  • В настоящее время 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 .