Tìm các yếu tố của dữ liệu thuộc tính

Question

tôi cải thiện thử nghiệm của tôi với RSpec và capybara-webkit, cố gắng để xóa tất cả các css và xpath selectors như

find('#edit_user > div:nth-child(7) > div > div > button').click 

và tôi đang tìm kiếm các lựa chọn tốt nhất để thay thế chúng.

Tôi sẽ sử dụng css class của các phần tử nhưng một số người thử nghiệm capybara "chuyên nghiệp" cho biết đây không phải là lựa chọn tốt nhất.

Vì vậy, câu hỏi của tôi là: tôi có thể sử dụng thuộc tính data trong các thử nghiệm của mình không?
Nếu tôi có một yếu tố

<button name="button" type="submit" class="button last" data-test="edit.update">Update/button> 

tôi sẽ có thể làm

find('edit.update').click 

?

Và bạn có nghĩ đó là một ý tưởng hay không? Nếu bạn có thêm ý tưởng/thông tin về chủ đề này, hãy bình luận!

Answer 1

Để định vị các phần tử theo thuộc tính data- * của chúng, bạn cần sử dụng bộ chọn CSS hoặc XPath.

Đối với CSS-selector:

find('button[data-test="edit.update"]').click 

Đối với XPath:

find('//button[@data-test="edit.update"]').click 

hay không nó là một ý tưởng tốt thực sự phụ thuộc vào ứng dụng. Bạn muốn chọn thứ gì đó xác định duy nhất phần tử. Nếu "edit.update" không phải là duy nhất, nó sẽ không phải là một lựa chọn tốt để sử dụng. Thuộc tính class sẽ ổn nếu nút có một lớp duy nhất, mà "nút" và "cuối cùng" không có khả năng.

Cách tiếp cận tốt nhất là sử dụng thuộc tính tĩnh id vì chúng phải là duy nhất trong trang và ít có khả năng thay đổi. Phương thức find cũng hỗ trợ định vị các phần tử theo id, có nghĩa là bạn không phải viết CSS-selector hoặc XPath.

Answer 2

Câu trả lời được đưa ra bởi Justin Ko là chính xác, tôi chỉ muốn thêm một cái gì đó nâng cao hơn một chút có thể giúp kiểm tra khả năng đọc trong một số trường hợp. Bạn có thể thêm "bộ chọn" của riêng bạn vào Capybara, vì vậy nếu bạn thực sự muốn chọn mọi thứ bằng thuộc tính kiểm tra dữ liệu (không phải là ý tưởng tuyệt vời vì bạn thực sự không muốn thêm thuộc tính chỉ để thử nghiệm)

Capybara.add_selector(:dt) do 
    css { |v| "*[data-test=#{v}]" } 
end 

mà sẽ cho phép

find(:dt, 'edit.update') 

này có thể làm các bài kiểm tra hiểu thời vẫn giới hạn css hoặc đường dẫn truy vấn phức tạp để một nơi duy nhất trong mã thử nghiệm của bạn. Sau đó, bạn có thể xác định phương thức như

def find_by_dt(value) 
find(:dt, value) 
end 

nếu bạn thích giao diện find_by_dt ...) để tìm (: dt, ...)

Bạn cũng có thể thêm các bộ lọc và giới thiệu đến các lựa chọn của riêng bạn cho linh hoạt hơn, mô tả lỗi tốt hơn, vv - xem https://github.com/jnicklas/capybara/blob/master/lib/capybara/selector.rb cho được xây dựng trong bộ chọn được cung cấp bởi Capybara