Referensi fitur

Sofia Emelianova

Jecelyn Yeen

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 Tampilkan pintasan di sudut kanan atas.

Untuk menyesuaikan pintasan Perekam:

1. Buka Setelan > Pintasan.
2. Scroll ke bawah ke bagian Perekam.
3. Ikuti langkah-langkah di Menyesuaikan pintasan.

Mengedit alur penggunaan

Di bagian atas panel Perekam, ada opsi untuk:

1. Menambahkan rekaman baru. Klik ikon + untuk menambahkan rekaman baru.
2. Melihat semua rekaman. Drop-down akan menampilkan daftar rekaman yang disimpan. Pilih opsi [jumlah] rekaman untuk meluaskan dan mengelola daftar rekaman yang disimpan.

3. 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.
   • [Puppeteer](/docs/puppeteer/.
   • Puppeteer (termasuk analisis Lighthouse).

   Untuk informasi selengkapnya tentang format, lihat Mengekspor alur penggunaan.

4. Mengimpor rekaman. Hanya dalam format JSON.

5. 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:

1. Buka alur pengguna yang ingin Anda ekspor.
2. Klik Ekspor di bagian atas panel Perekam.
3. 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.
4. 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:

1. Klik tombol Import di bagian atas panel Recorder.
2. Pilih file JSON dengan alur penggunaan yang direkam.
3. 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.

Poin penting: Kasus penggunaan lanjutan: Integrasikan dengan library Puppeteer Replay Mirip dengan library pihak ketiga di atas, Anda juga dapat membuat library sendiri di atas Puppeteer Replay. Library Puppeteer Replay menyediakan cara bagi Anda untuk menyesuaikan cara perekaman dijalankan dan "membuat string" file JSON alur penggunaan, yaitu, mengonversinya ke file lain.

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:

1. Buka menu drop-down Putar ulang.
2. Pilih salah satu opsi kecepatan replay:
   • Normal (Default)
   • Pelan
   • Sangat lambat
   • Amat sangat lambat

Poin penting: Anda dapat menggunakan opsi replay lambat ini hanya di Perekam. Untuk menambahkan waktu tunggu ke rekaman itu sendiri, lihat Menyesuaikan waktu tunggu untuk langkah.

Memeriksa kode

Untuk memeriksa kode alur pengguna dalam berbagai format:

1. Buka rekaman di panel Perekam.
2. Klik Tampilkan kode di sudut kanan atas daftar langkah.
3. Perekam akan menunjukkan tampilan langkah-langkah dan kodenya secara berdampingan.
4. Saat Anda mengarahkan kursor ke sebuah langkah, Perekam akan menandai kodenya masing-masing dalam format apa pun, termasuk yang disediakan oleh ekstensi.

5. 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.

6. 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:

1. Arahkan kursor ke lingkaran di samping langkah mana pun dalam rekaman. Lingkaran akan berubah menjadi ikon titik henti sementara .
2. Klik ikon titik henti sementara dan putar ulang rekaman. Eksekusi dijeda di titik henti sementara.
3. Untuk menjalankan eksekusi, klik tombol Execute one step pada panel tindakan di bagian atas panel Perekam.
4. 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:

1. Buka halaman demo ini dan mulai perekaman baru.
2. Arahkan kursor ke elemen di area pandang. Menu tindakan akan muncul.
3. Pilih tindakan dari menu dan akhiri perekaman. Perekam hanya menampilkan peristiwa klik.
4. Coba putar ulang rekaman dengan mengklik Putar ulang. Putar ulang gagal setelah waktu tunggu karena Perekam tidak dapat mengakses elemen di menu.
5. Klik tombol tiga titik di samping langkah Click dan pilih Add step before.
6. Perluas langkah baru. Secara default, jenis file ini adalah waitForElement. Klik nilai di samping type lalu pilih hover.
7. 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.
8. 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:

1. Mulai perekaman, misalnya, di halaman demo ini.

2. Klik Tambahkan pernyataan.

   

   Perekam membuat langkah waitForElement yang dapat dikonfigurasi.

3. Tentukan pemilih untuk langkah ini.

4. 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.

5. Lanjutkan untuk merekam sisa alur pengguna dan kemudian hentikan perekaman.

6. 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:

1. Klik kanan langkah yang ingin Anda salin atau klik ikon tiga titik di sampingnya.
2. 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:

1. Tentukan jenisnya: click, doubleClick, hover, (input) change, keyUp, keyDown, scroll, close, navigate (ke halaman), waitForElement, waitForExpression, atau setViewport.

   Properti lainnya bergantung pada nilai type.

2. Tentukan properti wajib di bawah type.

   

3. 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 kunci main default mengacu pada halaman saat ini.
• assertedEvents yang saat ini hanya dapat berupa satu peristiwa navigation

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: Pertimbangkan tag meta Mendukung peristiwa sentuh Tampilkan dalam mode lanskap

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:

1. Klik Replay settings agar kotak Timeout dapat diedit.

   

2. Di kotak Timeout, tetapkan nilai waktu tunggu dalam milidetik.

3. Klik Putar ulang untuk melihat cara kerja waktu tunggu default yang disesuaikan.

Untuk menimpa waktu tunggu default pada langkah tertentu:

1. Perluas langkah dan klik Tambahkan waktu tunggu.

   

2. Klik timeout: <value> dan tetapkan nilai dalam milidetik.

   

3. 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.

Catatan: Untuk mengetahui informasi selengkapnya, lihat Pemilih sintaksis vs. semantik dan Prioritas pemilih.

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:
  1. Pemilih CSS dengan atribut CSS khusus Anda.
  2. Pemilih XPath.
  3. Pemilih ARIA jika ditemukan.
  4. Pemilih dengan teks unik terpendek jika ditemukan.
• Jika tidak ditentukan:
  1. Pemilih ARIA jika ditemukan.
  2. Pemilih CSS dengan prioritas berikut:
     1. Atribut yang paling umum digunakan untuk pengujian:
        • data-testid
        • data-test
        • data-qa
        • data-cy
        • data-test-id
        • data-qa-id
        • data-testing
     2. Atribut ID, misalnya, <div id="some_ID">.
     3. Pemilih CSS reguler.
  3. Pemilih XPath.
  4. Pemilih Pierce.
  5. 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.