Manfaatkan kecanggihan WebDriver BiDi: otomatisasi Chrome dan Firefox dengan Puppeteer

Puppeteer sekarang berbicara dengan Firefox! 🎉 Tapi tunggu, bukan sudah? 🤔 Mari pelajari WebDriver BiDi, protokol baru di Puppeteer dan temukan apa arti pengembangan yang menarik ini bagi alur kerja otomatisasi Firefox.

WebDriver BiDi adalah protokol otomatisasi lintas browser terstandardisasi yang menggabungkan fitur terbaik WebDriver Klasik dan Chrome DevTools Protocol (CDP). Layanan ini menjanjikan komunikasi dua arah, memungkinkan otomatisasi yang lebih efisien dan lebih mumpuni, serta kontrol terperinci. Anda dapat memantau progresnya di roadmap resmi.

Sejak update status kami sebelumnya, kami terus bekerja sama secara erat dengan W3C Browser Testing and Tools Working Group. Puppeteer kini mengimplementasikan fitur seperti logging, peristiwa jaringan, dan pengiriman formulir, berkat kemajuan BiDi WebDriver.

Tampilkan kodenya

Skrip Puppeteer berikut menampilkan penggunaan WebDriver BiDi, dan berfungsi dengan lancar di Chrome dan Firefox:

1. Luncurkan browser yang Anda pilih dengan setelan protokol.
2. Memantau pesan konsol untuk menemukan error.
3. Buka halaman web, setel dimensi area pandang, lalu klik tombol.
4. Memverifikasi konten teks dan menegaskan kesetaraan.

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();

Progres BiDi WebDriver di Puppeteer

Untuk mengukur kemampuan WebDriver BiDi di Puppeteer, kami menggunakan rangkaian tes Puppeteer yang komprehensif. Meskipun implementasi BiDi Puppeteer dan WebDriver masih dalam proses dan belum memiliki semua persyaratan untuk Puppeteer dengan Chrome dan CDP, kami ingin memberi Anda gambaran yang jelas tentang posisi Puppeteer.

Firefox:

• WebDriver BiDi telah mencapai tingkat kualitas yang sesuai untuk tugas otomatisasi praktis. Mozilla telah berhasil mentransfer pengujian Puppeteer untuk pdf.js dari Firefox dan CDP ke Firefox dan WebDriver BiDi.
• Lebih dari 55% pengujian berhasil lulus dengan WebDriver BiDi, yang menunjukkan fungsinya yang terus berkembang.
• Secara khusus, lebih dari 82 pengujian baru menggunakan WebDriver BiDi secara efisien, membuka jalan untuk peningkatan lebih lanjut.

Chrome:

• Chrome saat ini mencapai tingkat kelulusan 68% dengan WebDriver BiDi, menunjukkan fungsi yang andal. Meskipun ada peluang pengoptimalan lebih lanjut dibandingkan dengan pendekatan berbasis CDP, perkembangan menarik di masa mendatang yang menjanjikan ini.

Fitur tertentu seperti akses cookie, intersepsi permintaan jaringan, fitur emulasi tertentu, dan izin masih dalam standardisasi aktif. Setelah siap, perangkat akan diintegrasikan ke Puppeteer. Sementara itu, lihat daftar lengkap fitur Puppeteer yang didukung oleh WebDriver BiDi.

Bukankah Puppeteer sudah mendukung Firefox?

Meskipun Puppeteer sebelumnya menawarkan dukungan eksperimental untuk Firefox menggunakan implementasi CDP yang terbatas dan bukan lintas browser, namun dukungan tersebut memiliki keterbatasan dan bukan solusi yang berkelanjutan.

Implementasi Firefox dan WebDriver BiDi eksperimental baru mengatasi masalah ini.

Kami tahu Anda mungkin memiliki pertanyaan tambahan seperti:

• Apakah dukungan CDP Firefox akan dihentikan?
• Apakah semua fitur Puppeteer didukung?

Untuk jawaban terperinci dan informasi selengkapnya, lihat pengumuman khusus dari Firefox.

Masa depan yang menarik

Pengujian lintas-browser telah menjadi salah satu kebutuhan developer teratas, jadi kami tidak sabar untuk memimpin integrasi WebDriver BiDi ke Puppeteer, yang menandai titik balik menuju pengalaman otomatisasi lintas browser yang lebih lancar dan efisien. Sebaiknya Anda menjelajahi WebDriver BiDi dengan Puppeteer.

Ke depannya, WebDriver BiDi pada akhirnya akan menjadi protokol default untuk Puppeteer, sehingga membuka jalan bagi pengalaman otomatisasi yang konsisten dan lebih berdaya.

Untuk masalah apa pun yang Anda alami saat menjalankan pengujian Puppeteer dengan WebDriver BiDi, buka masalah di Issue tracker Puppeteer kami.