XPath를 사용하여 CSS 클래스별로 요소를 찾으려면 어떻게해야합니까?

내 웹 페이지 div에는 class이름이 인가 Test있습니다.

어떻게 찾을 수 XPath있습니까?

이 선택기는 작동하지만 적절한 마크 업으로 바꾸면 더 효율적입니다.

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

또는 우리는 추구하는 요소가 다음을 알고 있기 때문에 div:

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

그러나 이것은 class="Testvalue"또는 과 같은 경우와 일치 class="newTest"하므로 주석에 제공된 @Tomalak 버전이 더 좋습니다 .

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

실제로 올바르게 일치하는지 확인하려면 normalize-space 함수를 사용하여 클래스 이름 주위의 공백 문자를 정리할 수도 있습니다 (@Terry에서 언급 한대로).

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

이 모든 버전에서 *는 주어진 조건에 대해 문서의 모든 요소를 ​​검색하지 않는 한 실제로 일치시키려는 요소 이름으로 대체하는 것이 가장 좋습니다.

가장 쉬운 방법 ..

//div[@class="Test"]

<div class="Test">설명 된대로 찾으려고 가정합니다 .

XPath를 사용 하는 유일한 방법은 다음과 같습니다.

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

이 함수는 normalize-space선행 및 후행 공백을 제거하고 일련의 공백 문자를 단일 공백으로 바꿉니다.

노트

이러한 Xpath 쿼리가 많이 필요하지 않은 경우 CSS 선택기는 일반적으로 XPath 쿼리보다 읽기 및 쓰기가 훨씬 쉬우므로 CSS 선택기를 XPath로 변환하는 라이브러리를 사용할 수 있습니다. 예를 들어,이 경우 div[class~="Test"]와 div.Test를 모두 사용 하여 동일한 결과를 얻을 수 있습니다.

내가 찾은 일부 라이브러리 :

• 의 경우 자바 스크립트 : css2xpath 및 CSS - 투 - XPath는
• 대한 PHP : CssSelector 구성 요소
• 들어 파이썬 : cssselect
• 들어 C # : css2xpath 리로디드
• 대한 GO : css2xpath

Tomalak이 오래 전에 meder의 답변에 대한 의견으로 제공 한 것처럼 이것을 답변으로 제공하고 있습니다.

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

유용한 답변은 이전 답변으로 만들 수 있습니다.

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

그런 다음 함수 호출을 쿼리에 연결하십시오.

공백이있는 하나의 클래스 와 일치합니다 .

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

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

이 예제와 같은 요소를 찾을 수 있습니다 (모든 CSS 요소)

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