Ghi lại, phát lại và đo lường luồng người dùng

Hãy xem video bên dưới để biết thông tin tổng quan về bảng điều khiển Recorder (Trình ghi) mới (tính năng xem trước).

Hãy hoàn thành hướng dẫn này để tìm hiểu cách sử dụng bảng điều khiển Trình ghi để ghi lại, phát lại và đo lường luồng người dùng.

Để biết thêm thông tin về cách chia sẻ luồng người dùng đã ghi lại, hãy chỉnh sửa luồng và các bước của luồng đó, hãy xem Tài liệu tham khảo về tính năng của Trình ghi.

Mở bảng điều khiển Máy ghi âm

  1. Mở Công cụ cho nhà phát triển.
  2. Nhấp vào Tuỳ chọn khác   Thêm.   > Công cụ khác > Trình ghi.

    Trình ghi trong trình đơn.

    Ngoài ra, bạn có thể sử dụng Command Menu (Trình đơn lệnh) để mở bảng điều khiển Recorder (Máy ghi âm).

    Hiện lệnh Trình ghi trong trình đơn Lệnh.

Giới thiệu

Chúng ta sẽ sử dụng trang minh hoạ đặt cà phê này. Quy trình thanh toán là một luồng người dùng phổ biến trên các trang web mua sắm.

Trong các phần tiếp theo, chúng tôi sẽ hướng dẫn bạn cách ghi lại, phát lại và kiểm tra quy trình thanh toán sau đây bằng bảng điều khiển Recorder (Trình ghi):

  1. Thêm một ly cà phê vào giỏ hàng.
  2. Thêm một loại cà phê khác vào giỏ hàng.
  3. Chuyển đến trang giỏ hàng.
  4. Xoá một ly cà phê khỏi giỏ hàng.
  5. Bắt đầu quy trình thanh toán.
  6. Điền thông tin thanh toán.
  7. Xem xét.

Ghi lại luồng người dùng

  1. Mở trang minh hoạ này. Nhấp vào nút Start new recording (Bắt đầu ghi mới) để bắt đầu.
  2. Nhập "coffee checkout" vào hộp văn bản Tên bản ghi. Bắt đầu bản ghi mới.
  3. Nhấp vào nút Bắt đầu ghi âm mới. Quá trình ghi đã bắt đầu. Bảng điều khiển hiển thị Đang ghi... cho biết quá trình ghi đang diễn ra. đang ghi.
  4. Nhấp vào Cappuccino để thêm vào giỏ hàng.
  5. Nhấp vào Americano để thêm vào giỏ hàng. Lưu ý rằng Trình ghi cho thấy các bước bạn đã thực hiện cho đến thời điểm này. Các bước trong bảng điều khiển của ứng dụng Máy ghi âm.
  6. Chuyển đến trang giỏ hàng và xoá Americano khỏi giỏ hàng.
  7. Nhấp vào nút Tổng cộng: 19.000 VND để bắt đầu quy trình thanh toán.
  8. Trong biểu mẫu thông tin thanh toán, hãy điền vào hộp văn bản TênEmail, rồi đánh dấu vào hộp đánh dấu Tôi muốn nhận thông tin cập nhật về đơn đặt hàng và thông báo khuyến mãi. Biểu mẫu thông tin thanh toán.
  9. Nhấp vào nút Gửi để hoàn tất quy trình thanh toán.
  10. Trong bảng điều khiển Recorder (Trình ghi), hãy nhấp vào nút Kết thúc quá trình ghi. End recording (Kết thúc ghi) để kết thúc quá trình ghi.

Phát lại luồng người dùng

Sau khi ghi lại luồng người dùng, bạn có thể phát lại luồng đó bằng cách nhấp vào nút Phát lại.Phát lại.

Bạn có thể xem bản phát lại quy trình của người dùng trên trang này. Tiến trình phát lại cũng xuất hiện trong bảng điều khiển Recorder (Trình ghi).

Nếu nhấp nhầm trong khi quay video hoặc có gì đó không hoạt động, bạn có thể gỡ lỗi luồng người dùng: làm chậm quá trình phát lại, đặt điểm ngắt và thực thi từng bước.

Mô phỏng mạng chậm

Bạn có thể mô phỏng kết nối mạng chậm bằng cách định cấu hình Chế độ cài đặt phát lại. Ví dụ: mở rộng phần Cài đặt phát lại, chọn 3G chậm trong trình đơn thả xuống Mạng.

Chế độ cài đặt phát lại.

Chúng tôi có thể hỗ trợ thêm các chế độ cài đặt khác trong tương lai. Chia sẻ với chúng tôi những chế độ cài đặt phát lại mà bạn muốn có!

Đo lường luồng người dùng

Bạn có thể đo lường hiệu suất của một luồng người dùng bằng cách nhấp vào nút Đo lường hiệu suất. Ví dụ: quy trình thanh toán là một luồng người dùng quan trọng của trang web mua sắm. Với bảng điều khiển Trình ghi, bạn có thể ghi lại quy trình thanh toán một lần và đo lường quy trình này thường xuyên.

Trước tiên, việc nhấp vào nút Measure performance (Đo lường hiệu suất) sẽ kích hoạt tính năng phát lại luồng người dùng, sau đó mở dấu vết hiệu suất trong bảng điều khiển Performance (Hiệu suất).

Tìm hiểu cách phân tích hiệu suất thời gian chạy của trang bằng bảng điều khiển Hiệu suất. Bạn có thể bật hộp đánh dấu Web Vitals trong bảng điều khiển Hiệu suất để xem các chỉ số Web Vitals, xác định cơ hội cải thiện trải nghiệm duyệt web của người dùng.

Bảng điều khiển hiệu suất.

Chỉnh sửa bước

Hãy cùng tìm hiểu các tuỳ chọn cơ bản để chỉnh sửa các bước trong quy trình làm việc đã ghi lại.

Để xem danh sách đầy đủ các tuỳ chọn chỉnh sửa, hãy xem phần Chỉnh sửa các bước trong tài liệu tham khảo về tính năng.

Mở rộng các bước

Mở rộng từng bước để xem thông tin chi tiết về hành động. Ví dụ: mở rộng bước Nhấp vào phần tử "Cappuccino".

Trong bảng điều khiển của trình ghi, phần tử Cappuccino đã được mở rộng để hiển thị loại, mục tiêu, bộ chọn, độ dời X và độ dời Y.

Bước trên cho thấy hai bộ chọn. Để biết thêm thông tin, hãy xem phần Tìm hiểu bộ chọn của bản ghi.

Khi phát lại luồng người dùng, Trình ghi sẽ cố gắng truy vấn phần tử bằng một trong các bộ chọn theo trình tự. Ví dụ: nếu Trình ghi truy vấn thành công phần tử bằng bộ chọn đầu tiên, thì trình ghi sẽ bỏ qua bộ chọn thứ hai và chuyển sang bước tiếp theo.

Thêm và xoá bộ chọn khỏi một bước

Bạn có thể thêm hoặc xoá bất kỳ bộ chọn nào. Ví dụ: bạn có thể xoá bộ chọn #2 vì chỉ cần aria/Cappuccino là đủ trong trường hợp này. Di chuột qua bộ chọn #2 rồi nhấp vào biểu tượng - để xoá bộ chọn đó.

Bảng điều khiển trình ghi DevTools hiển thị một tuỳ chọn để xoá bộ chọn.

Chỉnh sửa bộ chọn trong một bước

Bạn cũng có thể chỉnh sửa bộ chọn. Ví dụ: nếu muốn chọn Mocha thay vì Cappuccino, bạn có thể:

  1. Thay vào đó, hãy chỉnh sửa giá trị bộ chọn thành aria/Mocha.

    Chỉnh sửa bộ chọn.

    Ngoài ra, bạn có thể nhấp vào nút ChọnChọn nút., sau đó nhấp vào Mocha trên trang.

  2. Phát lại quy trình hiện tại, quy trình này sẽ chọn Mocha thay vì Cappuccino.

  3. Hãy thử chỉnh sửa các thuộc tính bước khác như type (loại), target (mục tiêu), value (giá trị) và các thuộc tính khác.

Thêm và xoá bước

Bạn cũng có thể thêm và xoá các bước. Điều này sẽ hữu ích nếu bạn muốn thêm một bước hoặc xoá một bước đã vô tình thêm. Thay vì ghi lại lại luồng người dùng, bạn chỉ cần chỉnh sửa luồng đó:

  1. Nhấp chuột phải vào bước bạn muốn chỉnh sửa hoặc nhấp vào biểu tượng dấu ba chấm Trình đơn có biểu tượng ba dấu chấm. bên cạnh bước đó.

    Trình đơn thả xuống của một bước có các lựa chọn để xoá và thêm bước trước hoặc sau.

  2. Bạn có thể chọn Xoá bước để xoá bước đó. Ví dụ: sự kiện Cuộn sau bước Mocha là không cần thiết.

  3. Giả sử bạn muốn chờ đến khi 9 ly cà phê xuất hiện trên trang trước khi thực hiện bất kỳ bước nào. Trong trình đơn bước Mocha, hãy chọn Thêm bước vào trước. Một bước mới có tên Xác nhận phần tử đã được thêm và hiện có thể chỉnh sửa.

  4. Trong Assert Element (Xác nhận phần tử), hãy chỉnh sửa bước mới bằng các thông tin sau:

    • loại: waitForElement
    • bộ chọn #1: .cup
    • toán tử: == (nhấp vào nút thêm toán tử)
    • count: 9 (nhấp vào nút add count (thêm số lượng)) Bước mới để thanh toán cà phê đã được cập nhật với các thông tin nêu trên.
  5. Phát lại.Phát lại quy trình ngay để xem các thay đổi.

Các bước tiếp theo

Xin chúc mừng! Bạn đã hoàn tất hướng dẫn này!

Để khám phá thêm các tính năng và quy trình công việc (ví dụ: nhập và xuất) liên quan đến Trình ghi, hãy xem Tài liệu tham khảo về tính năng của Trình ghi.