Merekam, memutar ulang, dan mengukur alur penggunaan

Sofia Emelianova
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.

Untuk informasi selengkapnya tentang cara membagikan alur penggunaan yang direkam, edit alur tersebut dan langkah-langkahnya, lihat referensi fitur Perekam Suara.

Membuka panel Perekam

  1. Buka DevTools.
  2. Klik Opsi lainnya   Lebih banyak.   > Alat lainnya > Perekam.

    Perekam Suara di menu.

    Atau, gunakan Menu Perintah untuk membuka panel Perekam.

    Perintah Show Recorder di menu Command.

Pengantar

Kita akan menggunakan halaman demo pemesanan kopi ini. {i>Checkout<i} adalah alur pengguna yang umum di antara situs belanja.

Di bagian berikutnya, kami akan memandu Anda terkait cara merekam, memutar ulang, dan mengaudit alur checkout berikut dengan panel Perekam:

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

Merekam alur pengguna

  1. Buka halaman demo ini. Klik tombol Mulai perekaman baru untuk memulai.
  2. Masukkan "kopi checkout" di kotak teks Nama rekaman. Mulai rekaman baru.

Untuk mengetahui informasi selengkapnya, lihat Memahami pemilih. 1. Klik tombol Mulai rekaman baru. Perekaman dimulai. Panel menampilkan Recording... yang menunjukkan bahwa perekaman sedang berlangsung. perekaman sedang berlangsung. 1. Klik Cappuccino untuk menambahkannya ke keranjang. 1. Klik Americano untuk menambahkannya ke keranjang. Perhatikan bahwa Perekam akan menampilkan langkah-langkah yang telah Anda lakukan sejauh ini. Langkah-langkah di panel Perekam. 1. Buka halaman keranjang dan hapus Americano dari keranjang.

1. Klik tombol Total: $19.00 untuk memulai proses checkout. 1. Di formulir detail pembayaran, isi kotak teks Name dan Email, lalu centang kotak Saya ingin menerima update pesanan dan pesan promosi.. Formulir detail pembayaran. 1. Klik tombol Submit untuk menyelesaikan proses checkout. 1. Di panel Perekam, klik tombol Akhiri perekaman. Akhiri perekaman untuk mengakhiri perekaman.

Memutar ulang alur pengguna

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

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

Jika salah mengklik selama perekaman atau sesuatu tidak berfungsi, Anda dapat men-debug alur penggunaan: memperlambat pemutaran ulang, menetapkan titik henti sementara, dan menjalankannya langkah demi langkah.

Simulasikan jaringan lambat

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

Setelan pemutaran ulang.

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

Mengukur alur pengguna

Anda dapat mengukur performa alur penggunaan dengan mengklik tombol Ukur performa. Contohnya, {i>checkout<i} adalah alur pengguna penting dari sebuah {i>website<i} belanja. Dengan panel Perekam, Anda dapat merekam alur checkout sekali dan mengukurnya secara rutin.

Mengklik tombol Ukur performa akan memicu pemutaran ulang alur penggunaan, lalu membuka pelacakan performa 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, mengidentifikasi peluang untuk meningkatkan pengalaman penjelajahan pengguna Anda.

Panel performa.

Edit langkah

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

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

Luaskan langkah

Perluas setiap langkah untuk melihat detail tindakan. Misalnya, luaskan langkah Klik Elemen "Cappuccino".

Di panel perekam, elemen Cappuccino telah diperluas untuk menampilkan tipe, target, pemilih, offset X, dan offset Y.

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 Suara 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 pemilih #2 karena hanya aria/Cappuccino yang cukup dalam kasus ini. Arahkan kursor ke pemilih #2, lalu klik - untuk menghapusnya.

Panel perekam DevTools menampilkan opsi untuk menghapus pemilih.

Edit pemilih dalam satu langkah

Pemilih juga dapat diedit. Misalnya, jika Anda ingin memilih Mocha, dan bukan Cappuccino, Anda dapat:

  1. Edit nilai pemilih menjadi aria/Mocha.

    Edit pemilih.

    Atau, klik tombol SelectTombol pilih., lalu klik Mocha di halaman tersebut.

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

  3. Coba edit properti langkah lainnya seperti type, target, value, dan lainnya.

Menambahkan dan menghapus langkah

Terdapat juga opsi untuk menambahkan dan menghapus langkah. Hal ini berguna jika Anda ingin menambahkan langkah atau menghapus langkah yang tidak sengaja ditambahkan. Daripada merekam ulang alur penggunaan, Anda cukup mengeditnya:

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

    Menu drop-down langkah dengan opsi untuk menghapus dan menambahkan langkah sebelum atau sesudahnya.

  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. Langkah baru bernama Assert Element telah ditambahkan dan sekarang dapat diedit.

  4. Di Assert Element, edit langkah baru dengan detail berikut:

    • jenis: waitForElement
    • pemilih #1: .cup
    • operator: == (klik tombol tambahkan operator)
    • jumlah: 9 (klik tombol tambahkan jumlah) Langkah baru untuk checkout kopi telah diperbarui dengan detail yang disebutkan di atas.
  5. Putar ulang.Putar ulang alurnya sekarang untuk melihat perubahan.

Langkah berikutnya

Selamat, Anda telah menyelesaikan tutorial!

Untuk mempelajari fitur dan alur kerja lainnya (misalnya, mengimpor dan mengekspor) yang terkait dengan Perekam, lihat referensi fitur Perekam Suara.