Exploitez toute la puissance de WebDriver BiDi: automatisation de Chrome et Firefox avec Puppeteer

Puppeteer communique désormais avec Firefox. 🎉 Mais n'est-ce pas déjà le cas ? 🤔 Découvrons WebDriver BiDi, le nouveau protocole de Puppeteer, et ce que ce développement passionnant signifie pour le workflow d'automatisation de Firefox.

WebDriver BiDi est un nouveau protocole d'automatisation multinavigateur standardisé qui combine le meilleur de WebDriver Classic et du CDP (Chrome DevTools Protocol). Il promet une communication bidirectionnelle, permettant une automatisation plus efficace et plus performante, ainsi qu'un contrôle précis. Vous pouvez suivre sa progression sur la feuille de route officielle.

Depuis notre dernière mise à jour de l'état, nous avons continué à travailler en étroite collaboration avec le W3C Browser Testing and Tools Working Group. Grâce aux avancées de WebDriver BiDi, Puppeteer implémente désormais des fonctionnalités telles que la journalisation, les événements réseau et l'envoi de formulaires.

Montre-moi le code

Le script Puppeteer suivant présente WebDriver BiDi en action, et fonctionne parfaitement avec Chrome et Firefox:

  1. Lancez le navigateur de votre choix avec le paramètre de protocole.
  2. Surveillez les messages de la console pour détecter les erreurs.
  3. Accédez à une page Web, définissez les dimensions de la fenêtre d'affichage, puis cliquez sur un bouton.
  4. Vérifiez le contenu du texte et affirmez l'égalité.
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();

Avancement de la fonctionnalité BiDi WebDriver dans Puppeteer

Pour évaluer les fonctionnalités de WebDriver BiDi dans Puppeteer, nous avons utilisé la suite de tests Puppeteer complète. L'implémentation de la bidirectionnalité Puppeteer et WebDriver est toujours en cours et ne dispose pas encore de toutes les fonctionnalités de Puppeteer avec Chrome et CDP. Nous souhaitons toutefois vous donner un aperçu clair de la situation.

Firefox :

  • WebDriver BiDi a atteint un niveau de qualité adapté aux tâches d'automatisation pratiques. Mozilla a transféré avec succès les tests Puppeteer pour pdf.js de Firefox et de CDP vers Firefox et WebDriver BiDi.
  • Plus de 55% des tests réussissent avec WebDriver BiDi, ce qui prouve l'évolution de ses fonctionnalités.
  • Plus de 82 nouveaux tests utilisent efficacement WebDriver bidi, ce qui ouvre la voie à d'autres améliorations.

Chrome :

  • Chrome atteint actuellement un taux de réussite de 68% avec WebDriver BiDi, ce qui démontre sa fiabilité. Bien que l'approche basée sur les CDP puisse être optimisée, cette approche promet de futurs développements passionnants.

Certaines fonctionnalités, comme l'accès aux cookies, l'interception des requêtes réseau, des fonctionnalités d'émulation spécifiques et les autorisations, sont encore en cours de normalisation. Ils seront intégrés à Puppeteer une fois qu'ils seront prêts. En attendant, consultez la liste complète des fonctionnalités Puppeteer compatibles avec WebDriver BiDi.

Puppeteer n'était-il pas déjà compatible avec Firefox ?

Alors que Puppeteer proposait auparavant une compatibilité expérimentale pour Firefox en utilisant une implémentation limitée et non multi-navigateur de CDP, cette solution souffrait de limites et n'était pas une solution durable.

La nouvelle implémentation expérimentale de BiDi Firefox et WebDriver résout ces problèmes.

Vous avez peut-être d'autres questions, par exemple:

  • La compatibilité de Firefox avec le CDP va-t-elle disparaître ?
  • Toutes les fonctionnalités de Puppeteer sont-elles prises en charge ?

Pour obtenir des réponses détaillées et plus d'informations, consultez l'annonce dédiée de Firefox.

Prochaines périodes palpitantes

Les tests multinavigateurs sont l'un des principaux besoins des développeurs. Nous sommes donc ravis de diriger l'intégration de WebDriver BiDi dans Puppeteer, qui marque un tournant vers une expérience d'automatisation multinavigateur plus fluide et efficace. Nous vous encourageons à découvrir WebDriver BiDi avec Puppeteer.

À terme, WebDriver BiDi deviendra le protocole par défaut de Puppeteer, ouvrant la voie à une expérience d'automatisation cohérente et renforcée.

Si vous rencontrez des problèmes lors de l'exécution de tests Puppeteer avec WebDriver BiDi, consultez les problèmes à résoudre dans notre Issue Tracker de Puppeteer.