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 menjelajahi Perekam Suara 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.

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:

  1. Menambahkan rekaman baruTambahkan.. Klik ikon + untuk menambahkan rekaman baru.
  2. Melihat semua rekamanLuaskan konten lainnya.. Drop-down akan menampilkan daftar rekaman yang tersimpan. Pilih opsi [angka] 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.

Bagikan alur pengguna

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

Mengekspor alur penggunaan

Untuk mengekspor alur pengguna:

  1. Buka alur pengguna yang ingin diekspor.
  2. Klik Download file. Ekspor di bagian atas panel Perekam. Opsi format 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.
    • Boneka (termasuk analisis Mercusuar). 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 boneka. Putar ulang skrip dengan Puppeteer. Karena langkah-langkah dikonversi ke JavaScript, Anda dapat memiliki penyesuaian yang lebih halus, misalnya mengulang langkah. Satu peringatan, Anda tidak dapat mengimpor skrip ini kembali ke Perekam.

  • Boneka (termasuk analisis Mercusuar). Opsi ekspor ini sama dengan yang 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.

Ekspor dalam format kustom dengan menginstal ekstensi

Lihat Ekstensi Perekam Suara.

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 penggunaan yang direkam.
  3. Klik tombol Putar ulang.Replay untuk menjalankan alur penggunaan 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.

Mengubah alur penggunaan JSON menjadi skrip kustom:

  • Cypress Chrome Recorder. 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 Perekam Chrome. 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 pengguna 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.

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 Main lagi.Putar ulang.
  2. Pilih salah satu opsi kecepatan putar 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 sudut kanan atas daftar langkah. Tombol Show code.
  3. Perekam menampilkan tampilan langkah-langkah dan kodenya secara berdampingan. Tampilan 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.

    Menu drop-down format.

    Format 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 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 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 di titik henti sementara. Jeda eksekusi.
  3. Untuk melakukan eksekusi, klik tombol Jalankan satu langkah. Execute one step pada panel tindakan di bagian atas panel Perekam.
  4. Untuk menghentikan replay, klik Tunggu sebentar. Batalkan replay.

Mengedit langkah

Anda dapat mengedit langkah mana 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.

Tambahkan langkah

Terkadang, Anda mungkin perlu menambahkan langkah-langkah secara manual. Misalnya, Perekam tidak secara otomatis merekam peristiwa hover karena 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 rekaman. Perekam hanya merekam peristiwa klik. Mengklik tindakan dan mengakhiri perekaman.
  4. Coba putar ulang rekaman dengan mengklik Main lagi. Putar ulang. Pemutaran ulang gagal setelah waktu tunggu habis karena Perekam tidak dapat mengakses elemen di menu. Putar ulang 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, kolom ini memiliki jenis waitForElement. Klik nilai di samping type, lalu pilih hover. Memilih pengarahan kursor.
  7. Selanjutnya, setel 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 Add Assertion.

    Tombol Tambahkan pernyataan.

    Perekam membuat langkah waitForElement yang dapat dikonfigurasi.

  3. Tentukan pemilih untuk langkah ini.

  4. Konfigurasi 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 alur penggunaan lainnya, lalu hentikan perekaman.

  6. Klik Putar ulang. Putar ulang. Jika pernyataan gagal, Recorder akan menampilkan error setelah waktu tunggu.

Tonton video berikut untuk melihat cara kerja alur kerja ini.

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

Pilih 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 dicatat, klik kanan langkah tersebut atau klik ikon tiga titik Menu tiga titik. di sampingnya dan 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.

  • Tetapkan area tampilan. 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.

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 khusus 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 saat ini 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) target utama sebagai [1, 0].
  • timeout—jumlah milidetik untuk menunggu sebelum mengeksekusi langkah. Untuk mengetahui informasi selengkapnya, lihat Menyesuaikan waktu tunggu untuk langkah-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 kursor: primer | bantu | detik | 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 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 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 adanya (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 ke true (benar) yang memungkinkan replay 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 Replay settings agar kotak Timeout dapat diedit.

      Setelan putar ulang.

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

    3. Klik Putar ulang.Putar ulang untuk melihat cara kerja 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 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 khusus. 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 memadai 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 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 "Cappuccino" di halaman demo ini lalu lihat atribut pengujian:

    Pemilih pengujian yang telah ditentukan.

    Rekam klik pada "Cappuccino", luaskan 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 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 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.