Skip to content

Bộ chọn phần tử

Bộ chọn phần tử dùng để xác định và tương tác với các phần tử trên trang web.

Trong Automation, người dùng 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ạ độ

login

Bộ chọn CSS

Là bộ chọn người dùng 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. Người dùng có thể tham khảo tài liệu để sử dụng các CSS Selector trong quy trình tự động.

Để lấy được CSS Selector người dùng có thể dùng bộ chọn của OmniLogin hoặc lấy một cách thủ công

Ví dụ lấy CSS Selector bằng bộ chọn của OmniLogin

Quy trình người dùng muốn nhấn vào nút Log in để đăng nhập tài khoản vào trang w3school sau khi điền xong các thông tin tài khoản.

Để nhấn vào nút đó, cần lấy CSS Selector của nút.

login

Để lấy được CSS Selector đó, người dùng có thể sử dụng bộ chọn của OmniLogin như sau

Đầu tiên tạo một quy trình và sử dụng node Mở liên kết để mở trang w3school,

Tiếp theo, vì muốn nhấn vào nút Login thì người dùng cần sử dụng node Click Chuột, khi vào cấu hình node người dùng sẽ thấy một biểu tượng ống kính như hình. Người dùng sẽ nhấn vào biểu tượng thì người dùng sẽ tự động được chuyển đến trang đang hoạt động. Nếu người dùng đã 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ở.

login

Sau đó, người dùng sẽ thấy trang được hiện lên kèm theo một popup OmniLogin hiện lên như hình, vì người dùng đang muốn lấy CSS Selector nên người dùng sẽ lựa chọn CSS Selector

login

Tiếp theo, chung ta nhấn vào nút Login để lấy selector, khi đó sẽ hiển thị lên một selector là button::-p-text(Login)

login Người dùng sao chép rồi điền vào node Click Chuột như hình

login

Ngoài ra người dùng có thể tắt lấy selector bằng cách click vào con mắt

login

Khi chạy node Click Chuột sẽ nhấn vào nút Login

login

Ví dụ lấy CSS Selector bằng cách thủ công

Quy trình người dùng muốn nhấn vào nút Log in để đăng nhập tài khoản vào trang w3school sau khi điền xong các thông tin tài khoản.

Để nhấn vào nút đó, cần lấy CSS Selector của nút.

login

Để lấy được CSS Selector đó, người dùng có thể sử dụng cách thủ công như sau

Đầu tiên tạo một quy trình và sử dụng node Mở liên kết để mở trang w3school

Tiếp theo, người dùng sẽ ấn phím F12 hoặc bấm chuột phải và chọn Inspect. Khi đó trên trang sẽ hiện 1 trang như trong hình

login

Tiếp theo, người dùng nhấn vào mũi tên này

login

Tiếp theo, nhấn vào nút Login đang muốn lấy selector, khi đó phần tử tương ứng với node đó sẽ được hiển thị ở trong mục Element

login

Tiếp đó sử dụng theo công thức: card[attribute=value] trong mục tài liệu, card tương ứng với thẻ button còn [attribute=value] tương ứng với [type="submit"] bởi vì trong thẻ button người dùng có thuộc tính type

Người dùng sẽ sử dụng bộ chọn phần tử bằng cách lấy trên: button[type="submit"] trong node Click Chuột

login

Khi chạy node Click Chuột sẽ nhấn vào nút Login

login

Ví dụ lấy CSS Selector nằm trong iframe

Ví dụ như ở đây, người dùng cần nhấn vào nút Claim

login

Thông thường người dùng chỉ cần lấy selector của nút đó là [class="kit-pill-claim reset is-state-claim is-type-default pill"] sau đó sử dụng trong node Click Chuột

login

Nhưng khi kiểm tra trang web người dùng sẽ thấy thẻ chứa nút đó đang nằm trong một thẻ iframe

login

Vì thế người dùng phải sử dụng thêm biểu thức iframe|> trước cái selector trên, khi đó selector sẽ ghi là iframe|>[class="kit-pill-claim reset is-state-claim is-type-default pill"]

Khi đó node Click Chuột sẽ hiển thị như sau

login

Và khi chạy, người dùng sẽ thấy nhấn được vào nút Claim

login

Ví dụ lấy CSS Selector nằm trong shadow-root(open)

Quy trình ở đây người dùng muốn click vào biểu tượng ví MetaMask để có thể kết nối với ví đó login

Thông thường người dùng sẽ lấy selector biểu tượng ví MetaMask đó là [name="MetaMask"] và sử dụng trong node Click Chuột như sau login

Tuy nhiên, khi kiểm tra trang web, selector đó nằm trong nhiều phần tử shadow-root. login

Để có thể truy cập vào trong các phần tử nằm trong shadow-root, người dùng cần sử dụng biểu thức >>>giữa các thẻ cha con ngăn cách nhau bởi shadow-root, khi đó selector trên sẽ viết dạng w3m-modal.open >>> w3m-router >>> w3m-connect-view >>> w3m-wallet-login-list >>> w3m-connector-list >>> w3m-connect-injected-widget >>> wui-list-wallet[name="MetaMask"]

Sau đó, người dùng sử dụng selector đó ở trong node Click Chuộtlogin

Khi chạy, người dùng sẽ thấy node đã nhấn vô biểu tượng ví MetaMask để có thể kết nối login

XPath

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

Ví dụ lấy XPath bằng bộ chọn của OmniLogin

Quy trình người dùng muốn nhấn vào nút Log in để đăng nhập tài khoản vào trang w3school sau khi điền xong các thông tin tài khoản.

Để nhấn vào nút đó, người dùng cần phải lấy được XPath của nút đó

login

Để lấy được XPath đó, người dùng có thể sử dụng bộ chọn của OmniLogin như sau

Đầu tiên tạo một quy trình và sử dụng node Mở liên kết để mở trang w3school,

Tiếp theo, vì muốn nhấn vào nút Login thì người dùng cần sử dụng node Click Chuột, khi vào cấu hình node người dùng sẽ thấy một biểu tượng ống kính như hình. Người dùng sẽ nhấn vào biểu tượng thì người dùng sẽ tự động được chuyển đến trang đang hoạt động. Nếu người dùng đã 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ở.

login

Sau đó, người dùng sẽ thấy trang được hiện lên kèm theo một popup OmniLogin hiện lên như hình, vì người dùng đang muốn lấy XPath nên người dùng sẽ lựa chọn XPath

login

Tiếp theo, chung ta nhấn vào nút Login muốn lấy selector, khi đó sẽ hiển thị lên một XPath là //button[contains(@class, "CustomButton_button__V5-G+") and contains(@class, "LoginForm_login_button__B4Ksc") and contains(@class, "CustomButton_primary__ZDr5g")]

login Người dùng sao chép rồi điền vào node Click Chuột như hình

login

Ngoài ra người dùng có thể tắt lấy selector bằng cách click vào con mắt

login

Khi chạy node Click Chuột sẽ nhấn vào nút Login

login

Ví dụ lấy XPath bằng cách thủ công

Quy trình người dùng muốn nhấn vào nút Log in để đăng nhập tài khoản vào trang w3school.

login

Đầu tiên tạo một quy trình và sử dụng node Mở liên kết để mở trang w3school

Tiếp theo, người dùng sẽ ấn phím F12 hoặc bấm chuột phải và chọn Inspect. Khi đó trên trang sẽ hiện 1 trang như trong hình

login

Tiếp theo, người dùng nhấn vào mũi tên này

login

Tiếp theo, nhấn vào nút Login đang muốn lấy XPath, khi đó phần tử tương ứng với node đó sẽ được hiển thị ở trong mục Element

login

Sau khi xác định thẻ đại diện cho nút Login đó, người dùng áp dụng công thức ở trong tài liệu: //title[@lang='en'] để viết XPath là: //button[@type="submit"] với title tương ứng với buttonlang='en tương ứng với type="submit"

Sau khi lấy được, người dùng có thể check luôn trong mục Element đó bằng cách nhấn bất kỳ vào vùng trong mục Element, sau đó dùng tổ hợp phím Ctr+ f, khi đó sẽ hiển thị một ô nhập như sau

login

Tiếp theo, người dùng dán XPath vào mục đó, khi hiển thị như hình có nghĩa là chỉ có 1 phần tử tương ứng với XPath đó, do đó người dùng có thể sử dụng XPath đó

login

Tiếp theo, người dùng điền XPath đó vào node Click Chuột

login

Khi chạy node Click Chuột sẽ nhấn vào nút Login

login

Toạ độ

Với một toạ độ

Là lựa chọn người dùng sử dụng một 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

Quy trình người dùng muốn nhấn vào nút Log in để đăng nhập tài khoản vào trang w3school.

login

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

Đầu tiên tạo một quy trình và sử dụng node Mở liên kết để mở trang w3school,

Tiếp theo, vì muốn nhấn vào nút Login thì người dùng cần sử dụng node Click Chuột, khi vào cấu hình node người dùng sẽ thấy một biểu tượng ống kính như hình. Người dùng sẽ nhấn vào biểu tượng thì người dùng sẽ tự động được chuyển đến trang đang hoạt động. Nếu người dùng đã 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ở.

login

login

Sau khi lấy được toạ độ người dùng sẽ dán nó vào node Click Chuột

login

Khi chạy node Click Chuột sẽ nhấn vào nút Login

login

Với nhiều toạ độ

Ngoài ra người dùng có thể dùng nhiều toạ độ trong node nhấn chuột để có thể thao tác trên nhiều toạ độ trong một node Click Chuột, các toạ độ sẽ được thực hiện theo chiều từ trên xuống dưới

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

Quy trình người dùng muốn tưới nước vào nhiều ô đất trong game Pixels

login

Để thêm nhiều toạ độ trong node, người dùng hãy nhấn 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 đã lấy

login

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

login

Tùy Chọn Bộ Chọn

Người dùng 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

Người dùng 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. Nhưng khi người dùng chọn lựa chọn này, node đó của người dùng sẽ thực hiện hành động với tất cả phần tử khớp với Bộ chọn phần tử người dùng đã thêm vào

Ví dụ

Ở ví dụ này, người dùng đang muốn nhấn lần lượt vào danh sách các nút ở mục này

Workflow example

Thông thường khi muốn lặp qua một danh sách phần tử tương tự nhau thì người dùng cần dùng node Lặp Dữ Liệu hay Lặp Phần Tử.

Tuy nhiên với tuỳ chọn Nhiều, người dùng có thể sử dụng node Click Chuột để nhấn một danh sách các nút bấm.

Người dùng chỉ cần lấy một Bộ chọn phần tử đại diện cho cả bảy nút trên, ví dụ ở đây người dùng dùng bộ chọn CSS Selector là: ul[class="nav navbar-nav"]>li

Sau đó, người dùng mở cửa sổ trên tab Element để kiểm tra CSS Selector trên đã trùng với bảy phần tử muốn thao tác hay không, như trong hình thì đã khớp với 7 phần tử kia, người dùng có thể ấn phím Enter để chuyển đến các phần tử khớp với CSS Selector đó

Workflow example

Tiếp theo, người dùng sẽ sử dụng CSS Selector vừa lấy trong node Click Chuột để thao tác với các nút đó.

Workflow example

Khi chạy, người dùng sẽ thấy được node Click Chuột sẽ nhấn vào hết tất cả các nút

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 người dùng 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>

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>

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 người dùng nhìn thấy

Ví dụ

Dưới đây khi người dùng muốn nhấn vào nút Download the Esty App nằm ở cuối trang.

Element picker

Bình thường thì người dùng có thể thực hiện hành động nhấn được

Element picker

Nhưng với trường hợp người dùng chọn lựa chọn Chỉ chọn trong màn hình thì không thể nhấn đượ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.

Ví dụ khi có phần tử

Dưới đây khi người dùng muốn nhấn vào sản phẩm này ở trên trang Etsy

Element picker

Để có thể thao tác được với phần tử đó người dùng đã lấy selector: [alt="Moss Agate Cluster Wedding Band Bridal Moissanite Ring Promise Anniversary Matching Ring Unique Jewelry Half Eternity Band Gift For Love"] và kiểm tra selector đó khớp với phần tử sản phẩm đó

Element picker

Sau đó, người dùng sẽ dùng trong node Click Chuột để click vào sản phẩm đó với cấu hình thời gian chờ là 15 giây

Element picker

Như người dùng thấy, phần tử đó tồn tại nên người dùng đã có thể thao tác được

Ví dụ khi không có phần tử

Ở ví dụ này, người dùng sẽ thao tác ở một trang mới này

Element picker

Nhưng người dùng vẫn sẽ sử dụng CSS Selector cũ, khi đó chắc chắn node Click Chuột sẽ bị lỗi, ở đây người dùng sẽ cấu hình Thời gian chờ của bộ chọn chờ 2 giây sau đó mới trả về lỗi bằng cấu hình như sau

Element picker

Sau đó, khi chạy node Click Chuột, người dùng sẽ thấy vì không thấy phần tử đó, sau hai giây sẽ trả về thông tin lỗi

Element picker

Chú ý

Người dùng cần mở trình duyệt ở trang mà người dùng muốn tìm bộ chọn phần tử. Khi đó khi nhấn vào biểu tượng thì người dùng sẽ tự động được chuyển đến trang đang hoạt động. Nếu người dùng đã 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ạ độ