[셀레니움] HTML 원소 위치 찾기 (locating elements)

 

이번 포스팅에서는 셀레니움과 웹 드라이버를 사용하여 웹 페이지 상에서 특정 HTML 태그(Tag)를 찾는 법을 소개하도록 하겠다. 

 

필수 준비믈로는 selenium 라이브러리와 웹 드라이버가 설치 되어있어야 실습이 가능하다. 이전 포스팅에 자세히 설명해 두었으니 필요하면 참고 하길 바란다.

 

HTML 원소 위치 찾기

웹 드라이버를 사용할 때 배우는 가장 기본적인 기술 중 하나는 웹 페이지에서 특정 원소를 찾는 방법이다. 웹 드라이버는 ID 속성으로 요소를 찾을 수있는 내장 선택 기능을 제공하고 있다.

 

WebElement cheese = driver.findElement(By.id("cheese"));  

 

위 예제에서 볼 수 있듯이 웹 드라이에서 원소의 위치는 웹드라이버 인스턴스 객체를 사용하여 찾을 수 있다. findElement(By) 메서드는 셀레니움의 가장 기본이 되는 객체중 하나인 WebElement 객체를 반환한다.

• WebDriver : 웹 브라우저를 표현하는 객체
• WebElement : DOM 노드의 특정한 부분(에를 들면 link 혹은 input 필드를 표현하는 HTML 태그)를 표현하는 객체

 

WebElement를 찾았다면 그 객체를 사용하여 하위 DOM 노드를 찾을 수있다. 즉 전체 DOM 노드에서 파싱하는 것이아니라 현재 찾은 노드의 위치에서 검색을 시작하기 때문에 검색해야하는 범위를 좁힐 수 있다.

 

WebElement cheese = driver.findElement(By.id("cheese"));
WebElement cheddar = cheese.findElement(By.id("cheddar"));

 

WebDriver와 WebElement 타입 둘다 SearchContext 인터페이스를 구현하고 있기때문에 위와같이 사용 할 수 있다. WebDriver는 역할 기반 인터페이스로 알려져 있다. 역할 기반 인터페이스를 통해 특정 드라이버 구현이 특정한 드라이버 구현체가 특정한 기능을 지원하는지 판단 할 수 있다. 이러한 인터페이스는 명확하게 정의되어 있으며 단 하나의 책임(single role of responsibility)만을 고수하려고 한다. 

 

따라서 위에서 사용된 By 인터페이스 역시 수많은 위치 찾기 전략(locator strategies)을 지원하고 있다. 중첩 검색은 브라우저에 두개의 별도 명령을 실행해야 하기 때문에 가장 효과적인 "치즈 위치 찾기 전략"이 아닐 수 있다. 위에서 벌어진일은 먼저 DOM 노두에서 ID가 "cheese"인 원소를 검색한 다음 cheese 하위 DOM 노드로 검색 범위를 좁혀서 "cheddar" 를 검색한 것이다.

 

성능을 향샹시키기 위해서는 보다더 구체적인 "위치 탐색자"를 사용해야 한다. WebDriver는 CSS 위치 탐색자를 사용해서 원소 검색을 지원한다. 위 예제의 두 개의 위치 찾기 로직을 하나의 검색으로 만들 수 있다.

driver.findElement(By.cssSelector("#cheese #cheddar"));

 

위 예제는 한번의 탐색을 통해서 우리가 원하는 원소를 찾는다는 것을 알 수있다. 약간의 성능이 향상되었고 더 좋아보인다. 

 

하자만 늘 그렇듯 언제나 트레이드 오프가 발생한다. 원소의 ID에 비해서 웹페이지를 꾸미는 css는 비교적 자주 변경이 된다는 점이다.

 

ID는 한번 정하면 거의 불변에 가깝다는 장점이 있으므로 css를 대상으로 원소 찾기 전략을 사용할때는 늘 언제든 바뀔 수 있다는 것을 염두해두어야한다. 최악의 경우에는 코드를 새로 만들어야 할 수도 있기 때문이다.

 

다음 포스팅에서는 여러 원소를 찾는 방법에 대해서 기술해보도록 하겠다.