Manfaatkan kecanggihan WebDriver BiDi: otomatisasi Chrome dan Firefox dengan Puppeteer

Jecelyn Yeen

Puppeteer kini berkomunikasi dengan Firefox. 🎉 Tapi tunggu, bukankah sudah? 🤔 Mari kita pelajari WebDriver BiDi, protokol baru di Puppeteer, dan temukan arti pengembangan yang menarik ini bagi alur kerja otomatisasi Firefox.

WebDriver BiDi adalah protokol otomatisasi lintas browser standar baru yang menggabungkan WebDriver Classic dan Chrome DevTools Protocol (CDP) terbaik. API ini menjanjikan komunikasi dua arah, yang memungkinkan otomatisasi yang lebih efisien dan lebih andal, serta kontrol terperinci. Anda dapat melacak progresnya di roadmap resmi.

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

Tampilkan kode

Skrip Puppeteer berikut menunjukkan cara kerja WebDriver BiDi, dan berfungsi dengan lancar di Chrome dan Firefox:

  1. Luncurkan browser yang Anda pilih dengan setelan protokol.
  2. Pantau pesan konsol untuk menemukan error.
  3. Buka halaman web, tetapkan dimensi area pandang, lalu klik tombol.
  4. Verifikasi konten teks dan nyatakan 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 WebDriver BiDi di Puppeteer

Untuk mengukur kemampuan WebDriver BiDi di Puppeteer, kami menggunakan rangkaian pengujian Puppeteer yang komprehensif. Meskipun penerapan BiDi Puppeteer dan WebDriver masih dalam proses dan belum memiliki semua fitur Puppeteer dengan Chrome dan CDP, kami ingin memberi Anda gambaran yang jelas tentang kondisinya.

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, sehingga membuka jalan untuk peningkatan lebih lanjut.

Chrome:

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

Fitur tertentu seperti akses cookie, intersepsi permintaan jaringan, fitur emulasi tertentu, dan izin masih dalam standardisasi aktif. Item tersebut akan diintegrasikan ke Puppeteer setelah siap. 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 tidak dapat lintas browser, tetapi Puppeteer mengalami keterbatasan dan bukan merupakan solusi yang berkelanjutan.

Penerapan eksperimental Firefox dan WebDriver BiDi dapat mengatasi masalah ini.

Kami tahu bahwa Anda mungkin memiliki pertanyaan tambahan seperti:

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

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

Masa depan yang menarik

Pengujian lintas browser telah menjadi salah satu kebutuhan utama developer, jadi kami senang dapat memimpin integrasi WebDriver BiDi ke Puppeteer, yang menandai titik balik menuju pengalaman otomatisasi lintas browser yang lebih lancar dan efisien. Kami mendorong Anda untuk menjelajahi WebDriver BiDi dengan Puppeteer.

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

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