Tôi có thể chọn một phần tử theo vị trí mảng của nó trong nightwatch.js không?

Question

Tôi đang tìm cách tự động hóa một số quy trình thử nghiệm của mình và tôi tương đối mới với Nightwatch.js và javascript. Có cách nào mà tôi có thể nhấp vào một phần tử dựa trên lớp và vị trí của nó trong mảng tiếp theo sẽ được trả lại nếu có nhiều phần tử có cùng một lớp hay không.

Ví dụ lấy HTML sau đây: -

<div class="clickable-button"><p>Some Text</p></div> 
<div class="clickable-button"><p>Some Text 2</p></div> 
<div class="clickable-button"><p>Some Text 3</P></div> 

Nếu tôi sử dụng công cụ phát triển chrome và chạy lệnh sau trong giao diện điều khiển: -

$('.clickable-button') 

Nó trả về một mảng của ba yếu tố được liệt kê ở trên.

Tôi muốn nhấp vào phần tử <div> đầu tiên và muốn biết liệu có cách nào tôi có thể thực hiện việc này bằng bộ chọn CSS không? Tôi không thể chọn qua văn bản xuất hiện trong thẻ <p> vì đây là dữ liệu động.

Tôi đã thử các lệnh sau trong Nightwatch: -

browser.click('.clickable-button'[0]) 

browser.click('clickable-button[0]') 

Cả các tùy chọn này làm việc. Bất kỳ trợ giúp hoặc cố vấn sẽ được đánh giá cao.

Answer 1

Bạn có thể có thể sử dụng :nth-of-type

browser.click('.clickable-button:nth-of-type(1)'); 

BTW :nth-of-type là một phần của CSS3 vì vậy nó không được hỗ trợ bởi các trình duyệt cũ.

Answer 2

Ngoài việc sử dụng bộ chọn CSS, XPath là một tùy chọn, bạn có thể làm

browser .useXpath() //ignore this line if you already selected xpath as strategy .click('(//div[@class="clickable-button"])[1]')

để xác định vị trí các nút đầu tiên. Reference