본문으로 건너뛰기

12.5 공식 Guide, Example 해부

공식 문서와 microsoft/playwright-examples에서 반복되는 pattern을 “무엇을 복사할지”보다 “왜 그렇게 구성했는지” 중심으로 정리합니다.

API mocking example​

공식 예제는 세 수준을 나눕니다.

  1. route.fulfill({ json }) — backend를 호출하지 않는 완전 mock
  2. route.fetch() 후 JSON 수정 — real response의 일부만 변형
  3. routeFromHAR() — 기록된 여러 request를 replay

이 구분을 test 이름에 드러내면 mock의 신뢰 경계를 알 수 있습니다.

Boxed steps POM example​

Page object method를 test.step(..., { box: true })로 감싸 business action을 report에 노출하고 내부 locator detail은 접습니다. Decorator는 편리하지만 team의 TypeScript 설정과 debugging 경험을 고려합니다.

Clock example​

공식 예제는 다음을 별도 case로 둡니다.

  • setFixedTime()으로 표시 시각 고정
  • install() + pauseAt() + fastForward()로 진행 제어
  • 5분 idle/offer expiry를 기다리지 않고 검증

한 test에서 모든 API를 섞기보다 시간 모델별로 나누는 것이 읽기 쉽습니다.

TodoMVC와 locator​

Playwright 문서와 agent 예제는 TodoMVC를 자주 사용합니다. 단순 CRUD UI가 locator, list scoping, checkbox state, filter, persistence를 작은 범위에서 모두 보여주기 때문입니다. 이 저장소의 Todo Lab도 같은 학습 장점을 취하되 외부 demo availability에 의존하지 않습니다.

CI example​

공식 CI guide의 공통 흐름은 npm ci → browser/dependency install → npx playwright test → artifact upload입니다. 큰 suite는 shard와 blob report merge로 확장합니다. CI provider별 syntax보다 이 수명주기를 이해합니다.

공식 source를 읽는 방법​

  1. Stable docs의 guide를 먼저 읽습니다.
  2. API reference로 option의 정확한 type과 default를 확인합니다.
  3. Official example repo에서 최소 runnable pattern을 봅니다.
  4. Playwright 자체 test suite에서 edge case를 찾습니다.
  5. Release note에서 version 변경과 breaking change를 확인합니다.

주의할 점​

  • /next 문서는 unreleased behavior를 포함할 수 있습니다.
  • Example의 public demo URL은 availability와 data가 바뀔 수 있습니다.
  • Blog snippet보다 stable official docs와 current repository source를 우선합니다.
  • Version-specific Docker image tag와 package version을 맞춥니다.
  • 복사한 example을 현재 제품의 security, data isolation 기준으로 다시 리뷰합니다.

출발점​