Mari kita akui, menulis pengujian otomatis bukanlah hal yang paling menyenangkan dalam kehidupan developer. Sebagai developer, kita ingin menulis fitur, memperbaiki bug, dan menjadikan dunia lebih baik. Namun, jika kami tidak memiliki pengujian otomatis dalam alur kerja, dalam jangka panjang, segala sesuatunya bisa menjadi “bermasalah”. Jadi, kami juga merasa bahwa menulis pengujian otomatis itu penting.
Dengan panel Recorder di Chrome DevTools, Anda dapat merekam dan memutar ulang alur penggunaan, mengekspornya ke berbagai format (misalnya, skrip pengujian) melalui berbagai ekstensi dan library pihak ketiga, menyesuaikan alur penggunaan dengan library Puppeteer Replay, dan mengintegrasikannya dengan alur kerja yang ada.
Dalam postingan blog ini, kita akan membahas:
- Cara mengekspor dan memutar ulang alur penggunaan secara terprogram.
- Cara menyesuaikan alur penggunaan dengan bantuan Puppeteer Replay.
- Cara mengintegrasikan alur kerja CI/CD Anda.
Postingan blog ini mengasumsikan Anda sudah mengetahui dasar-dasar Perekam Suara. Jika Anda baru menggunakan Perekam Suara, ikuti tutorial pengantar singkat dan panduan video ini untuk memulai.
Ekspor alur penggunaan dan putar ulang secara terprogram
Secara default, Perekam Suara memberi Anda kemampuan untuk mengekspor rekaman ini sebagai skrip Puppeteer atau Puppeteer Replay, atau sebagai file JSON biasa.
Setelah mengekspor alur penggunaan sebagai file JSON, Anda memiliki opsi untuk mengimpornya kembali ke panel Perekam Suara dan memutarnya ulang, atau menggunakan library eksternal untuk memutarnya ulang. Library Puppeteer Replay adalah salah satu library yang tersedia.
Mainkan Ulang dengan Puppeteer Replay
Ikuti petunjuk di repositori untuk menginstal Puppeteer Replay.
Misalkan Anda menyimpan alur penggunaan JSON di folder recordings (misalnya, project demo), Anda dapat menggunakan perintah berikut untuk menjalankan satu atau beberapa alur penggunaan:
# replay one user flow
npx @puppeteer/replay ./recordings/order-a-coffee.json
# replay all user flows under recordings folder
npx @puppeteer/replay ./recordings/*.json
Secara opsional, Anda dapat menambahkan skrip npm untuk menjalankan rekaman; tambahkan baris ini ke kolom scripts di package.json:
"replay-all": "replay recordings"
Dengan demikian, Anda dapat menjalankan npm run replay-all di command line untuk memutar ulang semua rekaman.
Secara default, alur penggunaan ulang tanpa UI (juga dikenal sebagai mode headless). Jika Anda ingin melihat UI, setel variabel lingkungan PUPPETEER_HEADLESS ke salah (false) sebelum menjalankan perintah.
PUPPETEER_HEADLESS=false npm run replay-all
Main lagi dengan library pihak ketiga
Ada beberapa library pihak ketiga yang dapat Anda gunakan untuk memutar ulang di luar browser Chrome. Berikut adalah daftar lengkap library.
Misalnya, TestCafe adalah framework pengujian end-to-end. Privacy Sandbox mendukung pemutaran ulang alur penggunaan JSON dengan Safari dan lainnya.
npm install -g testcafe
# replay with selected browsers
testcafe safari ./recordings/order-one-coffee.json
testcafe firefox ./recordings/order-one-coffee.json
testcafe chrome ./recordings/order-one-coffee.json
# replay with all browsers
testcafe all ./recordings/order-one-coffee.json
Di sisi lain, Saucelabs adalah platform pengujian berbasis cloud. Layanan ini mendukung pemutaran ulang alur penggunaan JSON dengan berbagai browser dan versi di cloud.
Berikut adalah contoh file konfigurasi di Saucelabs. Lihat repositori demo.
apiVersion: v1alpha
kind: puppeteer-replay
suites:
- name: "order a coffee"
recordings: [ "recordings/order-a-coffee.json" ]
…
Mengekspor alur penggunaan dengan berbagai ekstensi
Selain opsi default, Anda juga dapat menginstal ekstensi untuk mengekspor alur penggunaan ke berbagai format.
Misalnya, Anda dapat merekam dan mengekspor alur penggunaan sebagai skrip kustom WebPageTest. Dengan skrip ini, Anda dapat menguji performa alur pengguna multi-langkah melalui aplikasi Anda. Namun, menulis skrip tersebut terkadang bisa menjadi tantangan.
Selain itu, jika Anda sudah memiliki alat pengujian, ada ekstensi untuk mengekspor alur penggunaan ke berbagai skrip pengujian seperti Cypress, Nightwatch, WebdriverIO, Testing Library, dan lainnya. Berikut adalah daftar lengkapnya. Langkah ini dapat membantu Anda dan tim mulai menulis tes lebih cepat.
Mentransformasi ke skrip pengujian yang berbeda secara terprogram
Selain ekstensi, sebagian besar penyedia pengujian ini juga memublikasikan library untuk membantu Anda mengonversi beberapa alur penggunaan JSON secara terprogram.
Misalnya, gunakan library @cypress/chrome-recorder untuk mengekspor alur penggunaan ke pengujian Cypress.
npm install -g @cypress/chrome-recorder
npx @cypress/chrome-recorder ./recordings/*.json
Memutar ulang alur penggunaan dengan ekstensi
Mulai Chrome 112, Anda kini dapat meningkatkan pengalaman dengan menggunakan ekstensi untuk memutar ulang rekaman. Ekstensi ini memungkinkan Anda mengintegrasikan infrastruktur dan layanan pihak ketiga dengan lancar untuk memutar ulang rekaman tanpa harus meninggalkan DevTools.
Untuk memulai, jelajahi daftar ekstensi yang tersedia atau pelajari cara membuat ekstensi kustom Anda sendiri.
Membuat ekstensi atau library Anda sendiri
Di balik layar, semua ekstensi dan library dibangun di atas library Puppeteer Replay. Selain memungkinkan Anda memutar ulang alur penggunaan, Puppeteer Replay menawarkan API yang memungkinkan Anda menyesuaikan atau mengubah replay alur penggunaan.
Menyesuaikan replay alur penggunaan
Mari kita buat plugin screenshot. Untuk setiap alur pengguna, kita ingin:
- Untuk mengambil screenshot di akhir setiap langkah dan menyimpannya di folder
_screenshots. - Untuk menghasilkan output pesan saat eksekusi alur pengguna selesai.
Berikut adalah cuplikan kodenya. Anda dapat mendownload demo ini dan menggunakannya juga.
/* screenshot-plugin.mjs */
import { mkdirSync } from "fs";
import { PuppeteerRunnerExtension } from "@puppeteer/replay";
// create folder if not exist
let screenshotFolder = "_screenshots";
mkdirSync(screenshotFolder, { recursive: true });
export default class ScreenshotPlugin extends PuppeteerRunnerExtension {
count = 0;
async afterEachStep(step, flow) {
await super.afterEachStep(step, flow);
this.count = this.count + 1;
const path = `${screenshotFolder}/${flow.title}-${this.count}.png`;
await this.page.screenshot({ path });
console.log(`Saved screenshot as ${path}`);
}
async afterAllSteps(step, flow) {
await super.afterAllSteps(step, flow);
console.log("Operation completed successfully.");
}
}
Kode ini sendiri cukup ekspresif. Kami akan memperluas PuppeteerRunnerExtension API untuk menyimpan screenshot setelah setiap langkah, dan untuk mencatat pesan setelah semua langkah dilakukan.
Simpan file, lalu kita dapat menjalankan alur penggunaan dengan ekstensi ini menggunakan perintah berikut:
# replay one user flow with plugin
npx @puppeteer/replay --extension ./screenshot-plugin.mjs ./recordings/order-a-coffee.json
# replay all user flows with plugin under recordings folder
npx @puppeteer/replay --extension ./screenshot-plugin.mjs ./recordings/*.json
Berikut output-nya:
Saved screenshot as _screenshots/order-a-coffee-1.png
Saved screenshot as _screenshots/order-a-coffee-2.png
Saved screenshot as _screenshots/order-a-coffee-3.png
…
Operation completed successfully.
Mentransformasi alur pengguna
Cara lain untuk menyesuaikan alur penggunaan adalah dengan mengubahnya ke dalam format yang berbeda (misalnya,skrip pengujian Cypress, atau Nightwatch).
Misalnya, alur pengguna Anda berisi langkah untuk menavigasi ke URL. Berikut adalah tampilan file JSON:
{
"title": "order-a-coffee",
"steps": [
{
"type": "navigate",
"url": "https://coffee-cart.netlify.app/"
},
…
]
}
Anda dapat membuat plugin stringify untuk mengubah langkah ke JavaScript. Anda juga dapat melihat library lain yang ada untuk melihat cara mereka melakukannya.
Misalnya, cuplikan kode berikut menunjukkan cara WebdriverIO mengubah langkah navigasi:
export class StringifyPlugin extends PuppeteerStringifyExtension {
#appendStepType(out: LineWriter, step: Step, flow: UserFlow) {
switch (step.type) {
case 'navigate':
return out.appendLine(`await browser.url(${formatAsJSLiteral(step.url)})`)
…
}
Saat Anda menjalankan plugin dengan alur penggunaan, garis navigasi akan diterjemahkan menjadi await browser.url(‘https://coffee-cart.netlify.app/’).
Menyesuaikan pengalaman replay DevTools
Ekstensi replay menyediakan cara untuk memutar ulang rekaman menggunakan layanan dan infrastruktur pihak ketiga, semuanya tanpa meninggalkan Perekam DevTools.
Untuk membuat ekstensi replay Anda sendiri, baca dokumentasi ekstensi replay dan tinjau contoh ekstensi untuk mendapatkan panduan.
Memublikasikan ekstensi Chrome
Setelah menyesuaikan dan mengubah alur penggunaan, Anda dapat mengemasnya sebagai ekstensi Chrome dan memublikasikannya ke Chrome Web Store.
Lihat demo dan petunjuk ini untuk mempelajari cara melakukan debug secara lokal dan memublikasikan ekstensi Chrome.
Mengintegrasikan dengan pipeline CI/CD
Ada beberapa cara untuk melakukan ini dan ada banyak alat di luar sana. Berikut adalah contoh otomatisasi proses ini dengan GitHub Actions:
# .github/node.js.yml
name: Replay recordings
on:
push:
branches: [ "main" ]
schedule:
- cron: '30 12 * * *' # daily 12:30pm
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: 18.x
cache: 'npm'
- run: npm install puppeteer
- run: npm run replay-all
- run: npm run start
Dalam contoh ini, kita akan memutar ulang alur penggunaan saat:
- perubahan baru dikirim ke cabang
main - setiap hari pukul 12.30
Selain GitHub Actions, Anda juga dapat berintegrasi dengan penyedia cloud favorit. Buka demo ini untuk mengetahui cara menggunakan Tugas Google Cloud Run untuk menjalankan hingga 10.000 alur penggunaan secara paralel.
Kesimpulan
Dalam postingan blog ini, kita telah membahas berbagai opsi untuk mengekspor alur penggunaan sebagai file JSON, menyesuaikan replay dengan PuppeteerReplayExtension, mengubah alur penggunaan dengan PuppeteerStringifyExtension, dan mengintegrasikannya dalam alur kerja CI Anda.
Saya harap postingan blog ini memberi Anda beberapa ide tentang cara menggunakan panel Perekam Suara dan alat yang disediakan untuk mempermudah mengintegrasikan alur kerja pengujian ke dalam project Anda. Kami menantikan karya Anda.
Mendownload saluran pratinjau
Pertimbangkan untuk menggunakan Chrome Canary, Dev, atau Beta sebagai browser pengembangan default Anda. Saluran pratinjau ini memberi Anda akses ke fitur DevTools terbaru, menguji API platform web mutakhir, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.
Menghubungi tim Chrome DevTools
Gunakan opsi berikut untuk membahas fitur dan perubahan baru dalam postingan, atau hal lain yang terkait dengan DevTools.
- Kirim saran atau masukan kepada kami melalui crbug.com.
- Laporkan masalah DevTools menggunakan Opsi lainnya
> Bantuan > Laporkan masalah DevTools di DevTools. - Tweet di @ChromeDevTools.
- Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.