Playwright로 E2E 테스트 자동화 경험 공유
Playwright는 웹 애플리케이션의 E2E(End-to-End) 테스트를 위한 도구로, 사용자 시나리오 기반 테스트를 지원함
장비 관리 웹 사이트의 테스트 자동화를 위해 Playwright를 도입하여 로그인, 대시보드, 관리자 메뉴 노출 여부 등을 검증함
Playwright의 직관적인 코드와 화면 상태 검증의 용이성을 장점으로 꼽았으며, UI 변경이 잦은 서비스에는 초기 적용이 어려움을 언급함
데이터 준비의 어려움으로 인해 기능 구현 후 최종 확인 용도로 Playwright를 활용함
Playwright의 E2E 테스트 핵심 기능
Playwright는 실제 브라우저(Browser)를 제어하여 사용자 상호 작용을 시뮬레이션하는 E2E(End-to-End) 테스트 도구이다. 클릭, 입력, 페이지 이동과 같은 동작을 자동화하고, 그 결과를 검증한다.
`testDir`, `timeout`, `expect` 옵션을 통해 테스트 디렉토리, 최대 실행 시간, 기대값 시간 설정
`retries`, `workers` 설정을 통해 테스트 재시도 횟수 및 병렬 실행 제어
`storageState`를 활용하여 로그인 상태를 저장하고, 이후 테스트에서 재사용하여 테스트 시간을 단축
Playwright를 활용한 장비 관리 시스템 테스트
장비 관리 시스템 웹 사이트에서 Playwright를 사용하여 로그인, 대시보드, 관리자 메뉴 노출 여부를 테스트했다. 구글 OAuth 로그인 방식을 사용하므로, 브라우저를 직접 열어 로그인하는 방식으로 테스트를 진행했다.
`page.goto()`를 사용하여 대시보드 페이지 접근 및 리디렉션 확인
`getByRole()`과 `toBeVisible()`을 사용하여 로그인 버튼 로드 여부 검증
`context`를 활용하여 브라우저가 닫히지 않도록 하고, 로그인 완료 후 대시보드 페이지로 리디렉션되는지 확인
테스트 코드 작성 시, 구글 OAuth 로그인 방식에 따른 테스트 환경 설정**에 어려움이 있었음을 알 수 있다.
Playwright의 장점과 단점 분석
Playwright는 직관적인 코드와 화면 상태 변화 검증에 용이하다는 장점이 있다. 특히, 장비 관리 사이트처럼 사용자 흐름 중심의 기능과 UI 상태 변화가 많은 경우, 실제 사용 방식 그대로 테스트를 진행할 수 있다.
초기 진입 장벽(Entry Barrier)이 낮아 학습이 용이함
UI 변경이 잦은 서비스의 경우, 테스트 코드 유지보수(Maintenance)에 어려움이 있을 수 있음
데이터 준비(Data Preparation)의 어려움으로 인해, 기능 구현 후 최종 확인 용도로 활용
Playwright 테스트 코드 구조 및 실행 방법
Playwright 테스트는 `testDir`, `timeout`, `expect` 등의 설정을 통해 테스트 환경을 구성한다. 테스트 실행을 위해 `package.json`에 스크립트를 작성하고, `test:e2e:setup`과 `test:e2e`를 순차적으로 실행한다.
`test:e2e:setup`: 브라우저를 열어 로그인하고 인증 파일을 생성
`test:e2e`: 생성된 인증 파일을 사용하여 테스트를 진행
`testMatch` 옵션을 통해 테스트 파일 선택 가능
테스트 코드 구조**는 로그인, 대시보드, 관리자 메뉴 노출 여부 등을 확인하는 시나리오로 구성되어 있다.
