Bỏ qua tới nội dung chính
DemoZalo 0862020654

Selector

Block tìm phần tử trên trang bằng cách nào, cách chọn trực quan, và vì sao selector hay hỏng.

Block tìm phần tử ra sao

Mọi block có tác động lên trang — click, gõ chữ, đọc chữ — đều cần biết nó đang nói tới phần tử nào. Đó chính là selector. Selector đúng thì workflow chạy được hàng tháng; selector sai thì hỏng ngay lần đầu website đổi tên class.

  • CSS selector — lựa chọn thông thường, và là thứ bộ chọn sinh ra mặc định.
  • XPath — cho những trường hợp CSS không diễn đạt được, ví dụ tìm phần tử theo nội dung chữ bên trong.
Bảng cấu hình khối Click Element, có ô selector.
Khối nào chạm vào trang đều cần một selector.

Chọn phần tử

Bạn không phải tự viết selector. Mở bộ chọn từ bất kỳ ô selector nào, chọn một tab trình duyệt đang chạy, rồi click vào phần tử bạn muốn ngay trên trang. Bộ chọn nổi lên trên trình duyệt nên bạn nhìn được cả hai cùng lúc, và bấm Esc để huỷ.

Nó đưa ra nhiều ứng viên cho phần tử bạn vừa click chứ không đưa một đáp án duy nhất, vì hiếm khi chỉ có một selector đúng. Mỗi ứng viên hiển thị nó khớp với bao nhiêu phần tử và có được đánh giá là ổn định hay không.

  • Duy nhất — khớp đúng một phần tử. Đây là thứ bạn cần.
  • Nhiều — khớp với nhiều phần tử. Hợp lý khi lặp qua một danh sách, nhưng sai khi chỉ muốn click một cái.
  • Ổn định — dựng từ những thuộc tính ít khả năng thay đổi. Một id hay một data attribute là ổn định; một class sinh tự động kiểu css-1x7fk2p thì không.

Hãy ưu tiên ứng viên ổn định hơn là ứng viên ngắn. Một selector dài neo vào id sẽ sống sót qua đợt đổi giao diện; một selector ngắn dựng từ class trang trí thì không.

Thử trước khi chạy

Gõ hoặc dán một selector vào ô kiểm thử rồi chạy nó trên trang thật. Nó báo lại có bao nhiêu phần tử khớp, và con số đó cho bạn biết ngay selector đang quá rộng, quá hẹp, hay sai hẳn. Làm việc này tốn vài giây; phát hiện ra khi một lượt chạy đã hỏng thì tốn hơn nhiều.

Chờ phần tử xuất hiện

Phần lớn ô selector đều có tuỳ chọn chờ kèm thời gian tối đa. Hãy để bật. Trang web tải nội dung bất đồng bộ, và một block đi tìm phần tử ngay khi trang vừa mở sẽ thường tìm trước lúc phần tử đó tồn tại. Việc chờ chính là khác biệt giữa một workflow chạy được và một workflow chỉ chạy được khi mạng nhanh.