로케이터(Locator)

로케이터(Locator)는 테스트가 브라우저 드라이버에게 어떤 요소를 조작할지 알려 주는 방법입니다. CSS 셀렉터, XPath 식, 요소 id일 수도 있고, “접근 가능한 이름(accessible name)이 Sign in인 버튼”처럼 더 높은 수준의 쿼리일 수도 있습니다. 로케이터를 잘 고르는 것이 UI 테스트 스위트가 화면 개편을 견딜 수 있는지를 좌우하는 가장 큰 요인입니다.

예시

같은 버튼을 세 가지 방법으로 찾는 코드입니다.

// Playwright: user-facing, preferred
page.getByRole('button', { name: 'Sign in' });

// Playwright: dedicated test attribute
page.getByTestId('login-submit');

// Playwright: CSS, tied to markup structure
page.locator('form.login > button.btn-primary');

// Selenium 4
driver.findElement(By.id("login-submit"));
driver.findElement(By.cssSelector("[data-testid='login-submit']"));

좋은 로케이터의 조건

• 사용자가 보는 것을 기술합니다. 역할, 레이블, 표시 텍스트는 사용자에게 보이는 동작이 바뀔 때만 바뀌며, 그때는 어차피 테스트도 수정해야 합니다.
• 유일합니다. Playwright 로케이터는 엄격(strict) 모드로 동작하므로, 요소 두 개와 일치하는 로케이터에 액션을 실행하면 첫 번째 요소를 조용히 고르지 않고 예외를 던집니다.
• 레이아웃에 의존하지 않습니다. div > div:nth-child(3) > span 같은 긴 경로는 래퍼 요소 하나만 추가되어도 깨집니다.
• 빌드가 바뀌어도 안정적입니다. CSS-in-JS 도구가 생성하는 클래스 이름이나 자동 증가하는 id는 배포할 때마다 바뀝니다.

일반적인 우선순위는 역할과 접근 가능한 이름, 그다음 레이블이나 placeholder, 그다음 개발자와 합의한 data-testid, 그다음 CSS이며, XPath는 최후의 수단입니다.

지연(lazy) 평가와 즉시(eager) 평가

Playwright의 Locator는 지연 평가됩니다. 쿼리만 저장해 두었다가 액션이나 어설션을 실행할 때마다 다시 요소를 찾기 때문에 stale 상태가 될 수 없습니다. 반면 Selenium의 findElement는 즉시 평가됩니다. 호출한 순간 존재하던 노드를 가리키는 WebElement 참조를 반환하므로, DOM이 다시 렌더링되면 그 참조가 stale 상태가 될 수 있습니다. 그래서 Selenium 코드에서는 보통 By 객체를 저장해 두고 필요할 때 요소를 찾습니다.