6.1 UI Mode, Inspector, Codegen
UI Mode는 test 목록, step, DOM snapshot, network와 watch 실행을 한 화면에서 탐색합니다.
npx playwright test --ui
Inspector는 headed browser와 함께 test를 한 단계씩 실행하고 locator를 탐색합니다.
npx playwright test --debug
npx playwright test tests/todo.spec.ts:10 --debug
--debug는 timeout과 worker 설정도 debugging에 맞게 바꿉니다. CI 재현과 동일한 조건이 필요하면 trace를 먼저 봅니다.
Codegen은 사용자 동작을 기록해 test와 locator 초안을 만듭니다.
npx playwright codegen http://127.0.0.1:4173
생성된 코드를 그대로 대규모 suite에 넣지 않습니다. Locator를 사용자 계약에 맞게 정리하고, 반복 navigation을 fixture로 옮기고, 의미 있는 assertion을 추가합니다.
Local debugging 순서
- 실패 test 하나와 project를 좁힙니다.
- UI Mode 또는
--debug로 step을 확인합니다. - Locator strictness와 actionability log를 봅니다.
- Network, console, application log를 대조합니다.
- Test 수정 전 제품 bug인지 판단합니다.
도구별 용도
| 도구 | 가장 좋은 질문 |
|---|---|
| UI Mode | 여러 test를 골라 실행하고 step, timeline을 반복 탐색 |
| Inspector | 한 test를 pause하며 locator와 actionability 확인 |
| Codegen | 초기 locator와 interaction 초안 생성 |
| VS Code extension | Editor에서 run/debug와 locator picking |
| DevTools | 제품 JavaScript, network, rendering 자체 분석 |
Codegen 결과 리뷰
- Accessible locator가 선택됐는가?
.first()나 brittle text가 들어갔는가?- Recorded action만 있고 expected result가 빠졌는가?
- Login credential이 code에 남았는가?
- Business step으로 묶어야 하는가?
Pause 활용
await page.goto('/');
await page.pause();
page.pause()를 commit하지 않도록 lint와 code review 규칙을 둡니다. forbidOnly는 CI에서 test.only()를 막는 별도 안전장치이며 page.pause()까지 검출하지는 않습니다.
Project dependency를 쓰는 suite는 UI Mode에서 setup test가 자동 실행되지 않을 수 있습니다. 의존 test를 보기 전에 setup project를 먼저 실행하거나, 학습 Lab처럼 재사용 가능한 auth state를 준비합니다.
실습
- UI Mode에서 Todo test의 각 DOM snapshot을 비교합니다.
- Pick Locator로 role locator를 생성하고 accessible name을 확인합니다.
- Codegen 결과에 assertion과 business title을 직접 추가합니다.
- Inspector call log에서 overlay가 click을 막는 이유를 찾습니다.