Playwright로 크로스 브라우저 E2E 테스트하기

Playwright의 강점은 브라우저를 조작할 수 있다는 사실만이 아닙니다. trace, screenshot, video, locator API를 통해 **브라우저 자동화와 진단 가능성을 함께 제공한다**는 점이 핵심입니다.

그래서 Playwright는 강력하지만, 스위트가 집중력을 잃으면 그대로 비싸고 시끄러운 E2E 덩어리가 되기 쉽습니다.

브라우저 수준 증명이 필요한 흐름에만 써야 합니다

Playwright가 특히 강한 대상은 다음입니다.

중요한 로그인과 세션 흐름
권한 민감 여정
실제 브라우저에서 확인해야 하는 UI 행동
브라우저 차이가 영향을 줄 수 있는 핵심 사용자 경로

반대로 단위, 통합, 계약 테스트가 더 싸게 잡을 수 있는 버그를 대신 떠안기 시작하면 전략이 약해집니다.

Locator 전략이 자동화 기능보다 더 중요합니다

안정적인 테스트는 안정적인 locator에서 시작합니다.

실무적으로 좋은 우선순위는 보통 다음과 같습니다.

role, label 같은 접근성 기반 locator
필요할 때 안정적인 text
의미 기반 query가 부족할 때 test ID
CSS selector는 마지막 수단

selector 전략이 약하면 Playwright의 기술적 강점도 brittle함을 막아주지 못합니다.

크로스 브라우저 커버리지는 범위를 조절해야 합니다

모든 테스트를 모든 브라우저에서 돌리는 것은 겉보기에만 철저하고, 실제로는 비싼 노이즈가 되기 쉽습니다.

더 건강한 전략은 보통 다음처럼 나뉩니다.

릴리스 핵심 흐름은 주요 브라우저 매트릭스에서 검증
저위험 시나리오는 더 좁은 브라우저 커버리지
빠른 피드백 경로는 대표 브라우저 하나에 집중

크로스 브라우저 가치는 양보다 범위 설계에서 나옵니다.

인증 상태 재사용은 신중하게 해야 합니다

Playwright는 로그인 상태를 재사용해 실행 시간을 크게 줄일 수 있지만, 이 역시 의도적으로 써야 합니다.

유용한 패턴은 다음과 같습니다.

안정적인 환경에서 1회 로그인 setup
역할별 흐름을 위한 별도 auth state
오래된 세션 artifact에 숨어 의존하지 않기

auth state 재사용은 성능 최적화일 뿐입니다. 실제 로그인 흐름 자체는 별도 테스트로 여전히 검증해야 합니다.

네트워크 제어는 결정성을 높여야 합니다

다른 E2E 도구와 마찬가지로 Playwright도 어떤 의존성을 실제로 붙이고 어떤 의존성을 통제할지 분명할수록 안정적입니다.

실무에서는 보통 다음 패턴이 유용합니다.

불안정한 서드파티 의존성 mocking
알려진 상태를 위한 fixture 응답 사용
일부 흐름만 실제 통합에 연결
환경 가정을 테스트 코드에서 명시

이렇게 해야 스위트가 결정성을 유지하면서도 현실성을 잃지 않습니다.

진단 artifact는 기본값이어야 합니다

Playwright의 큰 장점 중 하나는 실패 원인을 artifact로 빠르게 좁힐 수 있다는 점입니다.

팀은 보통 다음을 기본값으로 두는 편이 좋습니다.

실패 시 trace 보존
실패 시 screenshot 저장
진단에 실제 도움이 되는 경우 video 활용
필요 시 browser console과 network log 접근 가능하게 유지

이것이 없으면 Playwright의 운영상 강점을 상당 부분 버리는 셈입니다.

흔한 안티패턴

실무에서는 다음 패턴이 자주 품질을 떨어뜨립니다.

brittle한 CSS selector 과의존
모든 테스트를 모든 브라우저에서 같은 게이트로 돌림
auth state 재사용으로 실제 흐름 문제를 가림
trace를 끄고 flaky 실패를 오래 조사
더 싼 계층이 맡아야 할 시나리오까지 Playwright로 검증

이런 구조는 도구는 강해 보여도 운영 가치가 낮아집니다.

리뷰 체크리스트

Playwright 스위트가 건강한지 보려면 다음을 물어야 합니다.

이 흐름이 정말 브라우저 수준 증명이 필요한가
locator가 semantic하고 안정적인가
크로스 브라우저 범위가 비즈니스 가치 기준으로 조절되었는가
auth state 재사용이 통제되고 명시적인가
실패 시 trace와 진단 정보가 기본 제공되는가

마무리

Playwright는 브라우저 자동화 도구이면서 동시에 디버깅 도구입니다. 안정적인 locator, 조절된 브라우저 커버리지, 기본 trace 운용이 있어야 Playwright가 진짜 배포 생산성을 만들어 냅니다.

다음으로 읽기 좋은 글

🧪 Test

Cypress E2E 테스트 전략 가이드

Cypress를 단순 브라우저 자동화 도구가 아니라 사용자 흐름 검증 도구로 쓰는 방법을 정리합니다. 안정적인 selector, 네트워크 제어, 테스트 데이터, flaky test 감소 전략까지 다룹니다.

🧪 Test

Synthetic Monitoring 과 E2E Testing 의 차이

릴리스 시점의 E2E 테스트와 운영 중 synthetic check를 어떻게 분리해서 설계해야 하는지 다루는 실무 가이드입니다.

💬 Language

TypeScript Utility Types 실전 가이드

TypeScript 유틸리티 타입을 DTO, 업데이트 payload, selector, 파생 타입 설계에 어떻게 써야 하는지, 어디서부터는 가독성을 해치는지 정리합니다.