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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Khám phá các cách chia sẻ luồng người dùng, chỉnh sửa luồng người dùng và các bước thực hiện trong tài liệu tham khảo toàn diện về các tính năng của bảng điều khiển Trình ghi 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 sử dụng bảng điều khiển Máy ghi âm, 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 để di chuyển nhanh hơn trong Máy ghi âm. Để biết danh sách phím tắt mặc định, hãy xem Phím tắt của bảng điều khiển Máy ghi âm.

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

Nút Hiện phím tắt.

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

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

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

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

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

  1. Thêm bản ghi 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ả các bản ghiMở rộng thêm.. Trình đơn thả xuống hiển thị danh sách các bản ghi đã lưu. Chọn lựa chọn [number] bản ghi để mở rộng và quản lý danh sách bản ghi đã lưu. Xem tất cả các bản ghi.

  3. Xuất một bản ghiTải tệp xuống.. Để tuỳ chỉnh thêm 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 Xuất luồng người dùng.

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

  5. Xoá một 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. bên cạnh 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 Máy ghi âm. Điều này hữu ích khi báo cáo lỗi vì bạn có thể chia sẻ bản ghi chính xác các bước tái tạo lỗi. Bạn cũng có thể xuất và phát lại video trên các thư viện bên ngoài.

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

Để xuấ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. Xuất ở đầu bảng điều khiển 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 âm xuống dưới dạng tệp JSON.
    • @puppeteer/replay. Tải bản ghi xuống dưới dạng tập lệnh Phát lại Pugpeteer.
    • Thợ múa. Tải bản ghi xuống dưới dạng tập lệnh Puppeteer.
    • Puppeteer (bao gồm cả bản phân tích của Lighthouse). Tải bản ghi xuống dưới dạng một tập lệnh Puppeteer với thông tin phân tích Lighthouse được nhúng.
    • Một hoặc nhiều tuỳ chọn do tính năng Xuất tiện ích của Máy ghi âm cung cấp.
  4. Lưu tệp.

Bạn có thể thực hiện các thao tác 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 rồi nhập tệp JSON vào lại Trình ghi.
  • @puppeteer/replay. Phát lại tập lệnh bằng thư viện Puppeteer Replay (Phát lại Pugpeteer). Khi xuất dưới dạng tập lệnh @puppeteer/replay, các bước vẫn sẽ là đối tượng JSON. Đây là lựa chọn hoàn hảo 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 các bước này vào Trình ghi.
  • Tập lệnh múa rối. Phát lại tập lệnh bằng Puppeteer. Do các bước đượ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 lại tập lệnh này vào Máy ghi âm.

  • Puppeteer (bao gồm cả bản phân tích của Lighthouse). Tuỳ chọn xuất này giống như tuỳ chọn trước nhưng có chứa mã tạo 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

    Đã mở báo cáo Lighthouse trong Chrome.

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

Hãy xem Tiện ích Máy ghi âm.

Nhập luồng người dùng

Cách nhập luồng người dùng:

  1. Nhấp vào nút NhậpTải tệp lên. ở đầu bảng điều khiển Máy ghi âm. Nhập bản ghi.
  2. Chọn tệp JSON có luồng người dùng được 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 thư viện bên ngoài

Bản phát lại Puppeteer là một thư viện nguồn mở do nhóm Công cụ của Chrome cho nhà phát triển duy trì. Trò chơi 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ể dùng công cụ này để phát lại các tệp JSON.

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

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

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 luồng người dùng được 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 làm chậm quá trình phát lại, đặt các điểm ngắt, từng bước thực thi 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, Máy ghi âm sẽ phát lại luồng người dùng nhanh nhất có thể. Để hiểu điều 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 tốc độ phát lại:
    • Bình thường (Mặc định)
    • Chậm
    • Rất chậm
    • Cực chậm

Chế độ 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:

  1. Mở một bản ghi âm trong bảng điều khiển Recorder (Máy ghi âm).
  2. Nhấp vào Hiển thị 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 hiển thị chế độ xem cạnh nhau của các bước và mã của các bước đó. Chế độ xem cạnh nhau của các bước và mã của các bước đó.
  4. Khi bạn di chuột qua một bước, Trình ghi sẽ đánh dấu mã tương ứng ở mọi định dạng, bao gồm cả mã do tiện ích cung cấp.

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

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

    Đây có thể là một trong 3 định dạng mặc định (JSON, @puppeteer/replay, Puppeteer script hoặc định dạng được cung cấp bởi một tiện ích.

  6. Tiếp tục gỡ lỗi bản ghi bằng cách chỉnh sửa các giá trị và thông số bước. Bạn không thể chỉnh sửa chế độ xem mã nhưng sẽ cập nhật theo cách phù hợp khi bạn thay đổ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 đ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. Vòng tròn chuyển thành 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 thi các bước thực thi, hãy nhấp vào nút Thực thi một bước. Thực thi một bước trên thanh thao tác ở đầu bảng điều khiển Ghi lại.
  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.

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

Thêm các bước

Đôi khi, bạn có thể cần phải tự thêm các bước. Ví dụ: Trình ghi lại không tự động ghi lại các sự kiện hover vì việc này gây ô nhiễm bản ghi và không phải tất cả các sự kiện đó đều hữu ích. Tuy nhiên, các thành phần 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 hover bước theo cách thủ công vào luồng người dùng phụ thuộc vào các phần tử như vậy.

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

  1. Mở trang minh hoạ này và 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 thao tác trong trình đơn rồi kết thúc quá trình ghi. Máy ghi âm chỉ ghi lại sự kiện nhấp chuột. Nhấp vào một hành động rồi kết thúc quá trình 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. Không phát lại được sau khi hết thời gian chờ do Trình ghi âm không thể truy cập vào phần tử 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 có biểu tượng ba dấu chấm. bên cạnh bước Nhấp 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, thuộc tính 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 một bộ chọn thích hợp cho bước mới. Nhấp vào Chọn. Chọn, sau đó nhấp vào một khu vực 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. Đang đặt bộ chọn.
  8. Hãy thử phát lại bản ghi. Khi thêm bước di chuột, Máy ghi âm sẽ phát lại thành công quy trình. Phát lại thành công.

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

Ví dụ: trong quá trình ghi, bạn có thể xác nhận 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, 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 tài sản, rồi nhập tên và giá trị của tài sản ở đị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 lại phần còn lại của luồng 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, Máy ghi âm sẽ hiển thị lỗi sau khi hết thời gian chờ.

Xem video sau để xem quy trình này hoạt động như thế nào.

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 dấu ba 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 một 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à các định dạng do phần mở rộng cung cấp.

Xoá các bước

Để xoá một bước vô tình bị 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 sẽ tự động thêm hai bước riêng biệt vào đầu mỗi bản ghi:

Một bản ghi với khung nhìn và các bước điều hướng đã thiết lập.

  • Đặt 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á hoạt động 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 loại tham số: click, doubleClick, hover, (phương thức nhập) change, keyUp, keyDown, scroll, close, navigate (cho 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.

    Định cấu hình một bước.

  3. Nhấp vào các nút tương ứng để thêm các thuộc tính tuỳ chọn theo từng loại và chỉ định chúng.

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

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

Để thêm hoặc xoá một phần tử vào 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:

Một số 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 từ 0 xác định một iframe có thể lồng vào. Ví dụ: bạn có thể xác định iframe đầu tiên (0) bên trong iframe (1) thứ hai của mục tiêu chính là [1, 0].
  • timeout – một 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 các bộ chọn. Để biết thêm thông tin, hãy xem bài viết Tìm hiểu về bộ chọn.

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

Loại Thuộc tính Bắt buộc 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 phần tử, tính bằng pixel
click
doubleClick		 button Nút con trỏ: chính | phụ trợ | giây | quay lại | chuyển tiếp
change value Séc. Giá trị cuối cùng
keyDown
keyUp		 key Séc. Tên khoá
scroll x
y		 Cuộn tuyệt đối vị trí x và y tính bằng pixel, mặc định là 0
navigate url Séc. URL mục tiêu
waitForElement operator >= | == (mặc định) | &lt;=
waitForElement count Số phần tử được xác định bởi bộ chọn
waitForElement attributes Thuộc tính HTML và giá trị của thuộc tính đó
waitForElement properties Thuộc tính JavaScript và giá trị của thuộc tính đó 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 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ự như Tỷ lệ pixel của thiết bị (DPR), mặc định là 1
setViewport isMobile
hasTouch
isLandscape		 Séc. Cờ boolean chỉ định việc:
  • Xem xét thẻ meta
  • Hỗ trợ các sự kiện chạm
  • Hiển thị ở chế độ ngang
    		•

    Có hai thuộc tính khiến tính năng phát lại tạm dừng:

    • Thuộc tính waitForElement thực hiện bước này chờ sự hiện diện (hoặc vắng mặt) của một số phần tử do bộ chọn xác định. Ví dụ: bước sau đây chờ ít hơn ba 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 thực hiện bước này chờ một 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 sang giá trị true để cho phép quá trình phát lại tiếp tục.

        "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ó yêu cầu mạng chậm hoặc hoạt ảnh dài, thì quá trình phát lại có thể không thành công trên những bước vượt quá thời gian chờ mặc định là 5000 mili giây.

    Để tránh vấn đề 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ờ ở một số bước cụ thể sẽ ghi đè giá trị mặc định.

    Để điều chỉnh thời gian chờ mặc định cho từng bước cùng một lúc, hãy làm như sau:

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

      Cài đặt tính năng phát lại.

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

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

    Để ghi đè thời gian chờ mặc định trên 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> rồi đặ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 có thời gian chờ hoạt động.

    Để xoá một lượt 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 các chế độ sau:

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

    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à đủ để Trình ghi 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 lớp hoặc mã nhận dạng động có thể thay đổi.
    • Bộ chọn của bạn có thể bị lỗi do các thay đổi về mã hoặc khung.

    Ví dụ: hệ thống có thể tự động tạo các giá trị class của CSS cho các ứng dụng được phát triển bằng khung JavaScript hiện đại (ví dụ: khung React, Angular, Vue) và 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ể dùng các thuộc tính data-* để tạo thêm các chương trình kiểm thử linh hoạt. Hiện đã có một số bộ chọn data-* phổ biến mà nhà phát triển sử dụng để tự động hoá. Trình ghi âm cũng hỗ trợ các ghi chú này.

    Nếu bạn đã xác định các bộ chọn kiểm thử phổ biến sau đây trên trang web của mình, thì Trình ghi 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 "Cappciano" trên trang minh hoạ này và xem các thuộc tính thử nghiệm:

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

    Ghi lại 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:

    Đã phát hiện bộ chọn kiểm thử phổ biế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 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 của bộ chọn.

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

    Điền địa chỉ email và quan sát giá trị của 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

    Trình ghi tìm kiếm các bộ chọn theo thứ tự sau, tuỳ thuộc vào việc bạn đã chỉ định thuộc tính bộ chọn CSS tuỳ chỉnh hay chưa:

    • Nếu được chỉ định:
      1. Bộ chọn CSS có thuộc tính CSS tuỳ chỉnh của bạn.
      2. Bộ chọn vai trò.
      3. Bộ chọn ARIA nếu tìm thấy.
      4. Bộ chọn có văn bản riêng biệ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 vai trò.
      4. Bộ chọn chiều dài.
      5. Bộ chọn có văn bản riêng biệt ngắn nhất nếu tìm thấy.

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

    • Bộ chọn CSS và vai trò thông thường ở mọi cấp độ gốc, nghĩa là các máy chủ bóng (shadow) được lồng, nếu có.
    • Lấy những bộ chọn duy nhất trong số tất cả các phần tử trong mọi gốc đổ bóng.