Tài liệu tham khảo về tính năng

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Khám phá cách chia sẻ luồng người dùng, chỉnh sửa luồng và các bước trong tài liệu tham khảo về các tính năng toàn diện này của bảng điều khiển Trình ghi cho Công cụ của Chrome cho nhà phát triển.

Để tìm hiểu thông tin cơ bản về cách thao tác với bảng điều khiển Recorder (Ghi lại), hãy xem bài viết Ghi lại, phát lại và đo lường luồng người dùng.

Tìm hiểu và tuỳ chỉnh phím tắt

Sử dụng phím tắt để điều hướng Máy ghi âm nhanh hơn. Để biết danh sách các phím tắt mặc định, hãy xem bài viết Phím tắt trên bảng điều khiển của Máy ghi âm.

Để mở gợi ý liệt kê tất cả phím tắt ngay trong Máy ghi âm, hãy nhấp vào Hiện phím tắt. Hiển thị phím tắt ở góc trên cùng bên phải.

Nút Hiển thị phím tắt.

Cách tuỳ chỉnh phím tắt của Máy ghi âm:

  1. Mở Cài đặt. Cài đặt > Lối tắt.
  2. Cuộn xuống phần Máy ghi âm.
  3. Làm theo các bước trong phần Tuỳ chỉnh phím tắt.

Chỉnh sửa luồng người dùng

Bảng điều khiển Trình ghi của công cụ cho nhà phát triển có một trình đơn thả xuống trong tiêu đề cho phép bạn chọn một luồng người dùng để chỉnh sửa.

Ở đầu bảng điều khiển Recorder (Máy ghi âm), có các tuỳ chọn để bạn:

  1. Thêm bản ghi âm mớiThêm.. Nhấp vào biểu tượng dấu + để thêm bản ghi mới.
  2. Xem tất cả bản ghiMở rộng thêm.. Trình đơn thả xuống sẽ hiển thị danh sách các bản ghi âm đã lưu. Chọn [số] bản ghi âm để mở rộng và quản lý danh sách bản ghi âm đã lưu. Xem tất cả bản ghi.

  3. Xuất một bản ghi âmTải tệp xuống.. Để tuỳ chỉnh thêm tập lệnh hoặc chia sẻ tập lệnh cho mục đích báo cáo lỗi, bạn có thể xuất luồng người dùng ở một trong các định dạng sau:

    Để biết thêm thông tin về các định dạng, hãy xem phần Xuất luồng người dùng.

  4. Nhập một bản ghi âmTải tệp lên.. Chỉ ở định dạng JSON.

  5. Xoá bản ghi âmXóa.. Xoá bản ghi âm đã chọn.

Bạn cũng có thể chỉnh sửa tên bản ghi âm bằng cách nhấp vào nút chỉnh sửa Chỉnh sửa danh sách phát. bên cạnh tên bản ghi âm đó.

Chia sẻ luồng người dùng

Bạn có thể xuất và nhập luồng người dùng trong ứng dụng Máy ghi âm. Việc này rất hữu ích khi báo cáo lỗi vì bạn có thể chia sẻ bản ghi chính xác về các bước tái hiện lỗi. Bạn cũng có thể xuất và phát lại với các thư viện bên ngoài.

Xuất luồng người dùng

Để xuất một luồng người dùng, hãy làm như sau:

  1. Mở luồng người dùng mà bạn muốn xuất.
  2. Nhấp vào Tải tệp xuống. Export (Xuất) ở đầu bảng điều khiển Recorder (Máy ghi âm). Tuỳ chọn định dạng xuất.
  3. Chọn một trong các định dạng sau từ danh sách thả xuống:
    • Tệp JSON. Tải bản ghi xuống dưới dạng tệp JSON.
    • @puppeteer/phát lại. Tải bản ghi xuống dưới dạng tập lệnh Puppeteer Replay.
    • Con rối. Tải bản ghi xuống dưới dạng tập lệnh Puppeteer.
    • Puppeteer (bao gồm cả phân tích Lighthouse). Tải bản ghi xuống dưới dạng tập lệnh Puppeteer kèm theo bản phân tích Lighthouse được nhúng.
    • Một hoặc nhiều lựa chọn do Tiện ích xuất của Máy ghi âm cung cấp.
  4. Lưu tệp.

Bạn có thể làm như sau với từng lựa chọn xuất mặc định:

  • JSON. Chỉnh sửa đối tượng JSON mà con người có thể đọc được và import tệp JSON trở lại Recorder (Trình ghi).
  • @puppeteer/phát lại. Phát lại kịch bản thông qua thư viện Puppeteer Replay (Phát lại kịch bản). Khi xuất dưới dạng tập lệnh @puppeteer/replay, các bước này vẫn là đối tượng JSON. Đây là phương án rất phù hợp nếu bạn muốn tích hợp với quy trình CI/CD nhưng vẫn có thể linh hoạt chỉnh sửa các bước dưới dạng JSON, sau đó chuyển đổi và nhập lại vào Máy ghi âm.
  • Kịch bản của Puppeteer. Phát lại kịch bản bằng Puppeteer. Vì các bước này được chuyển đổi thành JavaScript nên bạn có thể tuỳ chỉnh chi tiết hơn, chẳng hạn như lặp lại các bước. Xin lưu ý rằng bạn không thể nhập tập lệnh này trở lại Máy ghi âm.

  • Puppeteer (bao gồm cả phân tích Lighthouse). Tùy chọn xuất này giống với tùy chọn trước nhưng bao gồm mã tạo ra một bản phân tích Lighthouse.

    Chạy tập lệnh và xem kết quả trong tệp flow.report.html:

    # npm i puppeteer lighthouse
node your_export.js

    Báo cáo Lighthouse đã mở trong Chrome.

Xuất ở định dạng tuỳ chỉnh bằng cách cài đặt tiện ích

Xem Tiện ích Máy ghi âm.

Nhập một luồng người dùng

Để nhập luồng người dùng, hãy làm như sau:

  1. Nhấp vào nút ImportTải tệp lên. (Nhập) ở đầu bảng điều khiển Recorder (Máy ghi âm). Nhập bản ghi.
  2. Chọn tệp JSON có luồng người dùng đã ghi lại.
  3. Nhấp vào nút Phát lại.Phát lại để chạy luồng người dùng đã nhập.

Phát lại với các thư viện bên ngoài

Puppeteer Replay là thư viện nguồn mở được duy trì bởi nhóm Công cụ của Chrome cho nhà phát triển. Ứng dụng này được xây dựng dựa trên Puppeteer. Đây là một công cụ dòng lệnh, bạn có thể phát lại các tệp JSON bằng công cụ này.

Ngoài ra, bạn có thể biến đổi và phát lại các tệp JSON bằng các thư viện bên thứ ba sau đây.

Chuyển đổi luồng người dùng JSON thành tập lệnh tuỳ chỉnh:

  • Trình ghi Cypress Chrome. Bạn có thể sử dụng tệp này để chuyển đổi tệp JSON về luồng người dùng thành tập lệnh kiểm thử Cypress. Xem bản minh hoạ này để tìm hiểu cách hoạt động.
  • Trình ghi của Chrome cho đồng hồ đêm. Bạn có thể sử dụng tệp này để chuyển đổi tệp JSON về luồng người dùng thành tập lệnh kiểm thử Nightwatch.
  • Trình ghi của Chrome CodeceptJS. Bạn có thể sử dụng tệp này để chuyển đổi tệp JSON về luồng người dùng thành tập lệnh kiểm thử CodeceptJS.

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

Gỡ lỗi luồng người dùng

Giống như bất kỳ mã nào, đôi khi bạn phải gỡ lỗi các luồng người dùng đã ghi lại.

Để giúp bạn gỡ lỗi, bảng điều khiển Recorder (Ghi lại) cho phép bạn giảm tốc độ phát lại, đặt điểm ngắt, thực thi từng bước và kiểm tra mã ở nhiều định dạng song song với các bước.

Giảm tốc độ phát lại

Theo mặc định, Trình ghi phát lại quy trình của người dùng nhanh nhất có thể. Để hiểu những gì xảy ra trong bản ghi, bạn có thể giảm tốc độ phát lại:

  1. Mở trình đơn thả xuống Phát lại.Phát lại.
  2. Chọn một trong các tuỳ chọn tốc độ phát lại:
    • Bình thường (Mặc định)
    • Chậm
    • Rất chậm
    • Cực kỳ chậm

Phát lại chậm.

Kiểm tra mã

Để kiểm tra mã của luồng người dùng ở nhiều định dạng, hãy làm như sau:

  1. Mở một bản ghi âm trong bảng điều khiển Máy ghi âm.
  2. Nhấp vào Show code (Hiện mã) ở góc trên cùng bên phải của danh sách các bước. Nút Hiện mã.
  3. Máy ghi âm trình bày các bước và mã của các bước theo cạnh nhau. Hình ảnh so sánh các bước và mã của các bước đó.
  4. Khi bạn di chuột qua một bước, Máy ghi âm sẽ đánh dấu mã tương ứng ở bất kỳ định dạng nào, kể cả các mã do phần mở rộng cung cấp.

  5. Mở rộng danh sách định dạng thả xuống để chọn định dạng mà bạn dùng để xuất luồng người dùng.

    Danh sách định dạng thả xuống.

    Đây có thể là một trong ba định dạng mặc định (JSON, @puppeteer/replay, Tập lệnh Puppeteer hoặc một định dạng do tiện ích cung cấp).

  6. Tiếp tục gỡ lỗi bản ghi bằng cách chỉnh sửa các thông số và giá trị của bước. Bạn không thể chỉnh sửa chế độ xem mã, nhưng chế độ này sẽ cập nhật tương ứng khi bạn thực hiện thay đổi đối với các bước ở bên trái.

Đặt điểm ngắt và thực thi từng bước

Cách đặt một điểm ngắt và thực thi từng bước:

  1. Di chuột qua vòng tròn Bước. bên cạnh bước bất kỳ trong bản ghi âm. Vòng tròn sẽ chuyển thành một biểu tượng điểm ngắt Điểm ngắt..
  2. Nhấp vào biểu tượng điểm ngắt Điểm ngắt. rồi phát lại bản ghi. Quá trình thực thi sẽ tạm dừng tại điểm ngắt.Tạm dừng thực thi.
  3. Để thực hiện từng bước, hãy nhấp vào nút Thực hiện một bước. Thực thi một bước trên thanh hành động ở đầu bảng điều khiển Recorder (Trình ghi).
  4. Để dừng phát lại, hãy nhấp vào Tạm dừng. Huỷ phát lại.

Chỉnh sửa các bước

Bạn có thể chỉnh sửa bất kỳ bước nào trong bản ghi bằng cách nhấp vào nút Mở rộng. bên cạnh bước đó, cả trong và sau khi quay video.

Bạn cũng có thể thêm các bước bị thiếu và xoá những bước vô tình được ghi lại.

Thêm các bước

Đôi khi, bạn có thể cần phải thêm các bước theo cách thủ công. Ví dụ: Máy ghi âm không tự động ghi lại các sự kiện hover vì việc này gây ô nhiễm cho quá trình ghi và không phải tất cả các sự kiện như vậy đều hữu ích. Tuy nhiên, các phần tử trên giao diện người dùng (chẳng hạn như trình đơn thả xuống) chỉ có thể xuất hiện trên hover. Bạn có thể thêm các bước hover theo cách thủ công vào quy trình của người dùng phụ thuộc vào các phần tử đó.

Cách thêm một bước theo cách thủ công:

  1. Mở trang minh hoạ này rồi bắt đầu bản ghi mới. Bắt đầu ghi để ghi lại sự kiện di chuột.
  2. Di chuột qua phần tử trong khung nhìn. Một trình đơn thao tác sẽ bật lên. Di chuột qua phần tử đó.
  3. Chọn một hành động trong trình đơn rồi kết thúc quá trình ghi. Trình ghi chỉ ghi lại sự kiện nhấp chuột. Nhấp vào một thao tác và kết thúc bản ghi.
  4. Thử phát lại bản ghi bằng cách nhấp vào Phát lại. Phát lại. Quá trình phát lại không thành công sau khi hết thời gian chờ vì Trình ghi âm không thể truy cập vào phần tử này trong trình đơn.Không phát lại được.
  5. Nhấp vào nút có biểu tượng ba dấu chấm Nút dấu 3 chấm. bên cạnh bước Nhấp vào, rồi chọn Thêm bước trước. Thêm một bước trước khi Nhấp.
  6. Mở rộng bước mới. Theo mặc định, mã này có loại waitForElement. Nhấp vào giá trị bên cạnh type rồi chọn hover. Chọn di chuột.
  7. Tiếp theo, hãy đặt bộ chọn thích hợp cho bước mới. Nhấp vào Chọn mục. Chọn, sau đó nhấp vào một vùng trên phần tử Hover over me! nằm ngoài trình đơn bật lên. Bộ chọn được đặt thành #clickable. Cài đặt bộ chọn.
  8. Thử phát lại bản ghi. Sau khi thêm bước di chuột, Recorder (Ghi âm) sẽ phát lại thành công quy trình này.Phát lại thành công.

Thêm câu nhận định

Ví dụ: trong quá trình ghi lại, bạn có thể xác nhận các thuộc tính HTML và thuộc tính JavaScript. Cách thêm câu nhận định:

  1. Bắt đầu ghi lại, chẳng hạn như trên trang minh hoạ này.

  2. Nhấp vào Thêm câu nhận định.

    Nút Thêm câu nhận định.

    Máy ghi âm tạo một bước waitForElement có thể định cấu hình.

  3. Chỉ định bộ chọn cho bước này.

  4. Định cấu hình bước này nhưng không thay đổi loại waitForElement của bước này. Ví dụ: bạn có thể chỉ định:

    • Thuộc tính HTML. Nhấp vào Thêm thuộc tính rồi nhập tên và giá trị của thuộc tính mà các phần tử trên trang này sử dụng. Ví dụ: data-test: <value>.
    • Thuộc tính JavaScript. Nhấp vào Thêm cơ sở lưu trú rồi nhập tên và giá trị của cơ sở lưu trú ở định dạng JSON. Ví dụ: {".innerText":"<text>"}.
    • Các thuộc tính bước khác. Ví dụ: visible: true.

  5. Tiếp tục ghi phần còn lại của quy trình người dùng, sau đó dừng ghi.

  6. Nhấp vào Phát lại. Phát lại. Nếu câu nhận định không thành công, Recorder (Ghi lại) sẽ hiển thị lỗi sau khi hết giờ.

Hãy xem video sau đây để xem quy trình làm việc này trong thực tế.

Sao chép các bước

Thay vì xuất toàn bộ luồng người dùng, bạn có thể sao chép một bước duy nhất vào bảng nhớ tạm:

  1. Nhấp chuột phải vào bước bạn muốn sao chép hoặc nhấp vào biểu tượng ba dấu chấm Trình đơn có biểu tượng ba dấu chấm. bên cạnh bước đó.
  2. Trong trình đơn thả xuống, hãy chọn một trong các lựa chọn Sao chép dưới dạng ....

Chọn tuỳ chọn sao chép trong trình đơn thả xuống.

Bạn có thể sao chép các bước ở nhiều định dạng: JSON, Puppeteer, @puppeteer/replay và những định dạng do các tiện ích cung cấp.

Xoá các bước

Để xoá một bước vô tình được ghi lại, hãy nhấp chuột phải vào bước đó hoặc nhấp vào biểu tượng ba dấu chấm Trình đơn có biểu tượng ba dấu chấm. bên cạnh bước đó rồi chọn Xoá bước.

Hãy xoá một bước.

Ngoài ra, Máy ghi âm tự động thêm hai bước riêng biệt để bắt đầu mỗi bản ghi:

Một bản ghi có khung nhìn đã đặt và các bước điều hướng.

  • Thiết lập khung nhìn. Cho phép bạn kiểm soát kích thước, tỷ lệ và các thuộc tính khác của khung nhìn.
  • Điều hướng. Đặt URL và tự động làm mới trang cho mỗi lần phát lại.

Để tự động hoá trong trang mà không cần tải lại trang, hãy xoá bước điều hướng như mô tả ở trên.

Thiết lập các bước

Cách định cấu hình một bước:

  1. Chỉ định kiểu dữ liệu: click, doubleClick, hover, (dữ liệu đầu vào) change, keyUp, keyDown, scroll, close, navigate (vào một trang), waitForElement, waitForExpression hoặc setViewport.

    Các thuộc tính khác phụ thuộc vào giá trị type.

  2. Hãy chỉ định các thuộc tính bắt buộc bên dưới type.

    Thiết lập một bước.

  3. Nhấp vào các nút tương ứng để thêm các thuộc tính không bắt buộc theo kiểu cụ thể và chỉ định các thuộc tính đó.

Để biết danh sách các thuộc tính hiện có, hãy xem bài viết Thuộc tính bước.

Để xóa một thuộc tính không bắt buộc, hãy nhấp vào nút Xóa. Xóa bên cạnh thuộc tính đó.

Để thêm hoặc xoá một phần tử khỏi hoặc khỏi một thuộc tính mảng, hãy nhấp vào nút + hoặc - bên cạnh phần tử đó.

Thuộc tính bước

Mỗi bước có thể có các thuộc tính không bắt buộc sau:

Các thuộc tính phổ biến khác có sẵn cho hầu hết các loại bước là:

  • frame – một mảng các chỉ mục dựa trên 0 giúp xác định một iframe có thể lồng ghép. Ví dụ: bạn có thể xác định iframe đầu tiên (0) bên trong iframe thứ hai (1) của mục tiêu chính dưới dạng [1, 0].
  • timeout – số mili giây để chờ trước khi thực thi một bước. Để biết thêm thông tin, hãy xem bài viết Điều chỉnh thời gian chờ cho các bước.
  • selectors – một mảng bộ chọn. Để biết thêm thông tin, hãy xem phần Tìm hiểu về bộ chọn.

Các thuộc tính theo loại cụ thể là:

Loại Tài sản Bắt buộc Nội dung mô tả
click
doubleClick		 offsetX
offsetY		 Séc. So với phía trên cùng bên trái của hộp nội dung thành phần, tính bằng pixel
click
doubleClick		 button Nút con trỏ: chính | phụ | thứ hai | quay lại | tiến
change value Séc. Giá trị cuối cùng
keyDown
keyUp		 key Séc. Tên khoá
scroll x
y		 Vị trí cuộn x và y tuyệt đối tính bằng pixel, mặc định là 0
navigate url Séc. URL mục tiêu
waitForElement operator >= | == (mặc định) | <=
waitForElement count Số phần tử được xác định bằng bộ chọn
waitForElement attributes Thuộc tính HTML và giá trị của thuộc tính này
waitForElement properties Thuộc tính JavaScript và giá trị của thuộc tính này trong JSON
waitForElement visible Boolean. Đúng nếu phần tử nằm trong DOM và hiển thị (không có display: none hoặc visibility: hidden)
waitForElement
waitForExpression		 asserted events Hiện tại, chỉ có type: navigation nhưng bạn có thể chỉ định tiêu đề và URL
waitForElement
waitForExpression		 timeout Thời gian chờ tối đa tính bằng mili giây
waitForExpression expression Séc. Biểu thức JavaScript phân giải thành true
setViewport width
height		 Séc. Chiều rộng và chiều cao của khung nhìn tính bằng pixel
setViewport deviceScaleFactor Séc. Tương tự với Tỷ lệ pixel của thiết bị (DPR), mặc định là 1
setViewport isMobile
hasTouch
isLandscape		 Séc. Cờ boolean chỉ định liệu:
  • Xem xét thẻ meta
  • Hỗ trợ sự kiện chạm
  • Hiển thị ở chế độ ngang
    		•

    Có 2 thuộc tính khiến quá trình phát lại tạm dừng:

    • Thuộc tính waitForElement khiến bước này chờ sự hiện diện (hoặc không có) của một số phần tử được xác định bằng bộ chọn. Ví dụ: bước sau đây chờ ít hơn 3 phần tử xuất hiện trên trang khớp với bộ chọn .my-class.

        "type": "waitForElement",
  "selectors": [".my-class"],
  "operator": "<=",
  "count": 2,

    • Thuộc tính waitForExpression khiến bước này chờ biểu thức JavaScript phân giải thành true. Ví dụ: bước sau đây tạm dừng trong 2 giây rồi chuyển thành true để tiếp tục phát lại.

        "type": "waitForExpression",
  "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",

    Điều chỉnh thời gian chờ cho các bước

    Trong trường hợp trang của bạn có các yêu cầu mạng chậm hoặc ảnh động dài, thì quá trình phát lại có thể không thành công ở các bước vượt quá thời gian chờ mặc định (5000 mili giây).

    Để tránh sự cố này, bạn có thể điều chỉnh thời gian chờ mặc định cho từng bước cùng một lúc hoặc đặt thời gian chờ riêng cho các bước cụ thể. Thời gian chờ của các bước cụ thể sẽ ghi đè thời gian chờ mặc định.

    Cách điều chỉnh thời gian chờ mặc định cho từng bước cùng một lúc:

    1. Nhấp vào Cài đặt phát lại để chỉnh sửa hộp Thời gian chờ.

      Cài đặt phát lại.

    2. Trong hộp Thời gian chờ, đặt giá trị thời gian chờ bằng mili giây.

    3. Hãy nhấp vào Phát lại.Phát lại để xem thời gian chờ mặc định được điều chỉnh trong thực tế.

    Cách ghi đè thời gian chờ mặc định cho một bước cụ thể:

    1. Mở rộng bước này rồi nhấp vào Thêm thời gian chờ.

      Thêm thời gian chờ.

    2. Nhấp vào timeout: <value> và đặt giá trị theo mili giây.

      Đặt giá trị thời gian chờ.

    3. Nhấp vào Phát lại.Phát lại để xem bước áp dụng thời gian chờ.

    Để loại bỏ phần ghi đè thời gian chờ trên một bước, hãy nhấp vào nút XoáXóa. bên cạnh bước đó.

    Tìm hiểu về bộ chọn

    Khi bắt đầu một bản ghi mới, bạn có thể định cấu hình những mục sau:

    Đang định cấu hình bản ghi mới.

    • Trong hộp văn bản Thuộc tính bộ chọn, hãy nhập một thuộc tính kiểm thử tuỳ chỉnh. Trình ghi sẽ sử dụng thuộc tính này để phát hiện bộ chọn thay vì danh sách thuộc tính kiểm thử phổ biến.

    • Trong tập hợp hộp đánh dấu Loại bộ chọn để ghi lại, hãy chọn loại bộ chọn để tự động phát hiện:

      • Hộp đánh dấu. Dịch vụ so sánh giá. Bộ chọn cú pháp.
      • Hộp đánh dấu. ARIA. Bộ chọn ngữ nghĩa.
      • Hộp đánh dấu. Văn bản. Bộ chọn có văn bản duy nhất ngắn nhất (nếu có).
      • Hộp đánh dấu. XPath. Bộ chọn sử dụng Ngôn ngữ đường dẫn XML.
      • Hộp đánh dấu. Pierce. Bộ chọn tương tự như bộ chọn CSS nhưng có thể xuyên qua DOM bóng.

    Bộ chọn kiểm thử phổ biến

    Đối với các trang web đơn giản, thuộc tính id và thuộc tính CSS class là đủ để Máy ghi âm phát hiện bộ chọn. Tuy nhiên, điều đó không phải lúc nào cũng đúng vì:

    • Các trang web của bạn có thể sử dụng các lớp hoặc mã động có thể thay đổi.
    • Bộ chọn của bạn có thể bị hỏng do các thay đổi về mã hoặc khung.

    Ví dụ: Các giá trị class của CSS có thể được tạo tự động cho những ứng dụng được phát triển bằng các khung JavaScript hiện đại (ví dụ: React, Angular, Vue) và các khung CSS.

    Các lớp CSS được tạo tự động có tên ngẫu nhiên.

    Trong những trường hợp này, bạn có thể sử dụng các thuộc tính data-* để tạo các bài kiểm thử có khả năng phục hồi cao hơn. Đã có một số bộ chọn data-* phổ biến mà nhà phát triển dùng cho quá trình tự động hoá. Máy ghi âm cũng hỗ trợ các ghi âm này.

    Nếu bạn đã xác định các bộ chọn thử nghiệm phổ biến sau đây trên trang web của mình, thì Máy ghi âm sẽ tự động phát hiện và sử dụng các bộ chọn đó trước tiên:

    • data-testid
    • data-test
    • data-qa
    • data-cy
    • data-test-id
    • data-qa-id
    • data-testing

    Ví dụ: kiểm tra phần tử "Cappuchno" trên trang minh hoạ này và xem các thuộc tính kiểm tra:

    Bộ chọn kiểm thử được xác định.

    Ghi lại một lượt nhấp vào "Cappucno", mở rộng bước tương ứng trong bản ghi và kiểm tra các bộ chọn được phát hiện:

    Bộ chọn kiểm thử phổ biến đã phát hiện.

    Tuỳ chỉnh bộ chọn bản ghi âm

    Bạn có thể tuỳ chỉnh bộ chọn của một bản ghi nếu các bộ chọn kiểm thử phổ biến không phù hợp với bạn.

    Ví dụ: trang minh hoạ này sử dụng thuộc tính data-automate làm bộ chọn. Bắt đầu bản ghi mới rồi nhập data-automate làm thuộc tính bộ chọn.

    Tuỳ chỉnh bộ chọn bản ghi âm.

    Điền địa chỉ email và quan sát giá trị bộ chọn ([data-automate=email-address]).

    Kết quả của việc lựa chọn bộ chọn tuỳ chỉnh.

    Mức độ ưu tiên của bộ chọn

    Máy ghi âm sẽ tìm các bộ chọn theo thứ tự sau đây, tuỳ thuộc vào việc bạn có chỉ định thuộc tính bộ chọn CSS tuỳ chỉnh hay không:

    • Nếu được chỉ định:
      1. Bộ chọn CSS với thuộc tính CSS tuỳ chỉnh của bạn.
      2. Bộ chọn XPath.
      3. Bộ chọn ARIA nếu tìm thấy.
      4. Bộ chọn có văn bản duy nhất ngắn nhất nếu tìm thấy.
    • Nếu không được chỉ định:
      1. Bộ chọn ARIA nếu tìm thấy.
      2. Bộ chọn CSS có mức độ ưu tiên sau:
        1. Các thuộc tính phổ biến nhất được dùng để kiểm thử:
          • data-testid
          • data-test
          • data-qa
          • data-cy
          • data-test-id
          • data-qa-id
          • data-testing
        2. Thuộc tính mã nhận dạng, ví dụ: <div id="some_ID">.
        3. Bộ chọn CSS thông thường.
      3. Bộ chọn XPath.
      4. Bộ chọn Pierce.
      5. Bộ chọn có văn bản duy nhất ngắn nhất nếu tìm thấy.

    Có thể có nhiều bộ chọn CSS, XPath và Pierce thông thường. Máy ghi âm ghi lại:

    • Bộ chọn CSS và XPath thông thường ở mọi cấp gốc, tức là máy chủ lưu trữ bóng lồng nhau, nếu có.
    • Bộ chọn xuyên qua là duy nhất trong số tất cả các phần tử bên trong tất cả các gốc bóng.