Playwright codegen이란? 테스트 코드를 대신 만드는 2가지 방법

Playwright로 무언가를 확인하려면 먼저 확인 절차를 적어 두어야 합니다. "로그인 화면을 연다 → 이메일을 넣는다 → 가입 완료가 뜨는지 본다" 같은 순서를요. 다만 그것을 사람의 말이 아니라 프로그래밍 언어로 적어야 합니다. 그렇게 적어 둔 것을 테스트 코드라고 부르고, 기계는 그것을 읽어 브라우저를 대신 조종합니다.

문제는 그 코드를 쓸 줄 알아야 한다는 점입니다. 그래서 직접 쓰지 않고 만들어 주는 방법이 2가지 있습니다. 하나는 Playwright에 들어 있는 codegen — 브라우저에서 그냥 클릭하면 그 동작이 코드로 적힙니다. 다른 하나는 AI에게 말로 시키는 것입니다. 둘 다 실제로 잘 만들어 줍니다. 이 글은 두 방법이 각각 무엇을 해 주는지 정리하고, 코드가 만들어진 다음에 무엇이 남는지를 이야기합니다.

테스트 코드를 대신 만들어 주는 2가지 방법

1편에서 Playwright가 무엇이고 MCP로 붙이면 어디까지 되는지 정리했습니다. 그 글은 이렇게 끝났습니다 — 코드를 읽고 쓸 수 있다면 Playwright를 코드로 쓰시라고요.

그럼 그 코드는 어떻게 시작할까요. 처음부터 손으로 쓸 필요는 없습니다. 대신 만들어 주는 방법이 2가지 있습니다.

두 방법은 경쟁하는 관계가 아닙니다. 실제로는 codegen으로 뼈대를 잡고 AI에게 다듬게 하는 식으로 함께 쓰는 경우가 많습니다.

Playwright codegen이 하는 일

Playwright 설치가 끝나 있다면 터미널에 한 줄만 치면 됩니다. 설치 방법과 전체 옵션은 공식 문서에 정리돼 있습니다.

npx playwright codegen specnote.io

그러면 창이 2개 열립니다. 하나는 평범한 브라우저이고, 다른 하나는 Inspector라는 기록 창입니다. 브라우저에서 로그인 버튼을 누르고 이메일을 입력하면, 그 동작이 오른쪽 창에 코드로 쌓입니다.

기록되는 것은 클릭과 입력만이 아닙니다.

• 화면 이동 — 주소가 바뀌는 것까지 따라갑니다
• 선택·체크 — 드롭다운, 체크박스, 라디오 버튼
• 파일 업로드
• 확인 문구 — "가입 완료가 화면에 보이는가" 같은 검사를 기록 중에 추가할 수 있습니다

만들어진 코드는 원하는 언어로 받을 수 있습니다. JavaScript·TypeScript가 기본이고 Python, Java, .NET(C#)도 지원합니다.

codegen이 요소를 찾는 방식

여기가 codegen에서 가장 중요한 부분입니다. 화면의 버튼 하나를 눌렀을 때, 그 버튼을 코드가 어떻게 가리킬지 정해야 합니다.

codegen은 사람이 그 요소를 어떻게 인식하는가를 기준으로 고릅니다. 화면에서 "로그인"이라고 적힌 버튼이면 코드도 이렇게 나옵니다.

page.getByRole('button', { name: '로그인' })

"button 역할을 하고 이름이 로그인인 요소"라는 뜻입니다. 개발자가 붙인 내부 이름이 아니라, 화면 낭독기가 읽어 주는 이름을 씁니다.

이 방식에는 분명한 장점이 있습니다. 내부 구조를 바꿔도 화면에 보이는 글자가 그대로면 코드가 계속 동작합니다. 그리고 코드를 읽는 사람에게 "무엇을 누르는지"가 그대로 보입니다.

동시에 여기서 뒤에 이야기할 문제도 시작됩니다. 버튼 글자를 "로그인"에서 "시작하기"로 바꾸면, 그 코드는 더 이상 그 버튼을 찾지 못합니다.

브라우저에서 누르면 그대로 코드가 된다

codegen이 더 해 주는 것들

기본 기록 외에 알아 둘 만한 기능이 몇 가지 있습니다. 실제로 쓸 때 시간을 아껴 줍니다.

요소 집어보기. 기록하지 않고 마우스만 올려도 그 요소를 가리키는 코드를 보여 줍니다. 이미 있는 코드에서 한 줄만 고칠 때 유용합니다.

로그인 상태 저장. 로그인 과정을 매번 기록하지 않아도 됩니다. --save-storage 로 로그인한 상태를 파일에 저장해 두고, 다음부터는 --load-storage 로 불러와 이미 로그인된 상태에서 기록을 시작할 수 있습니다.

환경 흉내내기. 화면 크기, 기기 종류, 어두운 화면, 언어, 시간대, 위치까지 지정해 그 상황을 기록할 수 있습니다. "모바일에서 이탈리아 사용자가 보는 화면"처럼요.

npx playwright codegen --device="iPhone 15" --lang="ko-KR" specnote.io

Playwright 사용법을 익히는 가장 빠른 길이 이것입니다 — 문서를 읽기 전에 한 번 기록해 보면 코드가 어떤 모양인지 눈으로 먼저 들어옵니다. 전체 옵션은 codegen 문서에 있습니다.

AI에게 시키면 무엇이 달라지나

요즘은 codegen을 켜기 전에 AI에게 먼저 시키는 경우가 많습니다. "회원가입 흐름 테스트 코드 짜줘"라고 하면 코드가 나옵니다.

AI가 더 나은 점이 분명히 있습니다.

• 화면을 열지 않아도 됩니다. 아직 만들지 않은 기능의 테스트도 미리 쓸 수 있습니다.
• 코드베이스를 읽고 씁니다. 프로젝트에서 쓰는 방식에 맞춰 줍니다.
• 여러 경우를 한 번에 만듭니다. 성공뿐 아니라 잘못된 비밀번호, 빈 칸 같은 경우까지 함께요.

codegen이 더 나은 점도 분명합니다.

• 실제로 일어난 동작을 기록합니다. 화면에 실제로 있는 요소만 가리킵니다.
• AI는 화면을 보지 않고 짐작해서 요소를 가리키는 경우가 있습니다. 그러면 코드는 그럴듯한데 실행하면 그 요소를 찾지 못합니다.

그래서 실무에서는 섞어 씁니다. codegen으로 실제 요소를 확인하고, AI에게 정리와 확장을 맡기는 식입니다.

2가지 방법이 만나는 지점

여기까지 보면 코드를 만드는 문제는 거의 해결된 것처럼 보입니다. 실제로 그렇습니다. 만드는 것은 이제 어렵지 않습니다.

문제는 그다음입니다. codegen이든 AI든, 두 방법 모두 코드를 손에 쥐여 주고 끝납니다. 그 코드를 가지고 해야 할 일이 남습니다.

만드는 일은 끝났고 그다음이 남는다

코드가 만들어진 다음에 남는 일 3가지

1. 그 코드를 읽어야 합니다. 만들어진 코드가 정확히 무엇을 확인하는지 알아야 결과를 믿을 수 있습니다. 통과했다는 말이 "회원가입이 된다"인지 "회원가입 버튼이 눌린다"인지는 코드를 읽어야 압니다. 이 둘은 전혀 다른 이야기입니다.

2. 화면이 바뀌면 고쳐야 합니다. 앞에서 본 것처럼 코드는 화면에 보이는 이름으로 요소를 가리킵니다. 버튼 글자를 바꾸거나 구조를 손대면 그 줄을 찾아 고쳐야 합니다. 기능이 늘어날수록 고칠 곳도 늘어납니다.

3. 배포마다 실행해야 합니다. 코드는 저절로 돌지 않습니다. 배포 자동화에 걸어 두거나, 사람이 매번 실행해야 합니다. 걸어 두려면 설정이 필요하고, 사람이 하려면 기억해야 합니다.

이 3가지는 코드를 읽을 수 있는 사람에게는 일상적인 작업입니다. 어렵지 않습니다. 시간이 들 뿐입니다.

문제는 코드를 읽지 못하는 사람에게는 이 3가지가 전부 벽이라는 점입니다. 코드는 만들어졌는데 그 코드를 읽을 수 없고, 고칠 수 없고, 언제 도는지도 알 수 없습니다.

그래서 무엇이 필요한가

코드를 못 읽는 사람에게 필요한 것은 더 잘 만들어 주는 도구가 아닙니다. 만드는 일은 이미 충분히 잘 됩니다.

필요한 것은 만들어진 결과물이 코드가 아닌 것입니다. 무엇을 확인하는지 사람이 읽을 수 있는 말로 남고, 그 기준을 사람이 승인하고, 승인된 것이 배포마다 저절로 다시 도는 형태여야 합니다.

Specnote는 그 자리를 맡습니다. 확인할 흐름은 평범한 문장으로 남고, 통과 기준은 코드를 못 읽는 사람이 읽고 승인하며, 승인된 것은 배포마다 자동으로 다시 실행됩니다.

코드를 읽을 수 있다면 codegen으로 시작하시는 편이 낫습니다. 무료이고, 통제할 수 있는 범위가 넓고, 위에서 본 기능들이 그대로 쓸 만합니다.

이 시리즈에서 앞으로 다룰 것

• 로케이터 — 화면이 조금 바뀌면 왜 멈추는지, 덜 멈추게 쓰는 법
• 트레이스 뷰어 — 실패했을 때 무엇이 남는지, 되감아 보는 방법
• 픽스처 — 매번 같은 상태에서 시작하게 만드는 장치
• 배포 자동화 연동 — 코드를 올릴 때마다 자동으로 실행되게 하는 방법

지금 테스트해보기