[셀레니움] DOM 여러 원소 찾기 (Locating multiple elements)

 

 

이전 포스팅에서 하나의 원소 위치를 찾는 방법에 대해서 알아보았다. 이번 포스팅에서는 여러 원소를 찾는 방법에 대해서 알아보도록 하겠다. 하나의 원소 찾는 방법부터 보고 싶다면 이전 포스팅을 참고하길 바란다.

 

여러 원소 위치 찾기

이전 글에 이어서 치즈를 찾는 예제로 시작해보겠다. 웹 브라우저 화면에는 우리가 제일 좋아하는 치즈의 순서 목록을 가지고 있을 가능성이 있다.

 

<ol id=cheese>
 <li id=cheddar>…
 <li id=brie>…
 <li id=rochefort>…
 <li id=camembert>…
</ul>

 

치즈를 많이 가져올 수 있으면 많이 가져오는 것이 의심할 여지 없이 좋은 방법이다. 각 치즈를 하나씩 가져오는 하나의 원소 위치 찾는 방법을 사용하면 조금 번거로울 수 있다. 그렇기 때문에 한 번에 많은 치즈를 가져올 수 있는 findElements(By)라는 고급 방법을 사용 가능한 것이다. 이 방법은 웹 원소의 컬렉션을 반환한다.

 

하나의 원소만 발견되면 하나를 담고 있는 컬렉션을 계속 반환한다. 반대로 하나의 원소도 위치 지정자와 일치하는 요소가 없으면 빈 컬렉션을 반환한다.

 

List<WebElement> muchoCheese = driver.findElements(By.cssSelector("#cheese li"));

 

원소 선택 전략

 

Locator (위치 지정자)	Description (설명)
class name	class 이름이 검색하고자하는 값에 포함되어있으면 해당 원소를 반환 (여러 class의 이름은 허용되지 않음)
css selector	Css 선택자와 매칭되는 원소를 반환
id	ID 속성값이 일치하는 원소를 반환
name	NAME 속성값이 일치하는 원소를 반환
link text	웹상에 보이는 링크 텍스트와 일치하는 앵커 원소를 반환
partial link text	웹상에 보이는 링크 텍스트에 포함되는 앵커 원소를 반환. 만약 여러 링크가 매칭되면 첫번째로 발견한 원소를 선택함.
tag name	검색 값과 일치하는 태그 명을 가진 원소를 반환
xpath	XPATH식과 일치하는 원소를 반환

 

셀렉터 사용 팁

일반적으로는 HTML ID는 사용 가능하고 고유성이 보장되고 일관적으로 예측 가능하기 때문에 ID는 웹 페이지에서 원소를 찾기 위해 선호하는 방법이다. ID 기반으로 찾으면 복잡한 DOM을 순회하는 비용을 줄일 수가 있기 때문에 매우 빠르게 작동하는 경향이 있다.

 

만약 고유한 ID값을 사용할 수 없는 경우에는 잘 작성된 CSS 선택자를 사용하서 원소의 위치를 찾는 것을 선호한다. XPath는 CSS 선택자만큼 잘 작동하지만 구문이 복잡하고 자주 디버깅하는데 애로사항이 꽃이 핀다.

 

XPath 선택자는 매우 유연하고 무궁무진한 방법으로 선택할 수 있지만 일반적으로 모든 브라우저에서 일관성 있게 작동한다고 보장할 수 없다. 브라우저 공급업체 (구글, 마이크로소프트, 애플, 모질라 등)에 의해 서능 테스트를 받지 않았기 때문에 느리게 작동하는 경향이 있다.

 

 

링크 텍스트 및 링크 부분 텍스트를 기반으로 한 선택 전략은 링크 원소(<a href..> 등)에서만 작동한다는 점이 가장 큰 단점이다. 또한 WebDriver에서 내부적으로 Xpath 선택자로 변환한 다음 작동한다.

 

태그명은 원소를 찾는 위험한 방법이 될 여지가 있다. 웹 페이지에서는 종종 동일한 태그명을 사용하는 여러 원소가 존재하기 마련이다. 따라서 하나의 원소가 아니라 여러 원소, 즉 원소 컬렉션을 반환하는 findElements(By) 메서드를 호출할 때 보다 유용하게 사용할 수 있다.

 

위치 지정자(Locator)를 가능한 작고 읽기 쉬벡 유지하는 것이 좋다. WebDriver에게 DOM 구조를 순회하라고 요청하는 것은 비싼 비용이 드는 작업이기 때문에 가능한 검색 범위를 좁히면 좁힐수록 효율적이고 좋다.