Skip to content

Bộ Chọn Phần Tử

Bộ chọn phần tử được sử dụng để xác định các phần tử trên trang.

Trong Automation, bạn có thể chọn một phần tử bằng cách sử dụng Bộ chọn CSS, biểu thức XPath hoặc Toạ độ

Các kiểu bộ chọn phần tử

Bộ chọn CSS

Là bộ chọn bạn sẽ sử dụng CSS selector để xác định được phần tử muốn thực hiện hành động mong muốn. Các bạn có thể tham khảo tài liệu để sử dụng các css selector trong kịch bản tự động.

Ví dụ sử dụng kiểu bộ chọn css selector để dùng trong node Click Chuột

Kịch bản mình muốn click vào button Log in để đăng nhập tài khoản vào trang w3school.

login

Mình sẽ sử dụng bộ chọn phần tử là: button[type="submit"] trong node Click Chuột

login

Khi chạy node Click Chuột sẽ click vào button Login

login

XPath

Là bộ chọn bạn sẽ sử dụng XPath để xác định được phần tử muốn thực hiện hành động mong muốn. Các bạn có thể tham khảo tài liệu để sử dụng các XPath trong kịch bản tự động.

Ví dụ sử dụng kiểu bộ chọn XPath để dùng trong node Click Chuột

Kịch bản mình muốn click vào button Log in để đăng nhập tài khoản vào trang w3school.

login

Mình sẽ sử dụng bộ chọn phần tử là: //button[@type="submit"] trong node Click Chuột

login

Khi chạy node Click Chuột sẽ click vào button Login

login

Toạ độ

  • Với một toạ độ Là lựa chọn bạn sử dụng toạ độ để xác định được phần tử muốn thực hiện hành động mong muốn.
Ví dụ sử dụng toạ độ để dùng trong node Click Chuột

Kịch bản mình muốn click vào button Log in để đăng nhập tài khoản vào trang w3school.

login

Để click theo toạ độ, các bạn cần phải lấy được toạ độ của nút button Login, các bạn có thể dùng bộ chọn có sẵn của OmniLogin

login

Sau khi lấy được toạ độ mình sẽ dán nó vào node Click Chuột

login

Khi chạy node Click Chuột sẽ click vào button Login

login

  • Với nhiều toạ độ

Ngoài ra các bạn có thể dùng nhiều toạ độ trong node click chuột để có thể thao tác trên nhiều toạ độ trong một node Click chuột

Ví dụ sử dụng nhiều toạ độ để dùng trong node Click Chuột

Kịch bản mình muốn tưới nước vào nhiều ô đất trong game Pixels

Để thêm nhiều toạ độ trong node, bạn hãy click vào biểu tượng dấu +, sau đó điền các giá trị toạ độ của các ô đất muốn tưới nước

login

Khi chạy node Click Chuột, nó sẽ click vào các ô đất có toạ độ tương ứng

login

Tùy Chọn Bộ Chọn

Bạn sẽ tìm thấy các tùy chọn này khi chỉnh sửa một node bất kỳ

Workflow example

Bạn cũng có thể lựa chọn các tuỳ chỉnh theo chức năng của chúng.

Nhiều

Chọn nhiều phần tử khớp với bộ chọn. Theo mặc định, Automation chỉ chọn phần tử đầu tiên khớp với Bộ chọn.

Ví dụ khi sử dụng node Click Chuột để click một danh sách các nút bấm. Thông thường khi muốn lặp qua một danh sách thì các bạn cần dùng node Lặp Dữ Liệu hay Lặp Phần Tử. Nhưng hiện tại bạn chỉ cần chọn lựa chọn Nhiều là đã có thể click tất cả các nút trong danh sách.

Workflow example

Đánh Dấu Phần Tử

Đánh dấu phần tử đã được chọn, nghĩa là phần tử đó sẽ không được chọn nếu nó đã được chọn trước đó bởi cùng một node.

Ví dụ khi bạn có quy trình như thế này

Workflow example

và sử dụng Trích Văn Bản với bộ chọn .text như chọn một đối tượng, và trang web DOM.

html
<div>
  <p class="text" id="1">Text</p>
  <p class="text" id="2">Text</p>
  <p class="text" id="3">Text</p>
  <p class="text" id="4">Text</p>
</div>
<div>
  <p class="text" id="1">Text</p>
  <p class="text" id="2">Text</p>
  <p class="text" id="3">Text</p>
  <p class="text" id="4">Text</p>
</div>

Khi Trích Văn Bản đang được thực thi, nó sẽ nhận phần tử đầu tiên khớp với bộ chọn là <p class="text" id="1">Text</p> và vì tùy chọn phần tử đánh dấu được bật nên nó sẽ đánh dấu phần tử và trông như thế này <p class="text" id="1" block--block-id>Text</p>.

html
<div>
  <p class="text" id="1" block--block-id>Text</p>
  <p class="text" id="2">Text</p>
  <p class="text" id="3">Text</p>
  <p class="text" id="4">Text</p>
</div>
<div>
  <p class="text" id="1" block--block-id>Text</p>
  <p class="text" id="2">Text</p>
  <p class="text" id="3">Text</p>
  <p class="text" id="4">Text</p>
</div>

Khi node Trích văn bản được thực thi lần thứ 2, nó sẽ thực hiện tương tự nhưng thay vì chọn <p class="text" id="1" block--block-id>Text</p> nó sẽ chọn <p class="text" id="2">Text</p> vì phần tử phần tử đầu tiên đã được đánh dấu.

Chỉ chọn trong màn hình

Chỉ thao tác với những phần tử đang hiển thị trên màn hình.

Ví dụ dưới đây khi chúng ta muốn click vào nút Download the Esty App nằm ở cuối trang.

Element picker

Bình thường thì chúng ta có thể thực hiện hành động click được

Element picker

Nhưng với trường hợp chúng ta chọn lựa chọn Chỉ chọn trong màn hình thì không thể click được

Element picker

Chờ Bộ Chọn

Đợi cho đến khi selector xuất hiện trên trang web. Nếu tại thời điểm kiểm tra selector đã xuất hiện rồi, node ngay lập tức được thực thi. Nếu selector không xuất hiện sau thời gian nhất định trong trường nhập thời gian chờ, quy trình sẽ báo lỗi ở logs.

Tạo Bộ Chọn

Nếu bạn không biết cách viết bộ chọn của riêng mình, bạn có thể sử dụng Bộ chọn của OmniLogin bằng cách chọn vào node trên thanh của node bạn đang tìm bộ chọn.

Bạn có thể chọn vào bất cứ chỗ nào để chọn một phần tử. Automation sẽ tạo bộ chọn tương ứng với phần tử đã chọn.

Element picker

Chú ý

Bạn cần mở trình duyệt ở trang mà bạn muốn tìm bộ chọn phần tử. Khi đó khi nhấn vào biểu tượng thì bạn sẽ tự động được chuyển đến trang đang hoạt động. Nếu bạn đã nhấn vào biểu tượng mà không được chuyển đến, thì hãy nhấn vào trình duyệt đang mở.

Tuỳ chỉnh bộ chọn

Automation hỗ trợ các bộ chọn tiêu chuẩn như Bộ chọn CSS, biểu thức XPathToạ độ