Làm cách nào tôi có thể tìm thấy một phần tử theo lớp CSS với XPath?

Trong trang web của tôi, có một divcái classtên Test.

Làm thế nào tôi có thể tìm thấy nó với XPath?

Công cụ chọn này sẽ hoạt động nhưng sẽ hiệu quả hơn nếu bạn thay thế nó bằng đánh dấu phù hợp của bạn:

//*[contains(@class, 'Test')]

Hoặc, vì chúng ta biết yếu tố tìm kiếm là div:

//div[contains(@class, 'Test')]

Nhưng vì điều này cũng sẽ phù hợp với các trường hợp như class="Testvalue"hoặc class="newTest", phiên bản của @ Tomalak được cung cấp trong các nhận xét sẽ tốt hơn :

//div[contains(concat(' ', @class, ' '), ' Test ')]

Nếu bạn muốn thực sự chắc chắn rằng nó sẽ khớp chính xác, bạn cũng có thể sử dụng hàm không gian chuẩn hóa để dọn sạch các ký tự khoảng trắng đi lạc xung quanh tên lớp (như được đề cập bởi @Terry):

//div[contains(concat(' ', normalize-space(@class), ' '), ' Test ')]

Lưu ý rằng trong tất cả các phiên bản này, * tốt nhất nên được thay thế bằng bất kỳ tên thành phần nào bạn thực sự muốn khớp, trừ khi bạn muốn tìm kiếm từng phần tử trong tài liệu cho điều kiện đã cho.

Cách dễ nhất ..

//div[@class="Test"]

Giả sử bạn muốn tìm <div class="Test">như mô tả.

Các CHỈ đúng cách để làm điều đó với XPath:

//div[contains(concat(" ", normalize-space(@class), " "), " Test ")]

Các hàm normalize-spacedải khoảng trắng hàng đầu và dấu kiểm, và cũng thay thế các chuỗi ký tự khoảng trắng bằng một khoảng trắng.

Ghi chú

Nếu không cần nhiều truy vấn Xpath này, bạn có thể muốn sử dụng thư viện chuyển đổi bộ chọn CSS thành XPath, vì bộ chọn CSS thường dễ đọc và ghi hơn truy vấn XPath. Ví dụ, trong trường hợp này, bạn có thể sử dụng cả hai div[class~="Test"]và div.Testđể có được kết quả như nhau.

Một số thư viện tôi đã có thể tìm thấy:

• Đối với JavaScript : css2xpath & css-to-xpath
• Đối với PHP : Thành phần CssSelector
• Đối với Python : cssselect
• Đối với C # : css2xpath đã tải lại
• Dành cho GO : css2xpath

Tôi chỉ cung cấp câu trả lời này như một câu trả lời, vì Tomalak đã cung cấp như một nhận xét cho câu trả lời của người trung gian từ lâu

//div[contains(concat(' ', @class, ' '), ' Test ')]

Một chức năng hữu ích có thể được thực hiện từ các câu trả lời trước:

function matchClass($className) {
    return "[contains(concat(' ', normalize-space(@class), ' '), ' $className ')]";
}

Sau đó, chỉ cần nối hàm gọi vào truy vấn của bạn.

Phù hợp với một lớp có khoảng trắng.

<div class="hello "></div>

//div[normalize-space(@class)="hello"]

bạn có thể tìm thấy các phần tử như ví dụ này (tất cả các phần tử css)

private By 
allElementsCss = By.xpath(".//div[@class]");