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 penggunaan panel Perekam, lihat Merekam, memutar ulang, dan mengukur alur penggunaan.

Mempelajari dan menyesuaikan pintasan

Gunakan pintasan untuk menavigasi Perekam Suara dengan 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.

Mengedit 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:

  1. Menambahkan rekaman baruTambahkan.. Klik ikon + untuk menambahkan rekaman baru.
  2. Lihat semua rekamanLuaskan.. 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. Mengekspor 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.

Membagikan alur penggunaan

Anda dapat mengekspor dan mengimpor alur penggunaan di Perekam. Hal ini berguna untuk pelaporan bug karena Anda dapat membagikan catatan yang tepat tentang langkah-langkah yang mereproduksi bug. Anda juga dapat mengekspor dan memutarnya dengan library eksternal.

Mengekspor alur penggunaan

Untuk mengekspor alur penggunaan:

  1. Buka alur penggunaan 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.
    • Puppeteer. 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 Ekspor ekstensi Perekam.

  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 diekspor sebagai skrip @puppeteer/replay, langkah-langkahnya 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.

  • Puppeteer (termasuk analisis Lighthouse). Opsi ekspor ini sama dengan opsi sebelumnya, tetapi menyertakan kode yang menghasilkan 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 ImporUpload file. di bagian atas panel Perekam. Impor rekaman.
  2. Pilih file JSON dengan alur penggunaan yang direkam.
  3. Klik tombol Putar ulang.Putar ulang untuk menjalankan alur penggunaan yang diimpor.

Memutar ulang dengan library eksternal

Puppeteer Replay adalah library open source yang dikelola oleh tim Chrome DevTools. Library ini dibuat 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.

Mengubah alur penggunaan JSON menjadi skrip kustom:

  • Cypress Chrome Recorder. Anda dapat menggunakannya untuk mengonversi file JSON alur penggunaan menjadi skrip pengujian Cypress. Tonton demo ini untuk melihat cara kerjanya.
  • Nightwatch Chrome Recorder. 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 penggunaan

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

Untuk membantu Anda men-debug, panel Perekam memungkinkan Anda memperlambat pemutaran ulang, menyetel titik henti sementara, melangkahi eksekusi, dan memeriksa kode dalam berbagai format secara paralel dengan langkah-langkah.

Memperlambat pemutaran ulang

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 pemutaran ulang:
    • Normal (Default)
    • Lambat
    • Sangat lambat
    • Sangat lambat

Putar ulang lambat.

Memeriksa kode

Untuk memeriksa kode alur penggunaan dalam berbagai format:

  1. Buka rekaman di panel Perekam.
  2. Klik Tampilkan kode di pojok kanan atas daftar langkah. Tombol Tampilkan kode.
  3. Perekam menampilkan tampilan langkah-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 menjalankan langkah demi langkah:

  1. Arahkan kursor ke lingkaran Langkah. di samping langkah apa 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 di titik henti sementara. Jeda eksekusi.
  3. Untuk menjalankan langkah demi langkah, klik tombol Menjalankan satu langkah. Jalankan satu langkah di panel tindakan di bagian atas panel Perekam.
  4. Untuk menghentikan pemutaran ulang, klik Tunggu sebentar. Batalkan pemutaran ulang.

Mengedit 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 direkam secara tidak sengaja.

Menambahkan langkah

Terkadang, Anda mungkin perlu menambahkan 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 perekaman baru. Mulai perekaman untuk merekam peristiwa pengarahan kursor.
  2. Arahkan kursor ke elemen di area tampilan. Menu tindakan akan muncul. Mengarahkan kursor ke elemen.
  3. Pilih tindakan dari menu dan akhiri perekaman. Perekam hanya merekam peristiwa klik. Mengklik tindakan dan mengakhiri perekaman.
  4. Coba putar ulang rekaman dengan mengklik Putar ulang. Putar ulang. Pemutaran ulang gagal setelah waktu tunggu habis karena Perekam tidak dapat mengakses elemen di menu. Replay gagal.
  5. Klik tombol tiga titik Tombol tiga titik. di samping langkah Klik, lalu 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 pengarahan 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 lagi. 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, 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 alur penggunaan lainnya, lalu hentikan perekaman.

  6. Klik Putar ulang. 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 disalin 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.

Menghapus 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 pemutaran ulang.

Untuk melakukan otomatisasi dalam halaman tanpa memuat ulang halaman, hapus langkah navigasi seperti yang dijelaskan di atas.

Mengonfigurasi 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 mengetahui 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 informasi selengkapnya, lihat Memahami pemilih.

Properti spesifik per 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 x dan y scroll 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 maksimum untuk menunggu dalam milidetik
waitForExpression expression Sudah. Ekspresi JavaScript yang me-resolve ke true
setViewport width
height		 Sudah. Lebar dan tinggi area pandang dalam piksel
setViewport deviceScaleFactor Sudah. Serupa dengan Rasio Piksel Perangkat (DPR), default 1
setViewport isMobile
hasTouch
isLandscape		 Sudah. Flag Boolean yang menentukan apakah akan:
  • Pertimbangkan tag meta
  • Mendukung peristiwa sentuh
  • Menampilkan dalam mode lanskap
    		•

    Ada dua properti yang membuat replay dijeda:

    • Properti waitForElement membuat langkah menunggu kehadiran (atau ketidakhadiran) sejumlah elemen yang diidentifikasi oleh pemilih. Misalnya, langkah berikut menunggu kurang dari tiga elemen 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 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 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 Putar ulang.Putar ulang untuk melihat langkah dengan waktu tunggu yang sedang berjalan.

    Untuk menghapus penggantian waktu tunggu di 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 Jenis pemilih untuk direkam, 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 class atau ID dinamis yang berubah.
    • Pemilih Anda dapat 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 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 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", luaskan langkah yang sesuai dalam rekaman, dan periksa pemilih yang terdeteksi:

    Mendeteksi pemilih pengujian umum.

    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.

    Menyesuaikan 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 reguler.
      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.