Peningkatan Uji Cross-Browser Fitur otomatisasi Baru Firefox Nightly
Posting blog sebelumnya di ekosistem webtest menggambarkan pertukaran antara standar WebDriver berbasis HTTP dan otomatisasi browser melalui protokol DevTools seperti Chrome DevTools Protocol (CDP). Meskipun pendekatan berbasis HTTP WebDriver memiliki kelebihan, kami tahu bahwa banyak pengembang menganggap fitur tambahan dan ergonomi dari alat pengujian berbasis CDP menarik.
Jelas, WebDriver perlu diperluas untuk memenuhi kemampuan otomatisasi berbasis DevTools. Namun, prosesnya memakan waktu dan kami ingin lebih banyak pengembang dapat menjalankan pengujian otomatis di Firefox.
Untuk itu, Firefox Nightly mengirimkan beberapa implementasi eksperimental CDP. Secara khusus, ini mencakup kasus penggunaan pengujian end to end dengan fitur berbasis CDP Google Puppeteer dan Selenium 4.
Untuk pengguna yang mempertimbangkan untuk menggunakan alat CDP dalam rilis stabil Firefox, kami sedang dalam proses mengaktifkan fitur ini di saluran rilis dan ingin membuatnya tersedia sesegera mungkin.
Di sisa posting ini, kita akan melihat detail tentang cara menggunakan Firefox dengan alat berbasis CDP.
Otomasi puppeteer
Puppeteer adalah library Node.js yang menyediakan API otomatisasi browser asinkron intuitif di atas CDP.
puppeteer sendiri sekarang menyediakan dukungan eksperimental untuk Firefox berdasarkan implementasi CDP. Perubahan ini dibuat bekerja sama dengan pengelola puppeteer, memungkinkan Firefox untuk menjalankan banyak tes puppeteer yang ada dengan perubahan konfigurasi minimal.
Untuk menggunakan puppeteer dengan Firefox, instal paket puppeteer dan atur opsi produknya ke "firefox". Dimulai dengan versi 3.0, skrip instalasi npm Puppeteer dapat secara otomatis mengambil binari Firefox Nightly yang sesuai, membuatnya lebih mudah untuk diluncurkan dan dijalankan.
PUPPETEER_PRODUCT=firefox npm install puppeteer
Contoh berikut menunjukkan cara menggunakan puppeteer untuk memulai Firefox dalam mode tanpa kepala.
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({
product: 'firefox',
});
});
Itu saja. Yang perlu Anda lakukan untuk menjalankan skrip puppeteer terhadap Firefox adalah menambahkan satu opsi peluncuran itu.
Repositori puppeteer memiliki skrip sampel yang lebih panjang yang juga memberikan tip pemecahan masalah seperti mencetak log browser internal.
Luaskan skrip dari atas, buka halaman, dan uji properti elemen. Anda dapat melihat contoh serupa menggunakan WebDriver di posting blog pertama dalam seri ini.
const page = await browser.newPage();
await page.goto('http://localhost:8000');
const element = await page.$('.test');
expect(await element.evaluate(node => node.tagName)).toBe('DIV');
Ini memiliki fungsi yang sama dengan skrip WebDriver di posting pertama, tetapi dengan sedikit pekerjaan yang dilakukan secara internal. Dengan WebDriver, jenis skrip ini memetakan langsung ke protokol, membuat satu panggilan jarak jauh per baris. Untuk puppeteer, inisialisasi browser hanya bergantung pada 15 metode CDP yang berbeda dan 3 peristiwa yang berbeda.
Panggilan ke page.goto memeriksa beberapa acara CDP untuk memastikan navigasi berhasil. Sementara itu, panggilanv untuk page.$ dan element.evaluate adalah abstraksi tingkat tinggi selain evaluasi skrip jarak jauh.
Kompleksitas tambahan ini menghadirkan tantangan implementasi. Bahkan skrip sederhana membutuhkan browser untuk mengimplementasikan banyak perintah dan kejadian, dan bahkan penyimpangan yang tampaknya sedikit dari perilaku Blink dapat mematahkan asumsi yang dibuat pada klien.
Kerentanan ini tidak hanya karena CDP memberikan tingkat kontrol yang lebih rendah daripada WebDriver, tetapi juga penerapan protokol berpemilik yang tidak dirancang dengan mempertimbangkan dukungan lintas-browser.
Dukungan CDP yang tersedia saat ini di Firefox Nightly memungkinkan fitur inti Puppeteer seperti navigasi, evaluasi skrip, interaksi elemen, dan tangkapan layar. Saya memahami bahwa banyak pengguna mengandalkan API yang belum mereka dukung. Misalnya, mencegat permintaan jaringan telah terbukti menjadi fitur menarik yang belum didukung oleh implementasi Firefox CDP.
Namun, saya tertarik dengan umpan balik jika skrip puppeteer tidak berfungsi seperti yang diharapkan di Firefox. Lihat akhir posting ini untuk cara menghubungi kami.
Selenium 4
Tidak hanya sepenuhnya klien berbasis CDP seperti puppeteer, tetapi juga klien berbasis WebDriver mulai menambahkan fitur berbasis CDP. Misalnya, Selenium 4 menggunakan CDP untuk menyediakan API baru untuk logging, mencegat permintaan jaringan, dan menanggapi mutasi DOM. Firefox Nightly sudah mendukung fitur CDP yang diperlukan untuk mendukung akses ke pesan log konsol.
Ini mewakili permintaan fitur lama dari penulis pengujian yang ingin menyatakan bahwa pengujian telah selesai tanpa pesan kesalahan yang tidak terduga dan mengumpulkan pesan log untuk membantu debug jika terjadi kegagalan.
Misalnya, Anda memiliki halaman yang mencatat pesan.
<title>Test page</title>
<script>
console.log('A log message')
</script>
</code></pre>
Berikut skrip dengan bindings Selenium Python trunk terbaru:
import trio
from selenium import webdriver
from selenium.webdriver.common.bidi.console import Console
async def get_console_errors():
driver = webdriver.Firefox()
async with driver.add_listener(Console.ALL) as messages:
driver.get("http://localhost:8000/test.html")
print(messages['message'])
driver.quit()
trio.run(get_console_errors)
Script mengeluarkan "pesan log".
Kami sedang bekerja untuk lebih mengaktifkan fitur Selenium 4 untuk pengguna Firefox dan bekerja dengan pembuat Selenium untuk mendukung semua binding bahasa yang disediakan.
Akses langsung ke koneksi CDP
Untuk pengguna yang ingin mencoba protokol CDP yang mendasarinya di Firefox tanpa bergantung pada klien yang ada, mekanisme untuk mengaktifkan dukungan CDP sangat mirip dengan mekanisme di Chrome. Untuk memulai server CDP, mulai Firefox Nightly dengan opsi baris perintah -remote-debugging-port. Secara default, ini akan memulai server pada port 9222. Proses browser mencetak pesan yang mirip dengan berikut ini ke stderr:
DevTools listening on ws://localhost:9222/devtools/browser/9fa78d94-9133-4460-a4f2-f8ffa149b354
Ini menyediakan URL WebSocket yang digunakan untuk berinteraksi dengan CDP. Server juga memperlihatkan beberapa titik akhir HTTP yang berguna. Misalnya, Anda bisa mendapatkan daftar semua target WebSocket yang tersedia dari http://localhost:9222/json/list. Membawa otomatisasi tingkat tinggi ke semua browser
Bereksperimen dengan CDP di Firefox adalah langkah awal dalam mengembangkan versi baru dari protokol WebDriver yang disebut WebDriverBiDi. Sementara kami berpartisipasi dalam proses standardisasi, tim kami tertarik dengan umpan balik tentang alur kerja pengujian end-to-end Cross-Browser. Pengembang harus mencoba menjalankan Puppeteer atau tes berbasis CDP lainnya terhadap Firefox Nightly.
Jika Anda mengalami issue yang tidak terduga atau fitur yang hilang, anda dapat menghubungi menggunakan yang berikut ini:
- Saya mencari laporan khusus Firefox tentang sistem pelacakan masalah puppeteer.
- Jika Anda memiliki akses langsung ke koneksi CDP Firefox tanpa pustaka klien, tempat terbaik untuk melaporkan masalah adalah Bugzilla Mozilla.
- Jangan ragu untuk mengajukan pertanyaan di saluran Matrix #protokol jarak jauh
Saya suka menerima log tingkat protokol di mana pun saya mengirim umpan balik
Solusi otomatisasi berdasarkan protokol kepemilikan selalu membatasi jangkauan browser yang dapat mereka dukung. Keberhasilan web didasarkan pada standar multi-vendor. Penting juga bahwa alat uji dibuat sesuai standar. Ini akan memungkinkan pengujian bekerja di semua browser dan perangkat tempat web bekerja.
Di masa mendatang, kami dapat menerbitkan lebih banyak pos yang menampilkan karya yang kami selidiki dengan vendor lain di WebDriver-BiDi. Ini adalah proyek standarisasi yang menetapkan protokol yang berfokus pada otomatisasi dua arah di masa depan.