CSS 표현식 작성 방법 총정리: 클래스, ID, 태그·속성 셀렉터

Selenium 자동화 테스트에서 웹 요소를 정확하게 찾으려면 상황에 맞는 CSS 셀렉터(표현식)를 활용하는 것이 중요합니다. CSS 표현식을 만드는 대표적인 방법은 크게 세 가지로 나눌 수 있습니다.

1. 클래스(Class)를 셀렉터로 사용하기

마침표(.) 뒤에 클래스명을 붙이는 방식으로, 해당 클래스가 적용된 모든 웹 요소를 한 번에 선택합니다.

표기법: .classname
예시: .gsc-input → gsc-input 클래스를 가진 모든 요소 선택

2. ID를 셀렉터로 사용하기

해시(#) 기호 뒤에 ID 값을 붙이는 방식으로, 문서 내에서 고유한 하나의 웹 요소를 선택합니다.

표기법: #ID
예시: #gsc-i-id1 → 해당 ID를 가진 단일 요소 선택

3. 태그명과 속성값 조합을 셀렉터로 사용하기

HTML 태그명과 속성-값 쌍을 함께 지정하는 방식으로, 보다 구체적인 조건의 웹 요소를 정확하게 찾아낼 수 있습니다.

표기법: tagname[attribute='value']
예시: input[name='search'] → name 속성값이 search인 input 요소 선택

Selenium(Java) 예제 코드

아래 예제는 Tutorialspoint 홈페이지에서 ChromeDriver를 이용해 각각의 CSS 셀렉터로 검색 입력창을 찾고, 키워드 "Selenium"을 입력한 뒤 브라우저를 종료하는 코드입니다.

예제 1 — 클래스 셀렉터(.) 활용

import org.openqa.selenium.By;
import org.openqa.selenium.Keys;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

public class CssExpression {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "C:\\Users\\ghs6kor\\Desktop\\Java\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        String url = "https://www.tutorialspoint.com/index.htm";
        driver.get(url);
        driver.manage().timeouts().implicitlyWait(12, TimeUnit.SECONDS);
        // 클래스와 마침표(.)를 이용한 CSS 표현식
        driver.findElement(By.cssSelector(".gsc-input")).sendKeys("Selenium");
        driver.close();
    }
}

예제 2 — ID 셀렉터(#) 활용

import org.openqa.selenium.By;
import org.openqa.selenium.Keys;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

public class CssId {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "C:\\Users\\ghs6kor\\Desktop\\Java\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        String url = "https://www.tutorialspoint.com/index.htm";
        driver.get(url);
        driver.manage().timeouts().implicitlyWait(12, TimeUnit.SECONDS);
        // ID와 해시(#)를 이용한 CSS 표현식
        driver.findElement(By.cssSelector("#gsc-i-id1")).sendKeys("Selenium");
        driver.close();
    }
}

예제 3 — 태그명 + 속성 조합 활용

import org.openqa.selenium.By;
import org.openqa.selenium.Keys;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

public class CssTagExp {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "C:\\Users\\ghs6kor\\Desktop\\Java\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        String url = "https://www.tutorialspoint.com/index.htm";
        driver.get(url);
        driver.manage().timeouts().implicitlyWait(12, TimeUnit.SECONDS);
        // 태그명과 속성 조합을 이용한 CSS 표현식
        driver.findElement(By.cssSelector("input[name='search']")).sendKeys("Selenium");
        driver.close();
    }
}

클래스 셀렉터는 여러 요소를 한꺼번에 다룰 때, ID 셀렉터는 고유한 요소 하나를 빠르게 찾을 때, 태그명+속성 조합은 ID나 클래스가 없는 요소를 찾을 때 유용합니다. 상황에 맞는 셀렉터를 선택하면 테스트 스크립트의 안정성과 가독성이 크게 향상됩니다.