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ạ độ
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. Mình 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 mình 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 mình 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 đó, mình cần phải lấy được CSS Selector của nút đó
Để lấy được CSS Selector đó, mình 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ì mình cần sử dụng node Click chuột, khi vào cấu hình node mình sẽ thấy một biểu tượng ống kính như hình. Mình sẽ 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ở.
Sau đó mình sẽ thấy trang được hiện lên kèm theo một popup OmniLogin hiện lên như hình, vì mình đang muốn lấy CSS Selector nên mình sẽ lựa chọn CSS Selector
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 selector là button::-p-text(Login)
Mình sao chép rồi điền vào node Click chuột như hình
Ngoài ra mình có thể di chuyển cửa sổ đó ra khỏi chỗ khác để lấy selector ở phần đang bị che khi click vào biểu tượng này 
Hoặc tạm thời tắt lấy selector bằng cách click vào con mắt
Khi chạy node Click Chuột sẽ nhấn vào nút Login
Ví dụ lấy CSS Selector bằng cách thủ công
Quy trình mình 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 đó, mình cần phải lấy được CSS Selector của nút đó
Để lấy được CSS Selector đó, mình 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 mình 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
Tiếp theo mình nhấn vào mũi tên này
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
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 mình có thuộc tính type
Mình 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
Khi chạy node Click Chuột sẽ nhấn vào nút Login
Ví dụ lấy CSS Selector nằm trong iframe
Chẳng hạn như ở đây, mình cần nhấn vào nút Claim
Thông thường mình 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
Nhưng khi kiểm tra trang web mình sẽ thấy thẻ chứa nút đó đang nằm trong một thẻ iframe
Vì thế mình 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
Và khi chạy, mình sẽ thấy nhấn được vào nút Claim
Ví dụ lấy CSS Selector nằm trong shadow-root(open)
Quy trình ở đây mình muốn click vào biểu tượng ví MetaMask để có thể kết nối với ví đó 
Thông thường mình sẽ lấy selector biểu tượng ví MetaMask đó là [name="MetaMask"] và sử dụng trong node Click chuột như sau 
Tuy nhiên khi mở trang web lên, mình sẽ thấy selector đó nằm trong nhiều thể shadow-root 
Để có thể truy cập vào trong các phần tử nằm trong shadow-root, mình 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 đó mình sử dụng selector đó ở trong node Click chuột
Khi chạy, mình sẽ thấy node đã nhấn vô biểu tượng ví MetaMask để có thể kết nối 
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. Mình 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 mình 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 đó, mình cần phải lấy được XPath của nút đó
Để lấy được XPath đó, mình 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ì mình cần sử dụng node Click chuột, khi vào cấu hình node mình sẽ thấy một biểu tượng ống kính như hình. Mình sẽ 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ở.
Sau đó mình sẽ thấy trang được hiện lên kèm theo một popup OmniLogin hiện lên như hình, vì mình đang muốn lấy XPath nên mình sẽ lựa chọn XPath
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à id("root")/DIV[2]/DIV[1]/DIV[1]/DIV[1]/DIV[2]/DIV[1]/DIV[5]/DIV[1]/FORM[1]/DIV[3]/BUTTON[2]
Mình sao chép rồi điền vào node Click chuột như hình
Ngoài ra mình có thể di chuyển cửa sổ đó ra khỏi chỗ khác để lấy selector ở phần đang bị che khi click vào biểu tượng này
Hoặc tạm thời tắt lấy selector bằng cách click vào con mắt
Khi chạy node Click Chuột sẽ nhấn vào nút Login
Ví dụ lấy XPath bằng cách thủ công
Quy trình mình muốn nhấn vào nút Log in để đăng nhập tài khoản vào trang w3school.
Đầ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 mình 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
Tiếp theo mình nhấn vào mũi tên này
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
Sau khi xác định thẻ đại diện cho nút Login đó, mình á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 button và lang='en tương ứng với type="submit"
Sau khi lấy được, mình 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
Tiếp theo mình 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 đó mình có thể sử dụng XPath đó
Tiếp theo mình điền XPath đó vào node Click chuột
Khi chạy node Click Chuột sẽ nhấn vào nút Login
Toạ độ
Với một toạ độ
Là lựa chọn bạn 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 mình muốn nhấn vào nút Log in để đăng nhập tài khoản vào trang w3school.
Để nhấn theo toạ độ, mình cần phải lấy được toạ độ của nút nút Login, mình 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ì mình cần sử dụng node Click chuột, khi vào cấu hình node mình sẽ thấy một biểu tượng ống kính như hình. Mình sẽ 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ở.
Sau khi lấy được toạ độ mình sẽ dán nó vào node Click Chuột
Khi chạy node Click Chuột sẽ nhấn vào nút Login
Với nhiều toạ độ
Ngoài ra mình 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 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 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
Khi chạy node Click Chuột, nó sẽ nhấn vào các ô đất có toạ độ tương ứng
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ỳ
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. Nhưng khi bạn chọn lựa chọn này, node đó của mình 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ử mình đã thêm vào
Ví dụ
Ở ví dụ này, mình đang muốn nhấn lần lượt vào danh sách các nút ở mục này
Thông thường khi muốn lặp qua một danh sách phần tử tương tự nhau thì mình 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, mình có thể sử dụng node Click Chuột để nhấn một danh sách các nút bấm.
Mình chỉ cần lấy một Bộ chọn phần tử đại diện cho cả bảy nút trên, chẳng hạn ở đây mình dùng bộ chọn CSS Selector là: ul[class="nav navbar-nav"]>li
Sau đó mình 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, mình có thể ấn phím Enter để chuyển đến các phần tử khớp với CSS Selector đó
Tiếp theo mình sẽ sử dụng CSS Selector vừa lấy trong node Click chuột để thao tác với các nút đó.
Khi chạy, mình sẽ thấy được node Click chuột sẽ nhấn vào hết tất cả các nút
Đá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
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.
<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>.
<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 mình muốn nhấn vào nút Download the Esty App nằm ở cuối trang.
Bình thường thì mình có thể thực hiện hành động nhấn được
Nhưng với trường hợp mình chọn lựa chọn Chỉ chọn trong màn hình thì không thể nhấn được
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 mình muốn nhấn vào sản phẩm này ở trên trang Etsy
Để có thể thao tác được với phần tử đó mình đã 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 đó
Sau đó mình 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
Như mình thấy, phần tử đó tồn tại nên mình đã có thể thao tác được
Ví dụ khi không có phần tử
Ở ví dụ này, mình sẽ thao tác ở một trang mới này
Nhưng mình vẫn sẽ sử dụng CSS Selector cũ, khi đó chắc chắn node Click chuột sẽ bị lỗi, ở đây mình 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
Sau đó khi chạy node Click chuột, mình sẽ thấy vì không thấy phần tử đó, sau hai giây sẽ trả về thông tin lỗi
Còn khi không chọn Chờ Bộ Chọn mình sẽ thấy nếu không tìm thấy phần tử đó thì sẽ trả về thông tin lỗi luôn
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 XPath và Toạ độ