로케이터인 XPath를 활용하면 또는 공백이 포함된 텍스트를 가진 웹 요소를 손쉽게 식별할 수 있습니다. 먼저 텍스트 앞뒤에 공백이 있는 웹 요소의 HTML 코드를 살펴보겠습니다. 아래 이미지에서 strong 태그로 감싸진 'JAVA BASICS' 텍스트는 HTML 코드에서 확인할 수 있듯이 공백을 포함하고 있습니다.
요소의 텍스트나 속성 값에 공백이 포함되어 있다면, 해당 요소에 대한 XPath를 작성할 때 반드시 normalize-space 함수를 사용해야 합니다. 이 함수는 문자열의 앞뒤 공백을 모두 제거할 뿐만 아니라, 문자열 내부에 존재하는 탭(tab)이나 줄바꿈(new line) 문자까지 함께 제거해 줍니다.
기본 문법
//tagname[normalize-space(@attribute/ function) = 'value']
공백을 무시한 경우의 문제점
페이지에 표시된 'JAVA BASICS' 웹 요소에 대해 공백을 고려하지 않고 XPath를 //strong[text()='JAVA BASICS']와 같이 작성해 보겠습니다. 이 표현식을 브라우저 콘솔에서 $x("//strong[text()='JAVA BASICS']") 형태로 검증하면, 일치하는 요소를 찾지 못하고 길이가 0(length – 0)으로 반환되는 것을 확인할 수 있습니다.
이처럼 공백이 존재하는 상태에서 단순한 text() 비교만으로는 원하는 요소를 찾을 수 없습니다.
normalize-space 함수 적용하기
이제 normalize-space 함수를 활용한 XPath 표현식을 작성해 보겠습니다. 올바른 표현식은 다음과 같습니다.
//strong[normalize-space(text())='JAVA BASICS']
실행 결과
위 표현식을 콘솔에서 $x("//strong[normalize-space(text())='JAVA BASICS']")와 같이 실행하면, 이번에는 일치하는 요소가 정상적으로 반환되며 길이가 1(length – 1)로 표시됩니다.
반환된 결과 위에 마우스 커서를 올려보면, 페이지에서 'JAVA BASICS' 텍스트가 하이라이트되어 해당 요소가 정확히 식별되었음을 시각적으로 확인할 수 있습니다.