1. 서론

시스템 개발을 하다 보면 기능을 추가할 때마다 검증해야 할 항목이 늘어납니다.

수동 검증도 가능하지만, 기능이 늘어남에 따라 동일한 작업을 반복하는 부담이 커지고 확인 누락이 발생하기 쉬워집니다.

이에 제가 업무에서 사용하며 유용하다고 느낀 「Claude Code」와 「Playwright MCP」를 사용한 E2E 테스트 자동화 방법을 소개합니다.

2. E2E 테스트란

E2E는 「End to End」의 약자입니다.

E2E 테스트에서는 사용자가 실제로 수행하는 조작에 가까운 형태로 프로그램이 올바르게 동작하는지 확인합니다.

예를 들어, EC 사이트에서 상품을 구매하는 경우 다음과 같은 일련의 흐름이 있습니다.

• 상품을 장바구니에 담기
• 장바구니 화면으로 이동하기
• 주문 확정하기
• 주문 완료 화면이 표시되는지 확인하기

이와 같이 시스템 전체의 연결성을 검증하는 것이 E2E 테스트입니다.

E2E 테스트에는 실제 이용 방법과 유사한 상태에서 확인할 수 있다는 큰 장점이 있습니다. 반면, 모든 동작을 E2E 테스트로만 확인하려고 하면 실행 시간이 길어지거나 테스트 관리가 힘들어집니다.

따라서 중요한 사용자 조작만을 E2E 테스트로 검증하는 것을 권장합니다.

3. Playwright MCP란

Playwright MCP는 Microsoft가 개발하고 있는 E2E 테스트 프레임워크인 Playwright의 브라우저 조작 기능을 AI 어시스턴트로부터 이용할 수 있도록 하기 위한 MCP 서버입니다.

MCP 서버란 Claude Code 등의 AI 어시스턴트가 외부 도구와 연계하기 위한 서버를 말합니다.

통상적으로 AI는 브라우저를 직접 조작할 수 없습니다.

여기서 Playwright MCP가 AI와 브라우저 사이에서 다음과 같은 조작을 실행해 줍니다.

• AI가 대상 화면을 브라우저로 열기
• Playwright MCP가 화면 상태를 취득하기
• AI가 조작 대상을 판단하기
• 클릭이나 문자 입력 수행하기
• 페이지 내용 확인하기

사람이 브라우저를 조작하는 것과 동일한 일을 실행할 수 있습니다.

단, Playwright MCP가 기존의 Playwright 테스트를 완전히 대체하는 것은 아닙니다. CI에서 매번 동일한 조건의 테스트를 실행하는 경우에는 Playwright 테스트 코드를 구현하여 운용하는 것이 더 적합합니다.

4. Playwright MCP의 장점

1. 자연어로 브라우저를 조작할 수 있음

가장 알기 쉬운 장점은 코드를 작성하지 않고도 자연어로 브라우저 조작을 수행할 수 있다는 점입니다.

예를 들어, 다음과 같이 지시하는 것이 가능합니다.

사용자 등록 화면을 열고, 필요한 사용자 정보를 입력하여 등록을 실행해 주세요.

등록 완료 후, 등록 완료 화면으로 전환되는지 확인해 주세요.

검증할 내용을 일본어(또는 한국어)로 지시하면, AI가 페이지 상태를 확인하며 작업을 진행합니다.

사양이나 검증 누락을 찾는 용도로도 사용할 수 있습니다.

2. 조작 모습을 확인할 수 있음

Playwright MCP는 브라우저 상에서 AI가 어떤 조작을 하고 있는지 육안으로 확인할 수 있습니다.

조작을 잘못했을 경우에도 즉시 알아차리고 수정하는 것이 가능합니다.

5. Playwright MCP 도입 방법

다음 명령어를 실행하는 것만으로 Claude Code에 Playwright MCP 도입이 완료됩니다.

claude mcp add playwright npx @playwright/mcp@latest

6. 사용 방법

도입이 완료되면 Claude Code에 일본어(또는 한국어)로 지시함으로써 Playwright MCP를 이용할 수 있습니다.

Claude Code에서 Playwright MCP를 사용할 때는 모호한 표현을 피하고 구체적으로 지시를 내림으로써 검증 정밀도를 높일 수 있습니다.

예를 들어,

관리자 등록 화면을 테스트해 주세요.

보다 다음과 같이 조작 순서나 로그인 정보를 구체적으로 주는 편이 의도가 명확해집니다.

로그인한 후 관리자 등록 화면으로 전환하여 다음 내용을 실행해 주세요.
1. 이름, 이메일 주소, 비밀번호를 입력한다
2. 등록 버튼을 누른다
...

7. 요약

Playwright MCP는 E2E 테스트 방식을 크게 바꾸는 혁신적인 도구입니다.

기존처럼 테스트 코드를 처음부터 기술하지 않아도, 자연어로 조작 내용이나 확인 항목을 지시함으로써 브라우저 조작부터 결과 검증까지 실행할 수 있습니다.

이를 일상적인 업무에 도입하여 제품 개발을 비롯한 다양한 상황에서 활용함으로써 업무 효율화를 달성할 수 있습니다.

Discussion