(준)공식 문서/Playwright

[ Playwright ] Playwright로 테스트 코드 자동 생성하기: 클릭만으로 테스트가 만들어진다?

Je-chan 2025. 5. 14. 10:43

테스트 자동화는 꼭 필요하다고 느끼지만, 막상 코드를 작성하려고 하면 머리가 아플 때가 많습니다.
"여기 클릭하고, 저기 입력하면, 그걸 코드로 어떻게 써야 하지?" 같은 고민이 생깁니다.

 

Playwright는 이런 고민을 덜어주기 위해, 브라우저에서 직접 동작을 수행하면 테스트 코드를 자동으로 생성해주는 기능을 제공합니다.
이 기능은 codegen이라고 불리며, 테스트 자동화를 정말 손쉽게 시작할 수 있도록 도와줍니다.

Codegen이란?

Playwright의 codegen 기능을 실행하면 다음 두 개의 창이 열립니다:

  1. 브라우저 창: 테스트 대상 웹사이트가 열립니다.
  2. Playwright Inspector 창: 우리가 브라우저에서 하는 동작들이 테스트 코드로 자동 기록되는 곳입니다.

이제 여기서 클릭, 입력, 선택 등 사용자가 직접 수행하는 동작들이 자동으로 테스트 코드로 바뀌는 모습을 실시간으로 볼 수 있게 됩니다.

 

Codegen 실행 방법

터미널에서 아래 명령어를 실행하면 됩니다:

npx playwright codegen demo.playwright.dev/todomvc

demo.playwright.dev/todomvc는 예시 URL이고, 원하는 웹사이트 주소를 넣으면 됩니다.
만약 URL을 생략하면 빈 브라우저가 뜨고, 거기서 수동으로 주소를 입력할 수도 있습니다.

 

테스트 녹화 흐름

  1. 위 명령어로 브라우저와 Inspector를 띄웁니다.
  2. 브라우저 창에서 원하는 대로 클릭하거나 입력합니다.
  3. Inspector 창에 실시간으로 코드가 생성됩니다.
  4. 코드가 마음에 들면 "Copy" 버튼을 눌러 에디터로 복사합니다.
  5. 다시 녹화하고 싶으면 "Clear" 버튼을 눌러 초기화합니다.

녹화 가능한 동작

  • 클릭(click), 입력(fill) 등 사용자의 상호작용
  • **Assertion(기대값 검증)**도 가능

Inspector의 툴바에는 세 가지 검사 버튼이 있습니다:

아이콘동작

 

✅ assert visibility 요소가 보이는지 검사
📝 assert text 요소가 특정 텍스트를 포함하는지 검사
📥 assert value 요소의 값(value)이 일치하는지 검사
 

예를 들어 “로그인 버튼이 보여야 한다”는 조건을 검증하려면 assert visibility 버튼을 누르고 로그인 버튼을 클릭하면 됩니다.

 

🧠 Assertion이란?
우리가 테스트에서 기대하는 결과를 코드로 표현한 것. 예: "이 텍스트가 보여야 한다", "이 버튼은 눌려야 한다" 등.

 

Locator 자동 생성도 가능

Playwright는 테스트의 안정성을 위해 Locator라는 개념을 중심으로 동작합니다.
Locator는 특정 요소를 식별하기 위한 방식인데, 텍스트, 역할(role), test ID 등을 조합해 가장 적절한 선택자를 추천합니다.

Locator만 따로 뽑아내는 기능도 제공됩니다:

  1. "Record"를 멈추면 "Pick Locator" 버튼이 나타납니다.
  2. 클릭하고 브라우저 창의 요소 위에 마우스를 올리면 추천되는 Locator가 하이라이트됩니다.
  3. 원하는 요소를 클릭하면, 해당 Locator가 오른쪽 Locator Playground에 표시됩니다.
  4. 직접 수정해보거나 복사해서 코드에 붙여 넣을 수 있습니다.

💡 Cypress는 기본적으로 cy.get('.class')처럼 CSS 선택자 중심으로 작동합니다.
Playwright는 **접근성 기반의 Locator(역할, 텍스트 등)**를 우선시하여, 좀 더 안정적인 테스트 코드를 생성합니다.

 

다양한 환경 설정도 지원 (에뮬레이션)

Playwright의 codegen 기능은 단순한 클릭 녹화만 지원하는 것이 아닙니다.
다음과 같은 **환경 조건을 에뮬레이션(모의 환경 구성)**하여 테스트를 생성할 수도 있습니다:

  • 뷰포트(viewport): 화면 크기
  • 디바이스 기종: 모바일, 태블릿 등
  • 다크 모드 등 색상 모드
  • 위치(geolocation), 언어, 타임존
  • 로그인 상태 유지한 테스트도 생성 가능

이 기능을 활용하면 실제 모바일 환경이나 특정 국가의 사용자처럼 테스트를 시뮬레이션할 수 있어,
국제화(i18n), 모바일 대응 등의 테스트를 작성할 때 매우 유용합니다.

마무리하며

Playwright의 codegen 기능은 단순한 테스트 생성을 넘어,
UI와 코드 간의 간극을 좁혀주는 다리 역할을 합니다.

  • 클릭 → 자동으로 click() 코드 생성
  • 입력 → 자동으로 fill() 코드 생성
  • 검증 → 클릭 한 번으로 expect(...).toBeVisible() 자동 작성

테스트 자동화를 처음 접하는 개발자에게도 Playwright는 좋은 출발점이 되어줄 수 있습니다.
무엇보다도 눈으로 보고, 손으로 조작하면서 코드가 만들어지는 경험은 매우 직관적이고 강력합니다.

 

공식 문서

https://playwright.dev/docs/codegen-intro

 

Generating tests | Playwright

Introduction

playwright.dev