Get best of the week

Playwright - Microsoft Playwright dan Alat Pengujian Baru



Saya telah menguji dan menulis kode selama sepuluh tahun, dan selama empat tahun terakhir saya telah menguji laporan di komite program konferensi Heisenbug. Hari ini saya akan berbicara tentang tes end-to-end, aksesibilitas lintas-browser, dan sensasi menggunakan Playwright versi 0.10.0.

Ujung ke ujung


Mengapa kita perlu tes end-to-end? Mereka mengontrol browser dan mensimulasikan tindakan pengguna. Misalnya, saya telah menjelaskan skrip khusus dan ingin agar mereka diuji dengan setiap versi produk. Memeriksa semua skrip untuk semua versi secara manual lebih mahal dan lebih lama daripada otomatis.

Ada berbagai alat: Selenium, Dalang, Busur Derajat, Cypress dan lainnya. Dua minggu lalu, alat baru dirilis - Playwright, yang dikerjakan oleh Andrey Lushnikov, pengembang Puppeteer. Pustaka ini sepenuhnya memecahkan masalah penulisan tes lintas-browser.




Tweet asli oleh Andrey Lushnikov dengan pengumuman tersebut.

Dalang vs. Dramawan


Saya menggunakan Puppeteer di beberapa proyek, dan secara keseluruhan itu tidak buruk. Selain itu, saya ingat bahwa pada akhir tahun lalu, Puppeteer memiliki rilis utama versi 2.0 . Tetapi ketika saya melihat ke dalam repositori , saya melihat gambar yang menarik:


Sepertinya saya tidak buta warna, tetapi terlalu banyak merah.

Saya bertanya-tanya mengapa Playwright lebih baik - alat baru yang rapi di GitHub di organisasi Microsoft.

Mengapa Dalang baik? Ini meluncurkan browser tanpa kepala dan menggunakan protokol DevTools , sehingga tes lebih cepat dan lebih stabil daripada Selenium, dan Anda dapat menulisnya dalam JavaScript yang menyenangkan .

Apa yang baik tentang Playwright? Pertama, ia memiliki semua roti dalang. Dan kedua, ini memungkinkan Anda untuk menulis tes lintas browser - Anda dapat memilih browser apa pun dalam kode tes : WebKit , Chromium, dan Firefox.

Saat pendidikan mandiri: mesin peramban
WebKit — Safari .

Chromium — Blink, Webkit. Blink Google Chrome, ., Microsoft Edge, Opera Vivaldi.

Firefox — Gecko. Chro Servo, Rust.


Apa yang diperlukan untuk menulis tes lintas-browser di Playwright? Saya memerlukan npm , Habr eksperimental, bahasa Inggris sekolah untuk membaca dokumentasi, secangkir kopi dan 15 setengah menit.

Pasang Playwright . Kami menulis di konsol:
npm i playwright

Screenshot Habr. Salin contoh dari dokumentasi:

const playwright = require('playwright');

(async () => {
   for (const browserType of ['chromium', 'firefox', 'webkit']) {
       const browser = await playwright[browserType].launch();
       const context = await browser.newContext();
       const page = await context.newPage('http://habr.com/');

       await page.screenshot({ path: `screenshots/example-${browserType}.png` });
       await browser.close();
   }
})();

Kode pada Puppeteer akan hampir sama:

const puppeteer = require('puppeteer');

(async () => {
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
   await page.goto('https://habr.com');
   await page.screenshot({path: 'screenshots/example.png'});

   await browser.close();
})();

Tes dari contoh pertama akan dijalankan di tiga browser. Benar, tidak jelas versi mana dan mana yang umumnya tersedia. Dokumentasi mengatakan bahwa Playwright secara otomatis mengunduh driver untuk browser. Anda juga dapat menentukan browser tertentu:

 const browser = await chromium.launch();  // Or 'firefox' or 'webkit'.
 const context = await browser.newContext();

Untuk memilih versi peramban dalam Puppeteer, Anda perlu menentukan jalur ke driver. Tidak ada kemungkinan seperti itu di PlayWright. Seperti yang saya pahami, versi mesin terbaru akan selalu digunakan, yang sudah dibahas di GitHub.

Omong-omong, jika Anda suka tes tangkapan layar, berhati-hatilah. Playwright dan Puppeteer mengambil tangkapan layar yang berbeda di Chromium:


Untuk beberapa alasan, font berukuran berbeda. Saya memulai tiket di GitHub.

Playwright mendukung WebKit, yang berarti pengujian di peramban seluler. Tetapi semua smartphone dan tablet memiliki resolusi yang berbeda - bagaimana memilih yang Anda butuhkan saat menjalankan tes? Saya menemukan 76 perangkat dalam kode deviceDescriptors.ts , termasuk model-model populerBlackBerry dan JioPhone 2. Dari bermanfaat: Anda dapat memilih iPhone 8 dan iPhone 8 dalam mode lansekap. Kode tes hampir sama dengan tes untuk browser biasa:

const { webkit, devices } = require('playwright');
const deviceType = devices['iPhone 8'];

(async () => {
   const browser = await webkit.launch();
   const context = await browser.newContext({
       viewport: deviceType.viewport,
       userAgent: deviceType.userAgent
   });
   const page = await context.newPage('http://habr.com');
   await page.screenshot({ path: `example-${deviceType.name}.png`});
   await browser.close();
})();

Fitur yang menarik dari Playwright adalah kemampuan untuk mengubah geolokasi, itu akan berguna saat menguji peta. Saat menginisialisasi konteks browser, Anda perlu menentukan koordinat:

const context = await browser.newContext({
   viewport: iPhone11.viewport,
   userAgent: iPhone11.userAgent,
   geolocation: { longitude: 12.492507, latitude: 41.889938 },
   permissions: { 'https://yandex.ru/maps': ['geolocation'] }
});

Ini bukan tahun pertama saya dalam pengujian dan kadang-kadang ingin melihat bagaimana tes lulus. Dalang memiliki opsi headless: falseyang meluncurkan jendela browser. Opsi yang sama persis dengan Playwright:

puppeteer.launch({headless: false});
playwright.launch({headless: false});

Karena kode uji pada kedua pustaka tidak sinkron, Anda tidak bisa langsung mengambilnya. Ada seluruh paragraf dalam dokumentasi Puppeteer , tetapi tidak ada dalam dokumentasi Playwright. Selain itu, tidak ada contoh kode dalam dokumentasi Playwright, tetapi ada tiket di GitHub. Sepertinya alasan yang bagus untuk berpartisipasi dalam proyek sumber terbuka. Dan contoh-contoh dari artikel ini tentang Playwright dan Jest saya masukkan ke dalam repositori saya .

Apakah ini saatnya untuk bergerak?


Tampaknya para pengembang Playwright siap untuk dengan cepat menambahkan fitur dan memperbaiki bug. Misalnya, mengunduh file tidak berfungsi saat ini, tetapi pengembang menulis bahwa mereka akan memperbaikinya dan itu tidak akan lebih buruk daripada Puppeteer. Jika Anda ingin mengirim tes ke Playwright, bersiaplah untuk mulai tiket.

Tampaknya tim Playwright ingin menyusun yang terbaik di perpustakaan ini. Dalam tiket GitHub, saya menemukan beberapa ide untuk meningkatkan API - misalnya, menambahkan fitur seperti di Cypress .

Playwright mendukung banyak browser, dan lebih mudah untuk menulis tes lintas-browser dengannya. Benar, sekarang ia memiliki versi 0.10.0, tidak banyak dokumentasi, dan SlackOverflow hanya memiliki enam pertanyaan. Saya sarankan Anda menonton rilis Playwright dengan cermat, tetapi jangan terburu-buru menggunakannya dalam produksi, karena API dapat berubah.

Playwright Pengembang di Heisenbug


Saya berbagi berita: Andrei Lushnikov akan memberikan ceramah tentang Playwright di konferensi Piter Heisenbug 2020, yang akan diadakan pada 8-9 April di St. Petersburg. Ada banyak pertanyaan baginya:

  • mengapa perpustakaan baru bernama Playwright dan di mana drama
  • kapan contoh akan muncul dalam dokumentasi dan berapa lama menunggu rilis versi 1.0
  • berapakah probabilitas bahwa lencana di repositori Puppete berubah menjadi hijau

UPD: Wawancara dengan Andrei Lushnikov "Jika situs web bekerja lebih baik, itu akan menjadi sempurna" baru saja dirilis . Di dalamnya, kami berbicara banyak tentang protokol, mesin peramban, dan integrasi eksternal.

Tiket ada di situs web Heisenbug . Pendapat tentang Playwright dan Dalang - tulis di komentar.
Dan jika Anda membaca posting sampai akhir, tetapi karena beberapa alasan tidak terbiasa dengan Puppeteer, lihat laporan Andrey dari konferensi Heisenbug terakhir, di mana ia berbicara tentang Puppeteer selama 55 menit.

Source: https://habr.com/ru/post/undefined/

More articles:


All Articles