Merekam, memutar ulang, dan mengukur alur penggunaan

Jecelyn Yeen

Sofia Emelianova

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

Selesaikan tutorial ini untuk mempelajari cara menggunakan panel Perekam untuk merekam, memutar ulang, dan mengukur alur penggunaan.

Catatan: Ini adalah fitur pratinjau di Chrome 97. Tim kami secara aktif berupaya meningkatkan kualitas fitur ini dan kami menantikan masukan Anda untuk peningkatan lebih lanjut.

Untuk mengetahui informasi selengkapnya tentang cara membagikan alur penggunaan yang direkam, mengeditnya, dan langkah-langkahnya, lihat Referensi fitur Perekam.

Catatan: Fitur ini hanya tersedia di Chrome, bukan Chromium.

Membuka panel Perekam

1. Buka DevTools.

2. Klik Opsi lainnya     > Alat lainnya > Perekam.

   

   Atau, gunakan Menu Perintah untuk membuka panel Perekam.

   

Pengantar

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 mengaudit 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. Lihat.

Merekam alur penggunaan

1. Buka halaman demo ini. Klik tombol Mulai rekaman baru untuk memulai.
2. Masukkan "coffee checkout" di kotak teks Nama rekaman.
   Catatan: Kotak teks Atribut pemilih dan kotak centang Jenis pemilih untuk direkam bersifat opsional. Untuk tutorial ini, biarkan setelan default apa adanya. Untuk informasi selengkapnya, lihat Memahami pemilih.
3. Klik tombol Mulai rekaman baru. Perekaman dimulai. Panel menampilkan Merekam... yang menunjukkan bahwa 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.
6. Buka halaman keranjang dan hapus Americano dari keranjang.
   Catatan: Jika mau, Anda dapat menghapus Americano di halaman menu dengan mengarahkan kursor ke tombol Total dan mengklik - di samping Americano di menu pop-up. Namun, Anda harus menambahkan langkah pengarahan kursor secara manual setelah menyelesaikan perekaman karena Perekam tidak otomatis merekam peristiwa pengarahan kursor.
7. Klik tombol Total: $19.00 untuk memulai proses checkout.
8. Dalam formulir detail pembayaran, isi kotak teks Name dan Email, lalu centang kotak I would like to receive order updates and promotional messages.
9. Klik tombol Submit untuk menyelesaikan proses checkout.
   Catatan: Anda dapat mengedit langkah dan menambahkan pernyataan secara manual bahkan sebelum Anda mengakhiri perekaman.
10. Di panel Perekam, klik tombol Akhiri perekaman untuk mengakhiri perekaman.

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.

Jika Anda melakukan kesalahan klik selama perekaman atau ada yang tidak berfungsi, Anda dapat men-debug alur penggunaan: memperlambat pemutarannya, menetapkan titik henti sementara, dan menjalankannya langkah demi langkah.

Poin penting: Saat memutar ulang rekaman alur penggunaan, Perekam akan menunggu hingga elemen terlihat atau dapat diklik di area pandang atau mencoba men-scroll elemen secara otomatis ke area pandang sebelum memutar ulang langkah yang sesuai.

Menyimulasikan jaringan lambat

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

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

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.

Mengedit langkah

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

Untuk daftar lengkap opsi pengeditan, lihat Langkah-langkah pengeditan di referensi fitur.

Luaskan langkah

Luaskan setiap langkah untuk melihat detail tindakan. Misalnya, perluas langkah Klik Elemen "Cappuccino".

Langkah di atas menunjukkan dua pemilih. Untuk mengetahui informasi selengkapnya, lihat Memahami pemilih rekaman.

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.

Menambahkan dan menghapus pemilih dari langkah

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.

Mengedit pemilih dalam satu langkah

Selector (pemilih) juga dapat diedit. Misalnya, jika Anda ingin memilih Mocha, bukan Cappuccino, Anda dapat:

1. Edit nilai pemilih menjadi aria/Mocha.

   

   Atau, klik tombol Select, lalu klik Mocha di halaman tersebut.

2. Putar ulang alur sekarang, dan pilih Mocha, bukan Cappuccino.

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

1. Klik kanan langkah yang ingin Anda edit atau klik ikon tiga titik di sampingnya.

   

2. Anda dapat memilih Hapus langkah untuk menghapusnya. Misalnya, peristiwa Scroll setelah langkah Mocha tidak diperlukan.

3. Misalnya, Anda ingin menunggu sampai 9 kopi ditampilkan di halaman sebelum melakukan langkah apa pun. Di menu langkah Mocha, pilih Tambahkan langkah sebelumnya.

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)

5. Putar ulang alur sekarang untuk melihat perubahannya.

Langkah berikutnya

Selamat, Anda telah menyelesaikan tutorial ini.

Untuk mempelajari lebih lanjut fitur dan alur kerja (misalnya, impor dan ekspor) yang terkait dengan Perekam, lihat Referensi fitur Perekam.