Playwright 테스트 녹화하는 법

브라우저 조작을 테스트 코드로 옮기는 흐름을 표현한 AI 생성 개념도. 실제 제품 화면이나 테스트 결과가 아닙니다.

Playwright가 준비된 프로젝트에서 codegen을 실행하고 브라우저를 조작하면 테스트 코드를 만들 수 있습니다. 클릭과 입력만 기록하지 말고, 화면에 무엇이 보여야 성공인지 확인하는 assertion도 함께 넣으세요. 녹화 코드를 복사한 것과 테스트가 실제 통과한 것은 다릅니다.

아래는 공식 문서의 TodoMVC 데모를 사용하는 흐름입니다. Node.js용 Playwright와 테스트 브라우저가 설치된 환경을 전제로 하며, 이 글에서 실제 녹화·실행한 결과는 아닙니다. 공식 문서 확인일은 2026년 10월 23일입니다.

브라우저와 Inspector 열기

프로젝트 터미널에서 다음 명령을 실행합니다.

npx playwright codegen demo.playwright.dev/todomvc

브라우저와 Playwright Inspector가 열립니다. 브라우저에서 할 일을 입력하고 Enter를 누르거나 완료 체크를 하면 Inspector에 동작 코드가 생성됩니다. codegen은 역할·텍스트·테스트 ID 기반 locator를 우선하며, 여러 요소가 일치하면 대상을 구분하도록 보완합니다.

여기서 말하는 녹화는 화면을 동영상 파일로 저장하는 기능이 아니라, 조작을 테스트 코드로 만드는 기능입니다.

이미지: Microsoft Playwright, Generating tests 공식 예시.

원본 문서, CC BY 4.0. 원본 변경 없음. 이 글의 직접 실행 화면이 아닙니다.

결과 확인도 녹화하기

도구 모음에서 검증할 종류를 선택하고 페이지 요소를 클릭하면 assertion을 기록할 수 있습니다.

• assert visibility: 대상이 보이는지 확인
• assert text: 지정한 텍스트가 포함되는지 확인
• assert value: 입력 요소가 지정한 값을 갖는지 확인

예를 들어 할 일을 추가했다면 ‘추가 버튼을 눌렀다’만 남기지 말고 새 항목의 문구가 보이는지도 확인합니다.

복사한 코드는 실행해 확인

기록이 끝나면 Record로 녹화를 멈추고 Copy로 코드를 복사합니다. 테스트 파일에 옮긴 뒤 실제 실행 결과를 확인하세요. 공식 이미지처럼 expect 검증이 있는지, 의도한 항목을 찾는 locator인지 읽어보는 것도 필요합니다.

웹용 비동기 assertion은 기대한 상태가 될 때까지 정해진 제한 시간 안에서 다시 확인합니다. 따라서 직접 코드를 손볼 때는 await를 빠뜨리지 않아야 합니다. 무조건 오래 기다리는 코드를 넣기보다 검증할 상태를 구체적으로 정하는 편이 좋습니다.

처음에는 공식 데모나 승인된 테스트 환경에서 연습하세요. 실제 서비스의 결제·삭제·전송 버튼을 누르면 ‘녹화 중’이어도 실제 작업이 될 수 있습니다.

다음 단계는 공식 테스트 실행 안내입니다. 검증문 작성 원리는 Assertions 문서에서 이어 볼 수 있습니다.