테스트 생성기
테스트 생성기 (Test Generator)
테스트를 처음 시작할 때 가장 시간이 걸리는 일 중 하나가, "페이지의 어느 요소를 어떻게 찾을 것인가"를 정하는 거예요. Playwright 테스트 생성기는 브라우저에서 하는 동작을 그대로 테스트 코드로 바꿔 줘요. 페이지를 보면서 클릭·입력하면 그 액션을 코드로 기록해 주고, role·text·test id 로케이터를 우선한 최선의 로케이터를 자동으로 고른 뒤, 요소가 여러 개 매칭되면 유일하게 식별되도록 개선해 줘요.
VS Code에서 테스트 생성
VS Code 확장을 설치하면 에디터 안에서 바로 테스트를 생성할 수 있어요. 확장은 VS Code Marketplace에서 찾을 수 있어요.
새 테스트 기록
테스트 사이드바의 Record new 버튼을 누르면 test-1.spec.ts 파일이 생성되고 브라우저 창이 열려요. 브라우저에서 테스트할 URL로 이동해 클릭하며 동작을 기록하면, Playwright가 그 액션을 분석해 테스트 코드를 VS Code에 바로 생성해 줘요. 툴바의 단언 아이콘을 고른 뒤 페이지 요소를 클릭하면 단언도 생성할 수 있어요.
'assert visibility'— 요소가 보이는지 단언'assert text'— 요소가 특정 텍스트를 포함하는지 단언'assert value'— 요소가 특정 값을 갖는지 단언
기록이 끝나면 cancel 버튼을 누르거나 브라우저 창을 닫은 뒤, 생성된 test-1.spec.ts 파일을 살펴보고 필요하면 직접 다듬으면 돼요.
커서 위치에서부터 기록
테스트의 특정 지점부터 더 기록하고 싶다면, 커서를 그 위치로 옮기고 테스트 사이드바의 Record at cursor 버튼을 눌러요. 브라우저 창이 아직 안 열렸다면 Show browser를 켠 상태로 테스트를 먼저 실행한 뒤 사용하면 돼요. 이후의 액션은 커서 위치에 추가돼요.
로케이터 생성
테스트 사이드바의 Pick locator 버튼을 누르고 브라우저의 요소 위에 마우스를 올리면 각 요소 아래에 로케이터가 강조돼요. 원하는 요소를 클릭하면 VS Code의 Pick locator 박스에 나타나고, Enter로 클립보드에 복사해 코드 어디든 붙여넣을 수 있어요. Escape를 누르면 취소되고요.
Playwright Inspector로 테스트 생성
codegen 명령을 실행하면 두 개의 창이 열려요 — 테스트할 웹사이트와 상호작용하는 브라우저 창, 그리고 테스트를 기록해 에디터로 복사하는 Playwright Inspector 창이요. URL은 옵션이라 생략하고 브라우저 창에 직접 입력해도 돼요.
npx playwright codegen demo.playwright.dev/todomvc
playwright codegen demo.playwright.dev/todomvc
테스트 기록
codegen 명령을 실행하고 브라우저 창에서 액션을 수행하면 Playwright가 사용자 상호작용 코드를 생성해 Inspector 창에 보여줘요. 클릭·입력 같은 액션은 페이지와 상호작용만 해도 기록되고, 단언은 툴바 아이콘을 고른 뒤 요소를 클릭해 추가할 수 있어요. 기록이 끝나면 record 버튼으로 중지하고 copy 버튼으로 생성된 코드를 에디터에 복사하면 돼요. clear 버튼으로 코드를 비우고 다시 기록할 수 있어요.
로케이터 생성
- Record 버튼을 눌러 기록을 중지하면 Pick Locator 버튼이 나타나요.
- Pick Locator를 누르고 브라우저 요소 위를 호버하면 요소 아래에 로케이터가 강조돼요.
- 요소를 클릭하면 그 로케이터 코드가 Pick Locator 버튼 옆 필드에 나타나요.
- 필드에서 로케이터를 다듬거나 copy 버튼으로 복사해 코드에 붙여넣을 수 있어요.
에뮬레이션
테스트 생성기는 에뮬레이션과 함께 사용해 특정 뷰포트·기기·색상 모드에 맞는 테스트를 만들 수 있고, 지리적 위치·언어·시간대를 에뮬레이션하거나 인증 상태를 유지한 채 테스트를 생성할 수도 있어요.
--viewport-size="800,600"— 다른 뷰포트 크기로 테스트 생성--device="iPhone 13"— 모바일 기기 에뮬레이션(뷰포트·user agent 등 포함)--color-scheme=dark— 색상 모드 에뮬레이션--timezone,--geolocation,--lang— 시간대·위치·언어 에뮬레이션
npx playwright codegen --viewport-size="800,600" playwright.dev
npx playwright codegen --device="iPhone 13" playwright.dev
npx playwright codegen --color-scheme=dark playwright.dev
npx playwright codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" bing.com/maps
인증 상태 유지
--save-storage로 세션 종료 시 쿠키·localStorage·IndexedDB 데이터를 저장할 수 있어요. 인증 단계를 한 번만 기록해 두고, 이후 테스트 기록에서 재사용하기 좋아요.
npx playwright codegen github.com/microsoft/playwright --save-storage=auth.json
로그인 후 브라우저를 닫으면 auth.json에 저장 상태가 담겨요. 여기엔 민감 정보가 들어 있으니 로컬에서만 사용하고, .gitignore에 추가하거나 테스트 생성이 끝나면 삭제하는 게 안전해요.
--load-storage로 저장된 상태를 다시 불러오면, 로그인 없이 인증된 상태에서 이어서 테스트를 생성할 수 있어요.
npx playwright codegen --load-storage=auth.json github.com/microsoft/playwright
--user-data-dir로 고정된 사용자 데이터 디렉토리를 지정하면 기존 브라우저 프로필을 사용해 그 프로필의 인증 상태에도 접근할 수 있어요. 주의할 점은, Chrome 136부터 기본 사용자 데이터 디렉토리는 Playwright 같은 자동화 도구로 접근할 수 없으니 테스트용 별도 디렉토리를 만들어야 한다는 거예요.
npx playwright codegen --user-data-dir=/path/to/your/browser/data/ github.com/microsoft/playwright
HTTP 기본 인증으로 인증하려면 --http-credentials를 사용해요. URL에 자격증명을 넣는 것과 달리, 기록 세션 중 자격증명을 요청하는 모든 origin에 전송되고 생성된 코드에도 포함돼요.
npx playwright codegen --http-credentials="username:password" example.com
커스텀 설정으로 기록
라우팅 설정 같은 비표준 환경에서 codegen을 쓰고 싶을 땐 page.pause()를 호출하면 codegen 컨트롤이 있는 별도 창이 열려요. 이때 headed 모드로 실행해야 해요.
const { chromium } = require('@playwright/test');
(async () => {
// Make sure to run headed.
const browser = await chromium.launch({ headless: false });
// Setup context however you like.
const context = await browser.newContext({ /* pass any options */ });
await context.route('**/*', route => route.continue());
// Pause the page, and start recording manually.
const page = await context.newPage();
await page.pause();
})();