CSS 셀렉터

CSS 셀렉터(CSS selector)는 스타일시트가 어떤 요소에 규칙을 적용할지 결정할 때 쓰는 바로 그 패턴입니다. 테스트 도구는 이를 요소 탐색에 재사용합니다. Selenium은 By.cssSelector, Playwright는 page.locator(), Cypress는 cy.get()을 통해 사용합니다. 셀렉터는 브라우저가 네이티브로 평가하며, 같은 의미의 XPath보다 대개 짧고, 대부분의 프런트엔드 개발자가 읽을 수 있습니다.

예시

#email                          id
.alert.alert-error              element with both classes
button[type="submit"]           tag plus attribute
[data-testid="checkout"]        dedicated test attribute
form.login > button             direct child
ul.results li:nth-child(2)      second list item
a[href^="/invoices/"]           attribute starts with
input:not([disabled])           negation

driver.findElement(By.cssSelector("[data-testid='checkout']")).click();

await page.locator('[data-testid="checkout"]').click();

XPath와의 차이

• 텍스트 매칭. 표준 CSS는 텍스트 내용으로 선택할 수 없습니다. XPath는 가능하며, Playwright는 자체 텍스트 엔진(getByText, 그리고 page.locator() 안에서 쓰는 :has-text() 가상 클래스)을 제공하지만, 이는 CSS가 아니라 Playwright 확장 기능입니다.
• 방향. 오랫동안 CSS는 아래 방향으로만 탐색할 수 있었습니다. 현재 브라우저에서 지원되는 :has() 가상 클래스로 자식을 기준으로 부모를 찾을 수 있게 되면서(tr:has(td.overdue)) 격차가 상당 부분 좁혀졌습니다.
• 가독성. id, 클래스, 속성 매칭에서는 CSS가 더 짧고 명확합니다.

흔한 실수

• 스타일용 클래스를 로케이터로 쓰기. .btn-blue는 디자인이 바뀌면 함께 바뀝니다. 유틸리티 클래스 기반 프레임워크에서는 더 심합니다.
• 긴 구조적 체인. div > div > div:nth-child(3) span은 레이아웃을 그대로 담고 있어서, 래퍼 요소가 하나만 추가되어도 깨집니다.
• :nth-child와 :nth-of-type 혼동. li:nth-child(2)는 “두 번째 li“가 아니라 “부모의 두 번째 자식인 li“를 뜻합니다.

마크업을 직접 제어할 수 있다면 개발자와 합의한 data-testid 속성이 가장 안정적인 CSS 로케이터입니다. 그렇지 않다면 프레임워크가 제공하는 역할(role) 기반 로케이터를 우선 사용하세요.