Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

Selenium에서 CSS 선택기를 로케이터로 활용하는 방법 완벽 가이드

Selenium WebDriver에서는 CSS 선택기(CSS Selector)를 로케이터로 사용하여 웹 요소를 효율적으로 찾을 수 있습니다. CSS 선택기는 XPath보다 속도가 빠르고 가독성이 뛰어나 많은 자동화 프로젝트에서 선호되는 방식입니다.

CSS 선택기의 기본 문법

CSS 표현식을 만드는 일반적인 형태는 다음과 같습니다.

tagname[attribute='value']

즉, 태그 이름과 속성, 그리고 그 속성값을 조합하여 원하는 요소를 정확하게 지정할 수 있습니다.

ID 속성 활용하기

ID를 사용할 때의 CSS 표현식 문법은 tagname#id 형태입니다. 예를 들어 input#txt-loc이라면, input은 태그 이름이고 txt-loc은 id 속성값을 의미합니다.

클래스(Class) 속성 활용하기

클래스 이름을 사용할 때는 tagname.class 형태로 작성합니다. 예를 들어 input.txt-cls라면, input이 태그 이름이고 txt-cls가 class 속성값입니다.

자식 요소 위치 지정하기

어떤 웹 요소(부모)에 n개의 자식 요소가 있을 때, 특정 순번의 자식 요소를 찾으려면 nth-of-type(n) 문법을 사용합니다.

Selenium에서 CSS 선택기를 로케이터로 활용하는 방법 완벽 가이드

위 HTML 구조에서 부모 요소인 ul의 네 번째 li, 즉 'Questions and Answers'라는 텍스트를 가진 앵커(anchor) 요소를 찾으려면 다음과 같이 작성합니다.

ul.reading li:nth-of-type(4)

마찬가지로 마지막 자식 요소를 찾으려면 아래와 같이 사용할 수 있습니다.

ul.reading li:last-child

동적 속성값 처리하기

속성값이 동적으로 변경되는 경우에도 CSS 선택기를 활용하면 유연하게 대응할 수 있습니다.

특정 텍스트로 시작하는 경우 (^=)

^= 기호는 속성값이 특정 텍스트로 시작하는 요소를 찾습니다.

input[name^='qa1']

위 표현식은 name 속성값이 qa1로 시작하는 input 태그를 의미합니다.

특정 텍스트로 끝나는 경우 ($=)

$= 기호는 속성값이 특정 텍스트로 끝나는 요소를 찾습니다.

input[class$='loc']

위 표현식은 class 속성값이 loc으로 끝나는 input 태그를 의미합니다.

특정 문자열을 포함하는 경우 (*=)

*= 기호는 속성값에 특정 문자열이 포함된 요소를 찾습니다.

input[name*='sub']

위 표현식은 name 속성값에 sub라는 부분 문자열을 포함하는 input 태그를 의미합니다.

실전 코드 예제

아래는 Selenium WebDriver에서 CSS 선택기를 사용해 LinkedIn 페이지의 입력 필드를 찾고 값을 입력한 후, 해당 속성값을 출력하는 Java 예제 코드입니다.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import java.util.concurrent.TimeUnit;

public class CSSLocator {
    public static void main(String[] args) {
        System.setProperty("webdriver.gecko.driver",
        "C:\\Users\\ghs6kor\\Desktop\\Java\\geckodriver.exe");
        WebDriver driver = new FirefoxDriver();

        // 암시적 대기 설정
        driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);

        // URL 접속
        driver.get("https://www.linkedin.com/");

        // CSS 선택기로 요소 식별
        WebElement m = driver.
        findElement(By.cssSelector("input[id='session_key']"));

        // 텍스트 입력
        m.sendKeys("Java");
        String s = m.getAttribute("value");
        System.out.println("Attribute value: " + s);

        // 브라우저 종료
        driver.close();
    }
}

마무리

CSS 선택기는 Selenium 자동화 테스트에서 요소를 빠르고 정확하게 찾을 수 있는 강력한 도구입니다. ID와 클래스 기반의 기본 문법부터 nth-of-type, 그리고 동적 속성값을 다루는 ^=, $=, *= 연산자까지 익혀두면 복잡한 웹 페이지에서도 안정적으로 로케이터를 작성할 수 있습니다.