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

Sofia Emelianova
Sofia Emelianova

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 được ghi lại, hãy chỉnh sửa luồng người dùng và các bước của luồng, xem Tài liệu tham khảo về các tính năng của Máy ghi âm.

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 > Máy ghi âm.

    Máy ghi âm 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 cà phê vào giỏ hàng.
  2. Thêm một ly cà phê khác vào giỏ hàng.
  3. Chuyển đến trang giỏ hàng.
  4. Bỏ một cà phê ra 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 Start a new recording (Bắt đầu bản ghi 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 Cappcaono để 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 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 các 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 phát lại luồng 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 tính năng 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.

Có thể sau này chúng tôi sẽ hỗ trợ thêm nhiều chế độ cài đặt khác. 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 Recorder (Máy ghi âm), 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 Đo lường hiệu suất sẽ kích hoạt chạy lại luồng người dùng, sau đó mở dấu vết hiệu suất trong bảng Hiệu suất.

Tìm hiểu cách phân tích hiệu suất trong 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 Các chỉ số quan trọng về trang web trong bảng Hiệu suất để xem các chỉ số Chỉ số quan trọng về trang web, xác định các 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 xem qua các tùy chọn cơ bản để chỉnh sửa các bước trong quy trình làm việc đượ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

Hãy mở rộng từng bước để xem thông tin chi tiết về thao tác đó. Ví dụ: mở rộng bước Phần tử nhấp chuột "CappUCno".

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 âm sẽ tìm cách 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ì CappUCno, 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.

    Hoặc bạn có thể nhấp vào nút Select (Chọn) Chọn nút. rồi nhấp vào Mocha trên trang này.

  2. Phát lại quy trình ngay bây giờ, quy trình 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

Cũng có lựa chọn để thêm và xoá các bước. Điều này rất hữu ích nếu bạn muốn thêm một bước bổ sung hoặc xoá một bước vô tình được thêm vào. Thay vì ghi 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 với 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 Scroll (Cuộn) sau bước Mocha là không cần thiết.

  3. Giả sử bạn muốn chờ đến khi xuất hiện 9 loại cà phê trên trang rồi mới 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 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 phần Xác nhận phần tử, hãy chỉnh sửa bước mới với thông tin chi tiết sau:

    • loại: waitForElement
    • bộ chọn số 1: .cup
    • toán tử: == (nhấp vào nút thêm toán tử)
    • số lượng: 9 (nhấp vào nút 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!

Để tìm hiểu thêm về 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 Máy ghi âm, hãy xem tài liệu tham khảo về các tính năng của Máy ghi âm.