WebDriver BiDi'nin gücünden yararlanın: Puppeteer ile Chrome ve Firefox otomasyonu

Ceren Yeen
Jecelyn Yeen

Puppeteer şimdi Firefox'la konuşuyor! 🎉 Bir dakika, daha önce yapmadı mı? 🤔 Puppeteer'daki yeni protokol WebDriver BiDi'ye yakından bakalım ve bu heyecan verici geliştirmenin Firefox otomasyon iş akışı için ne anlama geldiğini keşfedelim.

WebDriver BiDi, WebDriver Classic ve Chrome Geliştirici Araçları Protokolü'nün (CDP) en iyi yönlerini birleştiren, tarayıcılar arası standart otomasyon protokolüdür. İki yönlü iletişim vaat ederek daha verimli ve daha yetenekli otomasyon ve ayrıntılı kontrol imkanı sunar. Projenin ilerleme durumunu resmi yol haritasından takip edebilirsiniz.

Önceki durum güncellememizden bu yana W3C Tarayıcı Test ve Araçları Çalışma Grubu ile yakın bir şekilde çalışmaya devam ettik. Puppeteer artık WebDriver BiDi'deki gelişmeler sayesinde günlük kaydı, ağ etkinlikleri ve form gönderme gibi özellikleri uyguluyor.

Kodu göster

Aşağıdaki Puppeteer komut dosyası, WebDriver BiDi'yi iş başında gösterir ve Chrome ile Firefox'ta sorunsuz bir şekilde çalışır:

  1. Protokol ayarı ile seçtiğiniz tarayıcıyı başlatın.
  2. Konsol mesajlarındaki hataları izleyin.
  3. Bir web sayfasına gidin, görüntü alanı boyutlarını ayarlayın ve bir düğmeyi tıklayın.
  4. Metin içeriğini doğrulayın ve eşitlik iddiasında bulunun.
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();

Puppeteer'da WebDriver BiDi'nin İlerleme Durumu

Puppeteer'daki WebDriver BiDi'nin becerilerini ölçmek için kapsamlı Puppeteer test paketini kullandık. Puppeteer ve WebDriver BiDi'nin uygulanması ile ilgili çalışmalar devam etmekte ve Puppeteer'ın Chrome ve CDP ile birlikte kullanımı henüz tam değildir. Ancak, size işlerin ne durumda olduğunu net bir şekilde göstermek istiyoruz.

Firefox:

  • WebDriver BiDi, pratik otomasyon görevlerine uygun bir kalite seviyesine ulaştı. Mozilla, pdf.js için Puppeteer testlerini Firefox ve CDP'den Firefox ve WebDriver BiDi'ye başarıyla taşımıştır.
  • Testlerin% 55'inden fazlası WebDriver BiDi ile başarıyla geçti ve bu da gittikçe büyüyen işlevselliğini ortaya koydu.
  • Dikkat çekici bir şekilde, 82'den fazla yeni test WebDriver BiDi'yi verimli bir şekilde kullanıyor ve bu da daha fazla geliştirmenin önünü açıyor.

Chrome:

  • Chrome, şu anda WebDriver BiDi ile% 68'lik bir geçme oranına ulaşarak güvenilir bir işlev sunmuştur. CDP tabanlı yaklaşıma kıyasla daha fazla optimizasyon yapılabilir, ancak bu gelecekte heyecan verici gelişmeler ümit ediyor.

Çerez erişimi, ağ isteği müdahalesi, belirli emülasyon özellikleri ve izinler gibi belirli özellikler hâlâ etkin standartlaştırma kapsamındadır. Hazır olduğunda Puppeteer'a entegre edilecek. Bu arada, WebDriver BiDi tarafından desteklenen Puppeteer özelliklerinin tam listesine göz atın.

Puppeteer Firefox'u zaten desteklemiyor muydu?

Puppeteer daha önce CDP'nin sınırlı ve tarayıcılar arası olmayan bir uygulamasını kullanarak Firefox için deneysel destek sunuyordu, ancak sınırlamalardan dolayı acı çektiği için sürdürülebilir bir çözüm değildi.

Yeni deneysel Firefox ve WebDriver BiDi uygulaması bu sorunları gidermektedir.

Aşağıdaki gibi başka sorularınız olabileceğini biliyoruz:

  • Firefox'un CDP desteği kaldırılacak mı?
  • Tüm Puppeteer özellikleri destekleniyor mu?

Ayrıntılı yanıtlar ve daha fazla bilgi için Firefox'un özel duyurusuna göz atın.

Heyecan verici günler sizi bekliyor

Tarayıcılar arası test, geliştirici ihtiyaçlarından biri oldu. Bu nedenle, WebDriver BiDi'nin Puppeteer'a entegrasyonuna liderlik etmekten heyecan duyuyoruz. Bu da daha sorunsuz ve etkili bir tarayıcılar arası otomasyon deneyimine doğru bir başlangıç noktası sağlıyor. WebDriver BiDi'yi Puppeteer ile keşfetmenizi öneririz.

İleriye dönük olarak WebDriver BiDi, Puppeteer için varsayılan protokol haline gelecek ve tutarlı ve güçlü bir otomasyon deneyiminin önünü açacaktır.

WebDriver BiDi ile Puppeteer testlerini çalıştırırken karşılaştığınız sorunları Puppeteer sorun izleyicimizde açın.