Merekam, memutar ulang, dan mengukur alur penggunaan dengan Chrome DevTools

1. Pengantar

Gunakan panel Perekam untuk merekam, memutar ulang, dan mengukur alur penggunaan.

Lihat sekilas panel Perekam (fitur pratinjau) dalam video di bawah ini.

Yang akan Anda pelajari

  • Merekam alur penggunaan
  • Memutar ulang alur penggunaan
  • Mengedit alur penggunaan
  • Mengukur alur penggunaan

Yang akan Anda perlukan

  • Komputer dan Wi-Fi yang berfungsi dengan baik
  • Chrome 101 dan yang lebih baru.

2. Membuka panel Perekam

Buka panel Perekam dengan langkah-langkah berikut

  1. Buka DevTools.
  2. Klik Opsi lainnya > Alat lainnya > Perekam. Perekam di menu Atau, gunakan Menu Perintah untuk membuka panel Perekam. Perintah Tampilkan Perekam di menu Perintah

3. Memulai

Kita akan menggunakan halaman demo pemesanan kopi ini. Checkout adalah alur penggunaan umum di situs belanja.

Di bagian berikutnya, kami akan menjelaskan cara merekam, memutar ulang, dan mengukur alur checkout berikut dengan panel Perekam:

  1. Tambahkan kopi ke keranjang.
  2. Tambahkan kopi lain ke keranjang.
  3. Buka halaman keranjang.
  4. Hapus satu kopi dari keranjang.
  5. Mulai proses checkout.
  6. Isi detail pembayaran.
  7. Checkout.

4. Merekam alur penggunaan

  1. Buka halaman demo. Klik tombol Mulai rekaman baru untuk memulai.
  2. Masukkan "coffee checkout" di kotak teks Nama rekaman. Memulai rekaman baru
  3. Klik tombol Mulai rekaman baru. Perekaman dimulai. Panel menampilkan Merekam ... yang menunjukkan bahwa perekaman sedang berlangsung. perekaman sedang berlangsung
  4. Klik Cappuccino untuk menambahkannya ke keranjang.
  5. Klik Americano untuk menambahkannya ke keranjang. Perhatikan bahwa Perekam akan menampilkan langkah-langkah yang telah Anda lakukan sejauh ini. langkah-langkah di panel Perekam
  6. Buka halaman keranjang.
  7. Hapus Americano dari keranjang.
  8. Klik tombol Total: $19.00 untuk memulai proses checkout.
  9. Dalam formulir detail pembayaran, isi kotak teks Name dan Email, lalu centang kotak I would like to receive order updates and promotional messages. formulir detail pembayaran
  10. Klik tombol Submit untuk menyelesaikan proses checkout.
  11. Di panel Perekam. Klik tombol Akhiri perekaman untuk mengakhiri rekaman.

5. Memutar ulang alur penggunaan

Setelah merekam alur penggunaan, Anda dapat memutar ulang dengan mengklik tombol Putar ulang.

Anda dapat melihat pemutaran ulang alur penggunaan di halaman tersebut. Progres pemutaran ulang juga ditampilkan di panel Perekam.

Anda dapat menyimulasikan koneksi jaringan lambat dengan mengonfigurasi Setelan pemutaran ulang. Misalnya, luaskan Setelan pemutaran ulang, pilih 3G lambat di dropdown Jaringan. setelan pemutaran ulang

Anda juga dapat menyetel waktu tunggu habis yang lebih lama untuk semua langkah.

Setelan lainnya mungkin didukung di masa mendatang. Bagikan kepada kami setelan pemutaran ulang yang Anda inginkan.

6. Mengukur alur penggunaan

Anda dapat mengukur performa alur penggunaan dengan mengklik tombol Ukur performa. Misalnya, checkout adalah alur penggunaan penting pada situs belanja. Dengan panel Perekam, Anda dapat merekam alur checkout sekali dan mengukurnya secara berkala.

Saat tombol Ukur performa diklik, alur penggunaan akan diputar ulang, lalu trace performa akan dibuka di panel Performa.

Pelajari cara menganalisis performa runtime halaman Anda dengan panel Performa. Anda dapat mengaktifkan kotak centang Data Web di panel Performa, untuk melihat metrik Data Web, lalu mengidentifikasi peluang untuk meningkatkan pengalaman penjelajahan pengguna Anda.

Panel performa

7. Mengedit alur penggunaan

Mari kita bahas opsi untuk mengedit alur penggunaan.

Panel Perekam DevTools memiliki menu dropdown di header yang memungkinkan Anda memilih alur penggunaan untuk diedit

Di bagian atas panel Perekam, ada opsi untuk:

  1. Menambahkan rekaman baru. Klik ikon + untuk menambahkan rekaman baru.
  2. Melihat semua rekaman. Menu dropdown akan menampilkan daftar rekaman yang disimpan. Pilih opsi [angka] rekaman untuk meluaskan dan mengelola daftar rekaman yang disimpan. Melihat semua rekaman
  3. Mengekspor rekaman. Anda dapat mengekspor alur penggunaan sebagai skrip Puppeteer untuk menyesuaikan skrip lebih lanjut.
  4. Menghapus rekaman. Hapus rekaman yang dipilih.

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

8. Mengedit langkah

Mari kita bahas opsi untuk mengedit langkah-langkah dalam alur kerja.

Meluaskan langkah

  1. Perluas setiap langkah untuk melihat detail tindakan. Misalnya, perluas langkah Klik Elemen "Cappuccino". Di panel Perekam, elemen Cappuccino telah diperluas untuk menampilkan type, target, selectors, offset X, dan offset Y.
  2. Langkah di atas menunjukkan dua selector (pemilih). Untuk informasi selengkapnya, lihat Prioritas pemilih. Saat memutar ulang alur penggunaan, Perekam akan mencoba mengkueri elemen dengan salah satu pemilih berdasarkan urutan. Misalnya, jika Perekam berhasil mengkueri elemen dengan pemilih pertama, Perekam akan melewati pemilih kedua dan melanjutkan ke langkah berikutnya.
  3. Anda dapat menambahkan atau menghapus pemilih. Misalnya, Anda dapat menghapus selector #2 karena aria/Cappuccino saja sudah cukup dalam kasus ini. Arahkan kursor ke selector #2, lalu klik - untuk menghapusnya. Panel Perekam DevTools menampilkan opsi untuk menghapus pemilih
  4. Selector (pemilih) juga dapat diedit. Misalnya, jika Anda ingin memilih Mocha dan bukan Cappuccino, Anda dapat mengedit nilai pemilih menjadi aria/Mocha. mengedit pemilih Atau, klik tombol Select, lalu klik Mocha di halaman tersebut.
  5. Putar ulang alur sekarang, dan pilih Mocha, bukan Cappuccino.
  6. Coba edit properti langkah lainnya seperti type, target, value, dan lainnya.

Menambahkan dan menghapus langkah

Ada juga opsi untuk menambahkan dan menghapus langkah. Opsi ini berguna jika Anda ingin menambahkan langkah atau menghapus langkah yang tidak sengaja ditambahkan. Anda dapat mengeditnya, tanpa perlu merekam ulang alur penggunaan. Klik menu 3 titik di samping langkah untuk membuka menu.

UI DevTools untuk keranjang kopi, termasuk menu untuk peristiwa Scroll yang diperluas untuk menampilkan tiga opsi: Menambahkan langkah sebelumnya, menambahkan langkah berikutnya, dan menghapus langkah.

  1. Misalnya, peristiwa Scroll setelah langkah Mocha tidak diperlukan. Anda dapat memilih Hapus langkah untuk menghapusnya.
  2. Misalnya, Anda ingin menunggu sampai 9 kopi ditampilkan di halaman sebelum melakukan langkah apa pun.
  3. Di menu langkah Mocha, pilih Tambahkan langkah sebelumnya. Langkah baru bernama Assert Element telah ditambahkan dan sekarang dapat diedit
  4. Di Assert Element, edit langkah baru dengan detail berikut:
    • type: waitForElement
    • selector #1: .cup
    • operator: == (klik tombol tambahkan operator)
    • count: 9 (klik tombol tambahkan jumlah) Langkah baru untuk checkout kopi telah diperbarui dengan detail yang disebutkan di atas.
  5. Putar ulang alur sekarang untuk melihat perubahannya.

9. Selamat!

Selamat. Anda berhasil menyelesaikan codelab ini.

Oh ya, Anda juga dapat menyesuaikan pemilih untuk rekaman. Buka dokumentasi kami untuk mempelajari lebih lanjut.

Apa pendapat Anda tentang codelab ini?

Membosankan. Bagus, saya suka!