답변.

질문의 역사:

React, Angular, Vue 기반의 현대적인 단일 페이지 애플리케이션(SPA)의 출현은 UI 테스트 자동화에서 새로운 문제를 야기했습니다: 데이터의 비동기 로딩, 복잡한 동적 요소, 클라이언트 측 라우팅. 기존의 접근 방식(예: 선택자나 정적 렌더링된 DOM)은 이러한 애플리케이션에 대해 신뢰할 수 없게 되었습니다.

문제:

테스트는 종종 로딩 지연, 애니메이션 및 동적 요소 변화로 인해 "실패"합니다.
선택자의 불안정성(동적 ID, 클래스, DOM 구조의 변화).
프론트엔드의 변화 이후 테스트 유지 관리의 복잡성.

해결책:

요소의 등장 또는 변화를 기다리기 위한 명시적 대기(explicit waits) 사용:

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

wait = WebDriverWait(driver, 20)
my_element = wait.until(EC.visibility_of_element_located((By.ID, 'dynamic_id')))

더 안정적인 로케이터(데이터-테스트 ID, 고유한 속성) 사용.
테스트 인프라 구성: API 응답 모킹, 특수 테스트 헬퍼 사용.
프론트엔드에 특수 후크 또는 안정적인 테스트 ID 포함.

주요 특징:

안정적인 로케이터와 명시적 대기에 중점
API 또는 서비스 이벤트를 통한 UI 상태 검증
'레이어별 자동화': 단위 + 통합 + E2E

트릭 질문.

SPA 테스트에서 XPATH 또는 CSS 로케이터에만 의존할 수 있나요?

아니요. XPATH/CSS 유형의 로케이터는 DOM의 어떤 변경에도 쉽게 깨지므로, 안정적인 데이터-* 속성이나 테스트 ID를 사용하는 것이 좋습니다.

Selenium/WebDriverWait가 비동기 문제를 모두 해결하나요?

아니요. WebDriverWait는 지연으로 인한 실패를 피하는 데 도움이 되지만 복잡한 UI의 올바른 로딩과 상태를 보장하지는 않습니다. 추가 검증, API 모킹 및 UI 상태 작업이 필요합니다.

UI의 적절한 로딩 확인을 위한 단지 보이는 요소의 존재를 검증하는 것으로 충분한가요?

아니요. 요소가 표시되더라도 "빈" 로딩을 성공적으로 착각할 수 있으며, 예상되는 데이터나 상태가 없을 수 있습니다. 내용과 값의 검증이 필요합니다.

일반적인 실수 및 안티 패턴

동적이거나 불안정한 로케이터 사용
묵시적 대기(sleep 대신 명시적 대기 사용)
요소의 존재만 검사하고 그 값/내용 검사를 하지 않음
API 응답/서비스 모킹 부족

실제 사례

부정적인 케이스

자동 테스트가 일정에 따라 실행되고, XPath 선택기와 sleep 지연을 사용합니다. UI 업데이트 후 절반의 테스트가 요소의 부재 또는 새로운 ID/클래스로의 이동으로 실패합니다.

장점:

빠른 자동 테스트 작성
구조의 단순성

단점:

불안정성(흔들리는 테스트)
각 릴리스를 지원하는 데의 어려움

긍정적인 케이스

UI에 data-testid가 삽입되고, 테스트가 명시적 대기를 사용하고 특별한 테스트 후크를 활용합니다. 모든 네트워크 응답이 모킹되고, 테스트는 존재뿐만 아니라 요소의 내용도 검증합니다.