Kita akui, menulis pengujian otomatis bukanlah hal yang paling menyenangkan dalam kehidupan developer. Sebagai developer, kita ingin menulis fitur, memperbaiki bug, dan meningkatkan kualitas dunia. Namun, jika kami tidak memiliki pengujian otomatis di alur kerja, dalam jangka panjang, banyak hal yang bisa menjadi sangat “terlambat”. Jadi, menurut kami penulisan pengujian otomatis itu penting.
Dengan panel Recorder di Chrome DevTools, Anda dapat merekam dan memutar ulang alur pengguna, mengekspornya ke berbagai format (misalnya, skrip pengujian) melalui berbagai ekstensi dan library pihak ketiga, menyesuaikan alur pengguna dengan library Puppeteer Replay, dan mengintegrasikannya dengan alur kerja yang ada.
Dalam postingan blog ini, kami akan membahas:
- Cara mengekspor dan memutar ulang alur pengguna secara terprogram.
- Cara menyesuaikan alur penggunaan dengan bantuan Puppeteer Replay.
- Cara mengintegrasikan dengan alur kerja CI/CD Anda.
Posting blog ini mengasumsikan bahwa Anda telah memahami dasar-dasar Perekam Suara. Jika Anda baru menggunakan Perekam Suara, ikuti tutorial pengantar singkat dan panduan video ini untuk memulai.
Mengekspor dan memutar ulang alur pengguna 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 pengguna sebagai file JSON, Anda memiliki opsi untuk mengimpornya kembali ke panel Perekam 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.
Misalnya, Anda menyimpan alur pengguna 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
Jika ingin, 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.
Putar ulang alur pengguna tanpa UI secara default (juga dikenal sebagai mode headless). Jika Anda ingin melihat UI, setel variabel lingkungan PUPPETEER_HEADLESS ke salah sebelum menjalankan perintah.
PUPPETEER_HEADLESS=false npm run replay-all
Mainkan ulang 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 menyeluruh. Framework ini mendukung pemutaran ulang alur pengguna JSON dengan Safari dan banyak lagi.
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 mencatat dan mengekspor alur pengguna sebagai skrip kustom WebPageTest. Dengan skrip ini, Anda dapat menguji performa alur pengguna multi-langkah pada aplikasi Anda. Namun, menulis naskah tersebut terkadang bisa menjadi tantangan.
Selain itu, jika Anda sudah menerapkan alat pengujian, tersedia ekstensi untuk mengekspor alur pengguna ke berbagai skrip pengujian seperti Cypress, Nightwatch, WebdriverIO, Testing Library, dan lainnya. Berikut daftar lengkapnya. Langkah ini dapat membantu Anda dan tim Anda mulai menulis pengujian lebih cepat.
Melakukan transformasi ke skrip pengujian yang berbeda secara terprogram
Selain ekstensi, sebagian besar penyedia pengujian ini juga memublikasikan library untuk membantu Anda mengonversi beberapa alur pengguna 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 menggunakan ekstensi untuk memutar ulang rekaman. Ekstensi ini memungkinkan Anda mengintegrasikan layanan dan infrastruktur 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.
Membangun ekstensi atau library Anda sendiri
Di balik layar, semua ekstensi dan library dibuat berdasarkan library Puppeteer Replay. Selain memungkinkan Anda memutar ulang alur penggunaan, Puppeteer Replay menawarkan API yang memungkinkan Anda menyesuaikan atau mentransformasi pemutaran ulang alur pengguna.
Menyesuaikan replay alur penggunaan
Mari kita build plugin screenshot. Untuk setiap alur pengguna, kita ingin:
- Untuk mengambil screenshot di akhir setiap langkah dan menyimpannya ke folder
_screenshots. - Untuk menghasilkan pesan saat eksekusi alur pengguna selesai.
Berikut adalah cuplikan kodenya. Anda dapat mendownload demo ini dan juga memainkannya.
/* 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.");
}
}
Kodenya sendiri cukup ekspresif. Kita memperluas PuppeteerRunnerExtension API untuk menyimpan screenshot setelah setiap langkah, dan untuk mencatat pesan ke dalam log setelah semua langkah.
Simpan file, lalu kita dapat menjalankan alur pengguna 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 pengguna 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 mengetahui 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, baris navigasi akan diterjemahkan menjadi await browser.url(‘https://coffee-cart.netlify.app/’).
Sesuaikan pengalaman replay DevTools
Ekstensi replay menyediakan cara untuk memutar ulang rekaman menggunakan layanan dan infrastruktur pihak ketiga, semuanya tanpa meninggalkan DevTools Perekam.
Untuk membuat ekstensi replay Anda sendiri, lihat 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 memublikasikan ke Chrome Web Store.
Lihat demo dan petunjuk ini untuk mempelajari cara melakukan debug secara lokal dan memublikasikan ekstensi Chrome.
Berintegrasi dengan pipeline CI/CD
Ada beberapa cara untuk melakukan ini dan ada banyak alat yang tersedia. Berikut adalah contoh otomatisasi proses ini dengan Tindakan GitHub:
# .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:
- pengiriman perubahan baru ke cabang
main - setiap hari jam 12.30
Selain GitHub Actions, Anda juga dapat mengintegrasikan dengan penyedia cloud favorit Anda. Buka demo ini untuk melihat bagaimana Anda dapat menggunakan Google Cloud Run Job untuk menjalankan hingga 10.000 alur pengguna secara paralel.
Kesimpulan
Dalam postingan blog ini, kita telah membahas berbagai opsi untuk mengekspor alur pengguna sebagai file JSON, menyesuaikan replay dengan PuppeteerReplayExtension, mengubah alur pengguna dengan PuppeteerStringifyExtension, dan mengintegrasikannya ke dalam alur kerja CI Anda.
Saya harap postingan blog ini telah memberi Anda beberapa ide tentang bagaimana Anda dapat menggunakan panel Perekam dan alat yang disediakan untuk memudahkan mengintegrasikan alur kerja pengujian ke dalam project Anda. Kami tidak sabar ingin melihat karya-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 tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.
Menghubungi tim Chrome DevTools
Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan ini, 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.
- Tuliskan komentar di video YouTube Yang baru di DevTools atau video YouTube di DevTools.