Temukan cara untuk membagikan alur penggunaan, mengedit alurnya, dan langkah-langkahnya dalam referensi fitur komprehensif di panel Perekam Chrome DevTools.
Untuk mempelajari dasar-dasar penggunaan panel Perekam, lihat Merekam, memutar ulang, dan mengukur alur penggunaan.
Pelajari dan sesuaikan pintasan
Gunakan pintasan untuk membuka Perekam dengan lebih cepat. Untuk daftar pintasan default, lihat Pintasan keyboard panel Perekam Suara.
Untuk membuka petunjuk yang mencantumkan semua pintasan langsung di Perekam, klik bantuan Tampilkan pintasan di sudut kanan atas.
Untuk menyesuaikan pintasan Perekam:
- Buka Setelan > Pintasan.
- Scroll ke bawah ke bagian Perekam.
- Ikuti langkah-langkah di Menyesuaikan pintasan.
Mengedit alur penggunaan
Di bagian atas panel Perekam, ada opsi untuk:
- Menambahkan rekaman baru. Klik ikon + untuk menambahkan rekaman baru.
- Melihat semua rekaman. Drop-down akan menampilkan daftar rekaman yang disimpan. Pilih opsi [jumlah] rekaman untuk meluaskan dan mengelola daftar rekaman yang disimpan.
Mengekspor rekaman. Untuk menyesuaikan skrip lebih lanjut atau membagikannya untuk tujuan pelaporan bug, Anda dapat mengekspor alur pengguna dalam salah satu format berikut:
- File JSON.
- Skrip @puppeteer/replay.
- Skrip Puppeteer.
- Puppeteer (termasuk analisis Lighthouse).
Untuk informasi selengkapnya tentang format, lihat Mengekspor alur penggunaan.
Mengimpor rekaman. Hanya dalam format JSON.
Menghapus rekaman. Hapus rekaman yang dipilih.
Anda juga dapat mengedit nama rekaman dengan mengklik tombol edit di sampingnya.
Membagikan alur penggunaan
Anda dapat mengekspor dan mengimpor alur penggunaan di Perekam Suara. Hal ini berguna untuk pelaporan bug karena Anda dapat membagikan catatan persis tentang langkah-langkah yang mereproduksi bug. Anda juga dapat mengekspor dan memutar ulang dengan library eksternal.
Mengekspor alur pengguna
Untuk mengekspor alur pengguna:
- Buka alur pengguna yang ingin Anda ekspor.
- Klik Ekspor di bagian atas panel Perekam.
- Pilih salah satu format berikut dari menu drop-down:
- File JSON. Download rekaman sebagai file JSON.
- @puppeteer/replay. Download rekaman dalam bentuk skrip Puppeteer Replay.
- Puppeteer. Download rekaman sebagai skrip Puppeteer.
- Puppeteer (termasuk analisis Lighthouse). Download rekaman sebagai skrip Puppeteer dengan analisis Lighthouse tersemat.
- Satu atau beberapa opsi yang disediakan oleh ekstensi Export Perekam Suara.
- Simpan file.
Anda dapat melakukan hal berikut dengan setiap opsi ekspor default:
- JSON. Edit objek JSON yang dapat dibaca manusia dan import file JSON kembali ke Perekam.
- @puppeteer/replay. Putar ulang skrip dengan library Puppeteer Replay. Saat mengekspor sebagai skrip @puppeteer/replay, langkah-langkahnya tetap menjadi objek JSON. Opsi ini sangat cocok jika Anda ingin berintegrasi dengan pipeline CI/CD, tetapi masih memiliki fleksibilitas untuk mengedit langkah sebagai JSON, kemudian konversi dan impor kembali ke Recorder.
- Skrip Puppeteer. Putar ulang skrip bersama Puppeteer. Karena langkah-langkah dikonversi menjadi JavaScript, Anda dapat memiliki penyesuaian yang lebih mendetail, misalnya, mengulangi langkah-langkah tersebut. Perlu diingat, Anda tidak dapat mengimpor skrip ini kembali ke Perekam.
Puppeteer (termasuk analisis Lighthouse). Opsi ekspor ini sama dengan opsi sebelumnya, tetapi menyertakan kode yang menghasilkan analisis Lighthouse.
Jalankan skrip dan lihat output di file
flow.report.html
:# npm i puppeteer lighthouse node your_export.js
Ekspor dalam format kustom dengan menginstal ekstensi
Lihat Ekstensi Perekam Suara.
Mengimpor alur pengguna
Untuk mengimpor alur pengguna:
- Klik tombol Import di bagian atas panel Recorder.
- Pilih file JSON dengan alur penggunaan yang direkam.
- Klik tombol Replay untuk menjalankan alur penggunaan yang diimpor.
Memutar ulang dengan library eksternal
Puppeteer Replay adalah library open source yang dikelola oleh tim Chrome DevTools. Bangunan ini dibuat di atas Puppeteer. Ini adalah alat command line, Anda dapat memutar ulang file JSON.
Selain itu, Anda dapat mengubah dan memutar ulang file JSON dengan library pihak ketiga berikut.
Ubah alur pengguna JSON menjadi skrip kustom:
- Perekam Chrome Cypress. Anda dapat menggunakannya untuk mengonversi file JSON alur penggunaan menjadi skrip pengujian Cypress. Tonton demo ini untuk melihat cara kerjanya.
- Perekam Chrome untuk Jam Malam. Anda dapat menggunakannya untuk mengonversi file JSON alur penggunaan ke skrip pengujian Nightwatch.
- CodeceptJS Chrome Recorder. Anda dapat menggunakannya untuk mengonversi file JSON alur penggunaan ke skrip pengujian CodeceptJS.
Putar ulang alur pengguna JSON:
- Putar ulang dengan Testcafe. Anda dapat menggunakan TestCafe untuk memutar ulang file JSON alur penggunaan dan membuat laporan pengujian untuk rekaman ini.
- Putar ulang dengan Sauce Labs. Anda dapat memutar ulang file JSON di Sauce Labs menggunakan saucectl.
Men-debug alur pengguna
Seperti kode apa pun, terkadang Anda harus men-debug alur penggunaan yang direkam.
Untuk membantu Anda men-debug, panel Perekam memungkinkan Anda memperlambat replay, menyetel titik henti sementara, menjalankan eksekusi, dan memeriksa kode dalam berbagai format secara paralel dengan langkah-langkah.
Memperlambat replay
Secara default, Perekam memutar ulang alur penggunaan secepat mungkin. Untuk memahami apa yang terjadi dalam rekaman, Anda dapat memperlambat kecepatan replay:
- Buka menu drop-down Putar ulang.
- Pilih salah satu opsi kecepatan replay:
- Normal (Default)
- Pelan
- Sangat lambat
- Amat sangat lambat
Memeriksa kode
Untuk memeriksa kode alur pengguna dalam berbagai format:
- Buka rekaman di panel Perekam.
- Klik Tampilkan kode di sudut kanan atas daftar langkah.
- Perekam akan menunjukkan tampilan langkah-langkah dan kodenya secara berdampingan.
- Saat Anda mengarahkan kursor ke sebuah langkah, Perekam akan menandai kodenya masing-masing dalam format apa pun, termasuk yang disediakan oleh ekstensi.
Perluas menu drop-down format untuk memilih format yang Anda gunakan untuk mengekspor alur penggunaan.
URL ini dapat berupa salah satu dari tiga format default (JSON, @puppeteer/replay, skrip Puppeteer, atau format yang disediakan oleh ekstensi.
Lanjutkan untuk men-debug rekaman Anda dengan mengedit parameter dan nilai langkah. Tampilan kode tidak dapat diedit, tetapi diperbarui sebagaimana mestinya saat Anda membuat perubahan pada langkah di sebelah kiri.
Menyetel titik henti sementara dan mengeksekusi langkah demi langkah
Untuk menetapkan titik henti sementara dan mengeksekusi langkah demi langkah:
- Arahkan kursor ke lingkaran di samping langkah mana pun dalam rekaman. Lingkaran akan berubah menjadi ikon titik henti sementara .
- Klik ikon titik henti sementara dan putar ulang rekaman. Eksekusi dijeda di titik henti sementara.
- Untuk menjalankan eksekusi, klik tombol Execute one step pada panel tindakan di bagian atas panel Perekam.
- Untuk menghentikan replay, klik Batalkan replay.
Edit langkah
Anda dapat mengedit langkah apa pun dalam rekaman dengan mengklik tombol di sebelahnya, baik selama perekaman maupun setelahnya.
Anda juga dapat menambahkan langkah yang tidak ada dan menghapus langkah yang tidak sengaja direkam.
Tambahkan langkah
Terkadang, Anda mungkin perlu menambahkan langkah secara manual. Misalnya, Perekam tidak otomatis merekam peristiwa hover
karena hal ini mengotori rekaman dan tidak semua peristiwa tersebut berguna. Namun, elemen UI seperti menu drop-down hanya dapat muncul di hover
. Anda dapat menambahkan langkah-langkah hover
secara manual ke alur penggunaan yang bergantung pada elemen tersebut.
Untuk menambahkan langkah secara manual:
- Buka halaman demo ini dan mulai perekaman baru.
- Arahkan kursor ke elemen di area pandang. Menu tindakan akan muncul.
- Pilih tindakan dari menu dan akhiri perekaman. Perekam hanya menampilkan peristiwa klik.
- Coba putar ulang rekaman dengan mengklik Putar ulang. Putar ulang gagal setelah waktu tunggu karena Perekam tidak dapat mengakses elemen di menu.
- Klik tombol tiga titik di samping langkah Click dan pilih Add step before.
- Perluas langkah baru. Secara default, jenis file ini adalah
waitForElement
. Klik nilai di sampingtype
lalu pilihhover
. - Berikutnya, tetapkan pemilih yang sesuai untuk langkah baru. Klik Select, lalu klik area pada elemen
Hover over me!
yang berada di luar menu pop-up. Pemilih disetel ke#clickable
. - Coba putar ulang rekaman. Dengan langkah pengarahan kursor yang ditambahkan, Perekam berhasil memutar ulang alur.
Menambahkan pernyataan
Selama perekaman, Anda dapat menegaskan, misalnya, atribut HTML dan properti JavaScript. Untuk menambahkan pernyataan:
- Mulai perekaman, misalnya, di halaman demo ini.
Klik Tambahkan pernyataan.
Perekam membuat langkah
waitForElement
yang dapat dikonfigurasi.Tentukan pemilih untuk langkah ini.
Konfigurasikan langkah tetapi jangan ubah jenis
waitForElement
-nya. Misalnya, Anda dapat menentukan:- Atribut HTML. Klik Tambahkan atribut, lalu ketik nama dan nilai atribut yang digunakan elemen di halaman ini. Misalnya,
data-test: <value>
. - Properti JavaScript. Klik Tambahkan properti, lalu ketik nama dan nilai properti dalam format JSON. Misalnya,
{".innerText":"<text>"}
. - Properti langkah lainnya. Misalnya,
visible: true
.
- Atribut HTML. Klik Tambahkan atribut, lalu ketik nama dan nilai atribut yang digunakan elemen di halaman ini. Misalnya,
Lanjutkan untuk merekam sisa alur pengguna dan kemudian hentikan perekaman.
Klik Putar ulang. Jika pernyataan gagal, Perekam akan menampilkan error setelah waktu tunggu.
Tonton video berikut untuk melihat penerapan alur kerja ini.
Salin langkah
Daripada mengekspor seluruh alur penggunaan, Anda dapat menyalin satu langkah ke papan klip:
- Klik kanan langkah yang ingin Anda salin atau klik ikon tiga titik di sampingnya.
- Di menu drop-down, pilih salah satu opsi Salin sebagai ....
Anda dapat menyalin langkah-langkah dalam berbagai format: JSON, Puppeteer, @puppeteer/replay, dan yang disediakan oleh ekstensi.
Hapus langkah
Untuk menghapus langkah yang tidak sengaja direkam, klik kanan langkah tersebut atau klik ikon tiga titik di sampingnya, lalu pilih Hapus langkah.
Selain itu, Perekam akan otomatis menambahkan dua langkah terpisah ke awal setiap perekaman:
- Setel area tampilan. Memungkinkan Anda mengontrol dimensi area pandang, penskalaan, dan properti lainnya.
- Navigasi. Menyetel URL dan otomatis memuat ulang halaman untuk setiap replay.
Untuk melakukan otomatisasi dalam halaman tanpa memuat ulang halaman, hapus langkah navigasi seperti yang dijelaskan di atas.
Konfigurasi langkah
Untuk mengonfigurasi langkah:
Tentukan jenisnya:
click
,doubleClick
,hover
, (input)change
,keyUp
,keyDown
,scroll
,close
,navigate
(ke halaman),waitForElement
,waitForExpression
, atausetViewport
.Properti lainnya bergantung pada nilai
type
.Tentukan properti wajib di bawah
type
.Klik tombol yang sesuai untuk menambahkan properti khusus jenis opsional dan menentukannya.
Untuk daftar properti yang tersedia, lihat Properti langkah.
Untuk menghapus properti opsional, klik tombol Hapus di sampingnya.
Untuk menambahkan atau menghapus elemen ke atau dari properti array, klik tombol + atau - di samping elemen.
Properti langkah
Setiap langkah dapat memiliki properti opsional berikut:
target
—URL untuk target Chrome DevTools Protocol (CDP), kata kuncimain
default mengacu pada halaman saat ini.assertedEvents
yang saat ini hanya dapat berupa satu peristiwanavigation
Properti umum lain yang tersedia untuk sebagian besar jenis langkah adalah:
frame
—array indeks berbasis nol yang mengidentifikasi iframe yang dapat disusun bertingkat. Misalnya, Anda dapat mengidentifikasi iframe pertama (0) di dalam iframe kedua (1) dari target utama sebagai[1, 0]
.timeout
—jumlah milidetik untuk menunggu sebelum menjalankan langkah. Untuk mengetahui informasi selengkapnya, lihat Menyesuaikan waktu tunggu untuk langkah.selectors
—array pemilih. Untuk mengetahui informasi selengkapnya, lihat Memahami pemilih.
Properti khusus jenis adalah:
Jenis | Properti | Wajib | Deskripsi |
click doubleClick |
offsetX offsetY |
Relatif terhadap kiri atas kotak konten elemen, dalam piksel | |
click doubleClick |
button |
Tombol pointer: utama | tambahan | kedua | kembali | maju | |
change |
value |
Nilai akhir | |
keyDown keyUp |
key |
Nama kunci | |
scroll |
x y |
Posisi scroll x dan y absolut dalam piksel, default 0 | |
navigate |
url |
URL Target | |
waitForElement |
operator |
>= | == (default) | <= | |
waitForElement |
count |
Jumlah elemen yang diidentifikasi oleh pemilih | |
waitForElement |
attributes |
Atribut HTML dan nilainya | |
waitForElement |
properties |
Properti JavaScript dan nilainya di JSON | |
waitForElement |
visible |
Boolean. Benar jika elemen berada di DOM dan terlihat (tidak memiliki display: none atau visibility: hidden ) |
|
waitForElement waitForExpression |
asserted events |
Saat ini, hanya type: navigation , tetapi Anda dapat menentukan judul dan URL |
|
waitForElement waitForExpression |
timeout |
Waktu tunggu maksimum dalam milidetik | |
waitForExpression |
expression |
Ekspresi JavaScript yang di-resolve menjadi true | |
setViewport |
width height |
Lebar dan tinggi area pandang dalam piksel | |
setViewport |
deviceScaleFactor |
Mirip dengan Rasio Piksel Perangkat (DPR), default 1 | |
setViewport |
isMobile hasTouch isLandscape |
Flag Boolean yang menentukan apakah akan: |
Ada dua properti yang menyebabkan jeda replay:
Properti
waitForElement
membuat langkah menunggu ada (atau tidak adanya) sejumlah elemen yang diidentifikasi oleh pemilih. Misalnya, langkah berikut menunggu kurang dari tiga elemen berada di halaman yang cocok dengan pemilih.my-class
."type": "waitForElement", "selectors": [".my-class"], "operator": "<=", "count": 2,
Properti
waitForExpression
membuat langkah menunggu ekspresi JavaScript di-resolve ke true. Misalnya, langkah berikut dijeda selama dua detik dan kemudian di-resolve menjadi true (benar) sehingga replay dapat dilanjutkan."type": "waitForExpression", "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",
Menyesuaikan waktu tunggu untuk langkah
Jika halaman Anda memiliki permintaan jaringan yang lambat atau animasi yang panjang, pemutaran ulang dapat gagal pada langkah yang melebihi waktu tunggu default 5000
milidetik.
Untuk menghindari masalah ini, Anda dapat menyesuaikan waktu tunggu default untuk setiap langkah sekaligus atau menetapkan waktu tunggu terpisah untuk langkah tertentu. Waktu tunggu pada langkah tertentu akan menimpa tindakan default.
Untuk menyesuaikan waktu tunggu default untuk setiap langkah sekaligus:
Klik Replay settings agar kotak Timeout dapat diedit.
Di kotak Timeout, tetapkan nilai waktu tunggu dalam milidetik.
Klik Putar ulang untuk melihat cara kerja waktu tunggu default yang disesuaikan.
Untuk menimpa waktu tunggu default pada langkah tertentu:
Perluas langkah dan klik Tambahkan waktu tunggu.
Klik
timeout: <value>
dan tetapkan nilai dalam milidetik.Klik Putar ulang untuk melihat langkah dengan penerapan waktu tunggu.
Untuk menghapus penimpaan waktu tunggu pada suatu langkah, klik tombol Hapus di sampingnya.
Memahami pemilih
Saat memulai perekaman baru, Anda dapat mengonfigurasi hal berikut:
- Di kotak teks Atribut pemilih, masukkan atribut pengujian kustom. Perekam akan menggunakan atribut ini untuk mendeteksi pemilih, bukan daftar atribut pengujian umum.
Di kumpulan kotak centang Jenis pemilih yang akan direkam, pilih jenis pemilih yang akan dideteksi secara otomatis:
- CSS. Pemilih sintaksis.
- ARIA. Pemilih semantik.
- Teks. Pemilih dengan teks unik terpendek jika tersedia.
- XPath. Pemilih yang menggunakan XML Path Language.
- Bagian. Pemilih yang mirip dengan CSS tetapi dapat menembus shadow DOM.
Pemilih pengujian umum
Untuk halaman web sederhana, atribut id
dan atribut class
CSS sudah cukup bagi Perekam untuk mendeteksi pemilih. Namun, hal tersebut mungkin tidak selalu terjadi karena:
- Halaman Anda mungkin menggunakan kelas atau ID dinamis yang berubah.
- Pemilih Anda mungkin tidak berfungsi karena perubahan kode atau framework.
Misalnya, nilai class
CSS mungkin otomatis dibuat untuk aplikasi yang dikembangkan dengan framework JavaScript modern (misalnya, framework React, Angular, Vue), dan CSS.
Dalam hal ini, Anda dapat menggunakan atribut data-*
untuk membuat pengujian yang lebih tangguh. Sudah ada beberapa pemilih data-*
umum yang digunakan developer untuk otomatisasi. Perekam juga mendukungnya.
Jika Anda telah menentukan pemilih pengujian umum berikut di situs, Perekam akan otomatis mendeteksi dan menggunakannya terlebih dahulu:
data-testid
data-test
data-qa
data-cy
data-test-id
data-qa-id
data-testing
Misalnya, periksa elemen "Cappuccino" pada halaman demo ini dan lihat atribut pengujian:
Rekam klik pada "Cappuccino", luaskan langkah yang sesuai dalam rekaman, dan periksa pemilih yang terdeteksi:
Menyesuaikan pemilih rekaman
Anda dapat menyesuaikan pemilih rekaman jika pemilih pengujian umum tidak cocok untuk Anda.
Misalnya, halaman demo ini menggunakan atribut data-automate
sebagai pemilih. Mulai rekaman baru, lalu masukkan data-automate
sebagai atribut pemilih.
Isi alamat email dan amati nilai pemilih ([data-automate=email-address]
).
Prioritas pemilih
Perekam akan mencari pemilih dalam urutan berikut bergantung pada apakah Anda menentukan atribut pemilih CSS kustom:
- Jika ditentukan:
- Pemilih CSS dengan atribut CSS khusus Anda.
- Pemilih XPath.
- Pemilih ARIA jika ditemukan.
- Pemilih dengan teks unik terpendek jika ditemukan.
- Jika tidak ditentukan:
- Pemilih ARIA jika ditemukan.
- Pemilih CSS dengan prioritas berikut:
- Atribut yang paling umum digunakan untuk pengujian:
data-testid
data-test
data-qa
data-cy
data-test-id
data-qa-id
data-testing
- Atribut ID, misalnya,
<div id="some_ID">
. - Pemilih CSS reguler.
- Atribut yang paling umum digunakan untuk pengujian:
- Pemilih XPath.
- Pemilih Pierce.
- Pemilih dengan teks unik terpendek jika ditemukan.
Mungkin ada beberapa pemilih CSS, XPath, dan Pierce reguler. Perekam akan merekam:
- Pemilih CSS dan XPath reguler di setiap tingkat root, yaitu host bayangan bertingkat, jika ada.
- Menusuk pemilih yang unik di antara semua elemen di dalam semua root bayangan.