Referensi fitur

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Temukan cara membagikan alur penggunaan, mengeditnya, dan langkah-langkahnya dalam referensi fitur komprehensif panel Perekam Chrome DevTools.

Untuk mempelajari dasar-dasar cara menggunakan panel Perekam, lihat Merekam, memutar ulang, dan mengukur alur penggunaan.

Mempelajari dan menyesuaikan pintasan

Gunakan pintasan untuk membuka Perekam lebih cepat. Untuk daftar pintasan default, lihat Pintasan keyboard panel Perekam.

Untuk membuka petunjuk yang mencantumkan semua pintasan langsung di Perekam, klik Tampilkan pintasan di sudut kanan atas.

Tombol Tampilkan pintasan.

Untuk menyesuaikan pintasan Perekam Suara:

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

Edit alur penggunaan

Panel Perekam DevTools memiliki menu drop-down di header yang memungkinkan Anda memilih alur penggunaan untuk diedit.

Di bagian atas panel Perekam, ada opsi untuk Anda:

  1. Menambahkan rekaman baruTambahkan.. Klik ikon + untuk menambahkan rekaman baru.
  2. Melihat semua rekamanLuaskan konten lainnya.. Menu drop-down akan menampilkan daftar rekaman yang disimpan. Pilih opsi N rekaman untuk meluaskan dan mengelola daftar rekaman yang disimpan. Melihat semua rekaman.

  3. Ekspor rekamanDownload file.. Untuk menyesuaikan skrip lebih lanjut atau membagikannya untuk tujuan pelaporan bug, Anda dapat mengekspor alur penggunaan dalam salah satu format berikut:

    Untuk mengetahui informasi selengkapnya tentang format, lihat Mengekspor alur penggunaan.

  4. Impor rekamanUpload file.. Hanya dalam format JSON.

  5. Menghapus rekamanHapus.. Hapus rekaman yang dipilih.

Anda juga dapat mengedit nama rekaman dengan mengklik tombol edit Edit. di sampingnya.

Bagikan alur pengguna

Anda dapat mengekspor dan mengimpor alur penggunaan di Perekam Suara. Hal ini berguna untuk pelaporan bug karena Anda dapat membagikan data yang tepat dari 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 diekspor.

  2. Klik Ekspor di bagian atas panel Perekam.

    Daftar opsi format di menu Ekspor.

  3. Pilih salah satu format berikut dari menu drop-down:

    • File JSON. Download rekaman sebagai file JSON.
    • @puppeteer/replay. Download rekaman sebagai skrip Puppeteer Replay.
    • Boneka. Download rekaman sebagai skrip Puppeteer.
    • Puppeteer (untuk Firefox). Download rekaman sebagai skrip Puppeteer untuk Firefox.
    • 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-langkah tetap berupa objek JSON. Opsi ini sangat cocok jika Anda ingin berintegrasi dengan pipeline CI/CD, tetapi tetap memiliki fleksibilitas untuk mengedit langkah-langkah sebagai JSON, lalu mengonversi dan mengimpornya kembali ke Perekam.
  • Skrip Puppeteer. Putar ulang skrip dengan Puppeteer. Karena langkah-langkah dikonversi menjadi JavaScript, Anda dapat memiliki penyesuaian yang lebih terperinci, misalnya, membuat loop langkah-langkah. Satu peringatan, Anda tidak dapat mengimpor skrip ini kembali ke Perekam.
  • Puppeteer (untuk Firefox). Sebagai bagian dari dukungan WebDriver BiDi, Anda dapat menjalankan skrip Puppeteer ini di Chrome dan Firefox.

  • Boneka (termasuk analisis Mercusuar). Opsi ekspor ini sama dengan opsi sebelumnya, tetapi opsi ini mencakup kode yang membuat analisis Lighthouse.

    Jalankan skrip dan lihat output dalam file flow.report.html:

    # npm i puppeteer lighthouse
node your_export.js

    Laporan Lighthouse dibuka di Chrome.

Mengekspor dalam format kustom dengan menginstal ekstensi

Lihat Ekstensi perekam.

Mengimpor alur penggunaan

Untuk mengimpor alur penggunaan:

  1. Klik tombol ImportUpload file. di bagian atas panel Recorder. Impor rekaman.
  2. Pilih file JSON dengan alur pengguna yang direkam.
  3. Klik tombol Putar ulang.Replay untuk menjalankan alur pengguna yang diimpor.

Gunakan kembali library eksternal

Puppeteer Replay adalah library open source yang dikelola oleh tim Chrome DevTools. Bangunan ini dibangun di atas Puppeteer. Ini adalah alat command line, Anda dapat memutar ulang file JSON dengan alat ini.

Selain itu, Anda dapat mengubah dan memutar ulang file JSON dengan library pihak ketiga berikut.

Transformasi alur pengguna JSON ke skrip kustom:

  • Perekam Chrome Cypress. Anda dapat menggunakannya untuk mengonversi file JSON alur penggunaan ke skrip pengujian Cypress. Tonton demo ini untuk melihat cara kerjanya.
  • Perekam Chrome Nightwatch. Anda dapat menggunakannya untuk mengonversi file JSON alur penggunaan menjadi skrip pengujian Nightwatch.
  • CodeceptJS Chrome Recorder. Anda dapat menggunakannya untuk mengonversi file JSON alur penggunaan menjadi skrip pengujian CodeceptJS.

Memutar ulang alur penggunaan JSON:

Men-debug alur pengguna

Seperti kode lainnya, terkadang Anda harus men-debug alur penggunaan yang direkam.

Untuk membantu Anda melakukan debug, panel Recorder memungkinkan Anda memperlambat replay, menyetel titik henti sementara, melakukan eksekusi, dan memeriksa kode dalam berbagai format secara paralel dengan langkah-langkah.

Perlambat replay

Secara default, Perekam memutar ulang alur penggunaan secepat mungkin. Untuk memahami apa yang terjadi dalam rekaman, Anda dapat memperlambat kecepatan pemutaran ulang:

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

Putar ulang lambat.

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. Tombol Tampilkan kode.
  3. Perekam menunjukkan tampilan langkah dan kodenya secara berdampingan. Tampilan langkah-langkah dan kodenya secara berdampingan.
  4. Saat Anda mengarahkan kursor ke langkah, Perekam akan menandai kodenya dalam format apa pun, termasuk yang disediakan oleh ekstensi.

  5. Luaskan menu drop-down format untuk memilih format yang Anda gunakan untuk mengekspor alur penggunaan.

    Daftar drop-down format.

    Format ini dapat berupa salah satu dari tiga format default (JSON, @puppeteer/replay, Puppeteer script, atau format yang disediakan oleh ekstensi.

  6. Lanjutkan untuk men-debug rekaman dengan mengedit parameter dan nilai langkah. Tampilan kode tidak dapat diedit, tetapi akan diperbarui sesuai saat Anda membuat perubahan pada langkah-langkah di sebelah kiri.

Menetapkan titik henti sementara dan menjalankan langkah demi langkah

Untuk menetapkan titik henti sementara dan mengeksekusi langkah demi langkah:

  1. Arahkan kursor ke lingkaran Langkah. di samping langkah mana pun dalam rekaman. Lingkaran berubah menjadi ikon titik henti sementara Titik henti sementara..
  2. Klik ikon titik henti sementara Titik henti sementara. dan putar ulang rekaman. Eksekusi dijeda pada titik henti sementara. Jeda eksekusi.
  3. Untuk melakukan langkah demi langkah eksekusi, klik tombol Jalankan satu langkah. Jalankan satu langkah di panel tindakan di bagian atas panel Perekam.
  4. Untuk menghentikan replay, klik Tunggu sebentar. Batalkan replay.

Edit langkah

Anda dapat mengedit langkah apa pun dalam rekaman dengan mengklik tombol Luaskan. di sampingnya, baik selama perekaman maupun setelahnya.

Anda juga dapat menambahkan langkah yang tidak ada dan menghapus langkah yang tidak sengaja dicatat.

Menambahkan langkah

Terkadang, Anda mungkin perlu menambahkan langkah-langkah secara manual. Misalnya, Perekam tidak otomatis merekam peristiwa hover karena hal ini akan mengotori rekaman dan tidak semua peristiwa tersebut berguna. Namun, elemen UI seperti menu drop-down hanya dapat muncul di hover. Anda dapat menambahkan langkah hover secara manual ke alur penggunaan yang bergantung pada elemen tersebut.

Untuk menambahkan langkah secara manual:

  1. Buka halaman demo ini dan mulai rekaman baru. Mulai perekaman untuk merekam peristiwa pengarahan kursor.
  2. Arahkan kursor ke elemen di area pandang. Menu tindakan akan muncul. Mengarahkan kursor ke elemen.
  3. Pilih tindakan dari menu dan akhiri rekaman. Perekam hanya merekam peristiwa klik. Mengklik tindakan dan mengakhiri rekaman.
  4. Coba putar ulang rekaman dengan mengklik Putar ulang. Putar ulang. Replay gagal setelah waktu tunggu karena Recorder tidak dapat mengakses elemen di menu. Replay gagal.
  5. Klik tombol tiga titik Tombol tiga titik. di samping langkah Klik dan pilih Tambahkan langkah sebelumnya. Menambahkan langkah sebelum Klik.
  6. Luaskan langkah baru. Secara default, jenisnya adalah waitForElement. Klik nilai di samping type, lalu pilih hover. Memilih arahkan kursor.
  7. Selanjutnya, tetapkan pemilih yang sesuai untuk langkah baru. Klik Pilih. Select, lalu klik area pada elemen Hover over me! yang berada di luar menu pop-up. Pemilih disetel ke #clickable. Menetapkan pemilih.
  8. Coba putar ulang rekaman. Dengan langkah pengarahan kursor yang ditambahkan, Perekam berhasil memutar ulang alur. Replay berhasil.

Menambahkan pernyataan

Selama perekaman, Anda dapat menyatakan, misalnya, atribut HTML dan properti JavaScript. Untuk menambahkan pernyataan:

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

  2. Klik Tambahkan pernyataan.

    Tombol 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 dan ketik nama dan nilai atribut yang digunakan elemen dalam 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 Main lagi. Putar ulang. Jika pernyataan gagal, Perekam akan menampilkan error setelah waktu tunggu habis.

Tonton video berikut untuk melihat cara kerja alur kerja ini.

Menyalin 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 Menu tiga titik. di sampingnya.
  2. Di menu drop-down, pilih salah satu opsi Salin sebagai ....

Memilih opsi salin dari menu drop-down.

Anda dapat menyalin 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 Menu tiga titik. di sampingnya, lalu pilih Hapus langkah.

Menghapus langkah.

Selain itu, Perekam Suara akan otomatis menambahkan dua langkah terpisah ke awal setiap rekaman:

Rekaman dengan langkah-langkah navigasi dan area pandang yang ditetapkan.

  • Setel area pandang. Memungkinkan Anda mengontrol dimensi, penskalaan, dan properti lainnya dari area pandang.
  • Navigasi. Menetapkan 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 yang diperlukan di bawah type.

    Konfigurasikan langkah.

  3. Klik tombol yang sesuai untuk menambahkan properti spesifik per jenis opsional dan menentukannya.

Untuk daftar properti yang tersedia, lihat Properti langkah.

Untuk menghapus properti opsional, klik tombol Hapus. 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 merujuk ke halaman saat ini.
  • assertedEvents yang hanya dapat berupa satu peristiwa navigation.

Properti umum lainnya 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		 Sudah. Relatif terhadap kiri atas kotak konten elemen, dalam piksel
click
doubleClick		 button Tombol pointer: utama | tambahan | kedua | kembali | maju
change value Sudah. Nilai akhir
keyDown
keyUp		 key Sudah. Nama kunci
scroll x
y		 Posisi scroll x dan y absolut dalam piksel, default 0
navigate url Sudah. 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 dalam 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 Sudah. Ekspresi JavaScript yang di-resolve ke true
setViewport width
height		 Sudah. Lebar dan tinggi area pandang dalam piksel
setViewport deviceScaleFactor Sudah. Mirip dengan Rasio Piksel Perangkat (DPR), default 1
setViewport isMobile
hasTouch
isLandscape		 Sudah. Flag Boolean yang menentukan apakah akan:
  • Pertimbangkan tag meta
  • Mendukung peristiwa sentuh
  • Tampilkan dalam mode lanskap
    		•

    Ada dua properti yang membuat replay dijeda:

    • Properti waitForElement membuat langkah menunggu adanya (atau ketidakhadiran) 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 benar. Misalnya, langkah berikut dijeda selama dua detik, lalu di-resolve menjadi true 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 lambat atau animasi yang panjang, pemutaran ulang dapat gagal pada langkah-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 menimpa nilai default.

    Untuk menyesuaikan waktu tunggu default untuk setiap langkah sekaligus:

    1. Klik Setelan replay agar kotak Waktu tunggu dapat diedit.

      Setelan pemutaran ulang.

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

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

    Untuk menimpa waktu tunggu default pada langkah tertentu:

    1. Luaskan langkah, lalu klik Tambahkan waktu tunggu.

      Tambahkan waktu tunggu.

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

      Tetapkan nilai waktu tunggu.

    3. Klik Main lagi.Putar ulang untuk melihat langkah dengan cara kerja waktu tunggu.

    Untuk menghapus waktu tunggu yang ditimpa pada satu langkah, klik tombol HapusHapus. di sampingnya.

    Memahami pemilih

    Saat memulai perekaman baru, Anda dapat mengonfigurasi hal berikut:

    Mengonfigurasi rekaman baru.

    • 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 Selector types to record, pilih jenis pemilih yang akan dideteksi secara otomatis:

      • Kotak centang. CSS. Pemilih sintaksis.
      • Kotak centang. ARIA. Pemilih semantik.
      • Kotak centang. Teks. Pemilih dengan teks unik terpendek jika tersedia.
      • Kotak centang. XPath. Pemilih yang menggunakan XML Path Language.
      • Kotak centang. Pierce. Pemilih yang mirip dengan pemilih 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 ini mungkin tidak selalu terjadi karena:

    • Halaman web Anda mungkin menggunakan kelas atau ID dinamis yang berubah.
    • Pemilih Anda mungkin rusak karena perubahan kode atau framework.

    Misalnya, nilai class CSS mungkin dibuat secara otomatis untuk aplikasi yang dikembangkan dengan framework JavaScript modern (misalnya, React, Angular, Vue) dan framework CSS.

    Class CSS yang dibuat secara otomatis dengan nama acak.

    Dalam kasus 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 memiliki pemilih pengujian umum berikut yang ditentukan 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" di halaman demo ini dan lihat atribut pengujian:

    Pemilih pengujian yang ditentukan.

    Rekam klik pada "Cappuccino", perluas langkah yang sesuai dalam rekaman, dan periksa pemilih yang terdeteksi:

    Pemilih pengujian umum terdeteksi.

    Menyesuaikan pemilih rekaman

    Anda dapat menyesuaikan pemilih rekaman jika pemilih pengujian umum tidak berfungsi untuk Anda.

    Misalnya, halaman demo ini menggunakan atribut data-automate sebagai pemilih. Mulai rekaman baru dan masukkan data-automate sebagai atribut pemilih.

    Sesuaikan pemilih rekaman.

    Isi alamat email dan amati nilai pemilih ([data-automate=email-address]).

    Hasil pemilihan pemilih kustom.

    Prioritas pemilih

    Perekam mencari pemilih dalam urutan berikut, bergantung pada apakah Anda menentukan atribut pemilih CSS kustom:

    • Jika ditentukan:
      1. Pemilih CSS dengan atribut CSS kustom 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 paling umum yang 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 biasa.
      3. Pemilih XPath.
      4. Pemilih pierce.
      5. Pemilih dengan teks unik terpendek jika ditemukan.

    Dapat ada beberapa pemilih CSS, XPath, dan Pierce reguler. Perekam Suara merekam:

    • Pemilih CSS dan XPath reguler di setiap tingkat root, yaitu host bayangan bertingkat, jika ada.
    • Pemilih Pierce yang unik di antara semua elemen dalam semua root bayangan.