Selenium 엘리먼트 요소 값 가져오기 By 지정자, java

셀레니움에서 웹 자동화를 하면서, 엘리먼트를 찾기위해 findElement 함수를 사용한다. 이제 findElement 안에는 HTML element의 요소값을 인자로 주어야 한다. 이때, HTML element Locator 를 사용하여 요소 값을 가져오는데, 이것은 By 클래스의 인스턴스 쿼리 객체를 통해 이루어진다.

 

by-class

By 지정자?

By Locator 라고도 한다. findElement(), findElements() 메서드는 By지정자를 인자로 주어 웹 엘리먼트를 가져온다.

지정자의 종류는 8가지가 있다. ID, Name, ClassName, LinkText, LinkText, LinkText의 일부분, XPath, CSS 선택자이다.

이제 각 지정자의 사용법을 알아보자.

 

 

 

By.id()와 By.name()

- By.id() : 웹 엘리먼트에 ID 속성이 있으면 각 속성은 고유하게 식별할 수 있다.

ID는 개발자가 직접 작성하거나 앱에서 동적으로 생성한다. 동적으로 생성하는 ID는 시간이 지나면 바뀌기도 한다. 동적ID는 새로고침 등의 액션에도 바뀔 수 있다.

 

어떤 웹 페이지에서 HTML 요소 전체를 가지고 와보자.

<input id="query" name="query" type="text" title="검색어 입력" maxlength="255" class="input_text" tabindex="1"
 accesskey="s" style="ime-mode:active;" autocomplete="off" placeholder="검색어를 입력해 주세요." onclick="document
.getElementById('fbm').value=1;" value="" data-atcmp-element="">

위 코드에서 버튼의 id는 ‘query’이다. 위 코드에서 버튼의 name은 ‘query’이다.

 

 

 

간단한 예제로, 네이버 홈페이지에서 검색창을 찾아서 '가방'을 검색하는 테스트 코드를 작성해보았다.

 

public void byIdLocatorExample() {

        WebElement searchBox = driver.findElement(By.id("query"));

        searchBox.sendKeys("가방");
        searchBox.submit();

        assertThat(driver.getTitle())
                .isEqualTo("가방 : 네이버 통합검색");
 }

 

 

By.className()

보통 HTML 엘리먼트에는 사용자의 시선을 끌기위한 스타일이 적용되어 있다. 엘리먼트에 스타일을 적용하기 위해, 직접 엘리먼트 태그에 스타일을 선언하거나, CSS 파일을 별도 파일로 분리해 class 속성으로 엘리먼트가 스타일을 참조하도록 한다.

예를 들어, 아래와 같이 버튼의 style 속성을 CSS 파일에 선언한다고 하자.

.search-button{
	width : 50px;
	height : 50px;
}

 

선언한 스타일은 다음과 같이 버튼 엘리먼트에 적용된다.

- 엘리먼트는 여러 개의 class 속성을 가질 수 있다.

- 아래의 코드는 ‘button’과 ‘search-button’ 두 가지 속성을 가진다.

 

둘 중에서 유일한 식별자로 사용 가능한 쪽을 선택해서 사용하자.

<button type="submit" title="Search" class="button search-button"><span><span>Search</span></span></button>

 

 

위에 설명한 내용과 합쳐서, 웹드라이버가 클래스 이름으로 검색 버튼을 찾아 클릭하도록 하는 예제를 작성해보았다.

public void byClassNameLocatorExample() {

        WebElement searchBox = driver.findElement(By.id("query"));
        searchBox.sendKeys("가방");

        WebElement searchButton =
                driver.findElement(By.className("btn_submit"));
        searchButton.click();

        assertThat(driver.getTitle())
                .isEqualTo("가방 : 네이버 통합검색");
}

 

 

By.linkText()와 By.partialLinkText()

By.linkText 지정자는 HTML 링크를 식별할 때만 사용 한다.

네이버 메인 페이지의 '뉴스' 엘리먼트 요소를 카피해보자.

naver-news

<a href="https://news.naver.com/" class="nav" data-clk="svc.news">뉴스</a>

 

By.linkText 지정 방식은 a 태그의 텍스트('뉴스')로 웹 엘리먼트를 식별한다.

네이버 뉴스에 방문해서 타이틀이 맞는지 비교하는 코드를 작성해보았다.

public void byLinkTextLocatorExample() {

        WebElement myAccountLink =
                driver.findElement(By.linkText("뉴스"));

        myAccountLink.click();

        assertThat(driver.getTitle())
                .isEqualTo("네이버 뉴스");
 }

 

 

By.partialLinkText 지정자는 링크 텍스트의 일부 단어만 알고 있을때, 엘리먼트를 식별할 수 있다.

네이버 메인의 '쇼핑LIVE'에 진입하는 테스트 코드를 작성해 보았다.

public void byPartialLinkTextLocatorExample() {

        WebElement orderAndReturns =
                driver.findElement(By.partialLinkText("쇼핑L"));

        orderAndReturns.click();

        assertThat(driver.getTitle())
                .isEqualTo("네이버 쇼핑라이브");
 }

 

 

 

By.tagName()

tagName은 태그 이름으로 엘리먼트를 지정하는 메서드이다.

 

예를 들어 홈페이지에서 button 태그명으로 엘리먼트를 찾는 것인데, 홈페이지에는 여러 개의 버튼이 있기때문에 여러 개의 버튼이 반환된다. 원래 이 경우에는 findElements() 를 사용하는 것이 바람직하다.

 

네이버에서 네이버 개발자 센터로 이동한 다음 > 모든 a 태그의 링크 텍스트를 출력해보자.

public void byTagNameLocatorExample() {

    	WebElement orderAndReturns =
                driver.findElement(By.linkText("네이버 개발자 센터"));
        orderAndReturns.click();

        //a 태그를 가진 엘리먼트를 찾는다.
        List<WebElement> links = driver.findElements(By.tagName("a"));

        System.out.println("Found links:" + links.size());

        // Java 8 Streams API로 필터링해서 링크 텍스트가 있는 링크의 링크 텍스트만 출력한다.
        links.stream()
                .filter(elem -> elem.getText().length() > 0)
                .forEach(elem -> System.out.println(elem.getText()));
        
 }

- 그냥 네이버 메인페이지에서 a 태그를 찾는 코드는 오류가 발생한다.

org.openqa.selenium.StaleElementReferenceException: stale element reference: element is not attached to the page document (Session info: chrome=105.0.5195.125)

ㄴ 페이지를 너무 빨리 불러와서 인 것 같은데, 해결방법은 따로 알아보자.

 

 

By.xpath()

xpath는 XML path의 줄임말로 XML 문서를 검색하는 쿼리 용어이다.

 

- Xpath 문법

ㄴ 루트 엘리먼트: //

ㄴ div 엘리먼트: //div

ㄴ div 엘리먼트 안에 있는 link 태그 : //div/a

ㄴ 태그 안에 있는 엘리먼트 모두 지정 : //div/*

ㄴ 루트부터 자식 엘리먼트로 내려오는 div 엘리먼트 지정 : //*/*/div

ㄴ 특정 엘리먼트를 식별 : //*/div/a[@id=’ attrValue’] (속성 값을 사용)

ㄴ 현재 엘리먼트 부터 이어서 식별 : ./div/a/div

 

 

바로 예제를 작성해보자. 네이버 검색 창을 xpath로 가져와서 '가방'을 검색하는 예제코드를 작성해보았다.

public void byXPathLocatorExample() {

        WebElement searchBox =
                driver.findElement(By.xpath("//*[@id=\"query\"]"));

        searchBox.sendKeys("가방");
        searchBox.submit();

        assertThat(driver.getTitle())
                .isEqualTo("가방 : 네이버 통합검색");
 }

엘리먼트 식별이 필요할 때마다 웹드라이버는 전체 페이지를 스캔하는데, 이런 과정은 매우 비효율 적이다. 즉, XPath를 자주 사용하면 테스트는 점점 느려진다.

 

 

 

By.cssSelector()

By.cssSelector() 메서드는 By.xpath()와 사용법이 비슷하지만, 속도가 더 빠르다.

 

- 자주 사용하는 문법

ㄴ id가 flrs 인 div 엘리먼트 : #flrs

ㄴ 찾아낸 div의 자식 엘리먼트에서, anchor 엘리먼트를 식별 : #flrs > a

ㄴ 다시, 속성 값으로 anchor 엘리먼트를 식별 : #flrs > a[a[herf=”/intl/en/about.html”]]

 

 

위의 XPath를 사용한 예제를 cssSelector로 지정자를 바꾸어 실행해보자.

public void byCssSelectorLocatorExample() {

        WebElement searchBox =
                driver.findElement(By.cssSelector("#query"));

        searchBox.sendKeys("가방");
        searchBox.submit();

        assertThat(driver.getTitle())
                .isEqualTo("가방 : 네이버 통합검색");
 }

 

 

 

 

 

 

 

 

---

전체 코드를 실행해보자.

이클립스 프로젝트에 TestNG class 생성한 후, 코드를 작성해보자.

 

package com.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.SourceType;
import org.testng.annotations.*;

import javax.xml.bind.SchemaOutputResolver;
import java.util.List;

import static org.assertj.core.api.AssertionsForClassTypes.assertThat;


public class NaverLocationTest {

    WebDriver driver;

    @BeforeClass
    public void setup() {

        System.setProperty("webdriver.chrome.driver",
                "./src/test/resources/drivers/chromedriver");
        driver = new ChromeDriver();

    }

    @BeforeMethod
    public void navigate() {

        driver.get("https://www.naver.com/");

    }

    @Test
    public void byIdLocatorExample() {

        WebElement searchBox = driver.findElement(By.id("query"));

        searchBox.sendKeys("가방");
        searchBox.submit();

        assertThat(driver.getTitle())
                .isEqualTo("가방 : 네이버 통합검색");
    }

    @Test
    public void byClassNameLocatorExample() {

        WebElement searchBox = driver.findElement(By.id("query"));
        searchBox.sendKeys("가방");

        WebElement searchButton =
                driver.findElement(By.className("btn_submit"));
        searchButton.click();

        assertThat(driver.getTitle())
                .isEqualTo("가방 : 네이버 통합검색");
    }

    @Test
    public void byLinkTextLocatorExample() {

        WebElement myAccountLink =
                driver.findElement(By.linkText("뉴스"));

        myAccountLink.click();

        assertThat(driver.getTitle())
                .isEqualTo("네이버 뉴스");
    }

    @Test
    public void byPartialLinkTextLocatorExample() {

        WebElement orderAndReturns =
                driver.findElement(By.partialLinkText("쇼핑L"));

        orderAndReturns.click();

        assertThat(driver.getTitle())
                .isEqualTo("네이버 쇼핑라이브");
    }

    @Test
    public void byTagNameLocatorExample() {
    	
    	WebElement orderAndReturns =
                driver.findElement(By.linkText("네이버 개발자 센터"));
        orderAndReturns.click();

        //a 태그를 가진 엘리먼트를 찾는다.
        List<WebElement> links = driver.findElements(By.tagName("a"));

        System.out.println("Found links:" + links.size());

        // Java 8 Streams API로 필터링해서 링크 텍스트가 있는 링크의 링크 텍스트만 출력한다.
        links.stream()
                .filter(elem -> elem.getText().length() > 0)
                .forEach(elem -> System.out.println(elem.getText()));
        
    }

    @Test
    public void byXPathLocatorExample() {

        WebElement searchBox =
                driver.findElement(By.xpath("//*[@id=\"query\"]"));

        searchBox.sendKeys("가방");
        searchBox.submit();

        assertThat(driver.getTitle())
                .isEqualTo("가방 : 네이버 통합검색");
    }

    @Test
    public void byCssSelectorLocatorExample() {

        WebElement searchBox =
                driver.findElement(By.cssSelector("#query"));

        searchBox.sendKeys("가방");
        searchBox.submit();

        assertThat(driver.getTitle())
                .isEqualTo("가방 : 네이버 통합검색");
    }

    @AfterClass
    public void tearDown() {
        driver.quit();
    }
}

 

 

 

pom.xml 파일에 의존성을 추가한다.

<dependency>
    <groupId>javax.xml.bind</groupId>
    <artifactId>jaxb-api</artifactId>
    <version>2.3.1</version>
</dependency>
<dependency>
    <groupId>org.assertj</groupId>
    <artifactId>assertj-core</artifactId>
    <version>${assertj.version}</version>
</dependency>

 

 

Test All을 누르고, 실행 결과를 확인해보자. 7개 메서드가 모두 PASS 했다.

all-pass

 

 

 

 

 

 

---

함께 보면 좋은 글

Selenium 웹 엘리먼트 찾기 FindElement , java