테스트 코드도 이제 AI가 짜줍니다: Playwright와 LLM으로 완성하는 차세대 QA 자동화 가이드

🤖 3줄 핵심 요약

• 01 Playwright의 혁신: Codegen 기능을 통해 코드 작성 없이 마우스 클릭만으로 웹 자동화 테스트 코드를 생성 가능
• 02 AI 협업 시너지: LLM(GPT-4 등)을 활용해 복잡한 결제 로직이나 유지보수가 쉬운 로케이터(Locator) 기반의 테스트 코드 최적화
• 03 실무 적용 팁: 단순 반복 테스트를 자동화하여 회귀 테스트(Regression Test) 비용을 획기적으로 줄이고 서비스 안정성 확보

퇴근 직전 날아온 '버그 제보'가 더 이상 무섭지 않은 이유

어느 목요일 오후였어요. 커피 한 잔 마시며 오늘의 작업을 마무리하려는데,

"로그인 버튼이 특정 브라우저에서 안 눌려요!"라는 다급한 메시지가 날아왔죠.

 

 

예전 같았으면 하나하나 수동으로 클릭해보며 식은땀을 흘렸겠지만, 이제는 걱정 없습니다. 제 곁에는 24시간 쉬지 않는 AI와 Playwright라는 든든한 조력자가 있거든요.

우리가 웹 서비스를 만들다 보면 가장 공포스러운 순간이 언제일까요? 바로 '어제까지 잘 되던 기능이 갑자기 안 될 때'입니다. 특히 기능이 많아질수록 사람이 일일이 테스트하는 건 불가능에 가까워지죠. 그래서 우리는 '자동화 테스트'를 꿈꿉니다. 하지만 코드를 짜는 것보다 테스트 코드를 짜는 게 더 힘들다는 주니어분들의 하소연을 자주 듣곤 해요.

오늘 제가 이야기할 Playwright는 마이크로소프트에서 만든 현대적인 웹 자동화 도구예요. 여기에 최근 핫한 AI(LLM)를 끼얹으면 어떻게 될까요? 마치 숙련된 사수에게 "이 화면에서 결제까지 잘 되는지 확인해줘"라고 말하면 알아서 코드를 짜고 테스트까지 마치는 마법 같은 일이 벌어집니다.

🚀

속도의 혁명

수동 테스트 대비 10배 이상의 빠른 검증 속도

🤖

AI의 지능

복잡한 셀렉터와 로직을 LLM이 대신 작성

🛠️

멀티 브라우저

Chromium, WebKit, Firefox 모두 한 번에 테스트

코드 한 줄 몰라도 시작할 수 있는 자동화의 기본기

처음 시작할 때 가장 큰 벽은 "환경 설정"이죠. 하지만 Playwright는 정말 친절합니다. 마치 Bolt.new가 개발자들을 놀라게 했던 것처럼, 터미널 명령 한 줄이면 모든 준비가 끝납니다.

# 1. Playwright 설치하기
npm init playwright@latest

# 2. 브라우저에서 직접 동작을 녹화하기 (Codegen)
npx playwright codegen [https://example.com](https://example.com)

여기서 Codegen이라는 기능이 핵심이에요. 브라우저 창이 하나 뜨는데, 여러분이 마우스로 클릭하고 글자를 입력하는 모든 동작을 실시간으로 자바스크립트 코드로 변환해줍니다. 예전에는 HTML 구조를 분석해서 div.login-btn 같은 클래스 명을 일일이 찾아야 했지만, 이제는 그럴 필요가 없죠.

특히 자바스크립트의 비동기 처리(async/await) 원리를 조금이라도 이해하고 있다면, Playwright가 생성한 코드가 얼마나 직관적인지 바로 알 수 있을 거예요. AI는 이 생성된 코드를 최적화하거나, 유지보수가 쉬운 구조로 리팩토링하는 데 결정적인 역할을 합니다.

실전! AI에게 테스트 코드를 부탁해봤습니다

단순한 녹화를 넘어, 이제 AI(GPT-4나 DeepSeek)에게 명령을 내려봅시다. 예를 들어, "우리 쇼핑몰 사이트에서 장바구니에 상품을 담고 결제 페이지까지 가는 테스트 코드를 짜줘"라고 프롬프트를 날리는 거죠.

💡 AI 프롬프트 꿀팁:
"Playwright와 Page Object Model(POM) 패턴을 사용해서 로그인 테스트 코드를 작성해줘. 버튼을 찾을 때 가급적 텍스트 기반의 로케이터(getByRole, getByText)를 우선적으로 사용하고, 에러가 발생하면 스크린샷을 찍도록 구성해줘."

이렇게 AI가 뱉어준 코드는 놀라울 정도로 정교합니다. 아래는 제가 실제로 AI의 도움을 받아 작성한 결제 프로세스 테스트 코드의 일부예요.

import { test, expect } from '@playwright/test';

test('장바구니 담기부터 결제 페이지 진입까지', async ({ page }) => {
// 1. 메인 페이지 접속
await page.goto('https://my-shop.com');

// 2. 검색창에 '아이폰' 입력 후 엔터
await page.getByPlaceholder('상품을 검색하세요').fill('아이폰');
await page.keyboard.press('Enter');

// 3. 첫 번째 상품 클릭
await page.locator('.product-item').first().click();

// 4. '장바구니 담기' 버튼 클릭 (AI가 추천한 텍스트 기반 로케이터)
await page.getByRole('button', { name: '장바구니 담기' }).click();

// 5. 성공 메시지 확인
await expect(page.getByText('장바구니에 추가되었습니다')).toBeVisible();
});

이 코드가 특별한 이유는 무엇일까요? 바로 '사람의 언어'에 가깝게 작성되었다는 점입니다. 클래스 명이나 ID가 바뀌어도 '장바구니 담기'라는 텍스트가 그대로라면 이 테스트는 깨지지 않습니다. AI는 이런 '유지보수가 쉬운 로케이터'를 선택하는 데 탁월한 능력을 보여줍니다.

⚠️ '자동화'라는 장미빛 미래 뒤에 숨은 가시

AI와 자동화가 모든 문제를 해결해주지는 않습니다. 제가 운영체제의 핵심을 확장하는 리눅스 커널 모듈을 다룰 때도 느꼈지만, 도구가 강력할수록 다루는 사람의 주의가 필요해요.

• 플레이크(Flakiness) 현상: 네트워크 속도나 서버 상태에 따라 테스트가 성공했다 실패했다 하는 현상입니다. waitForTimeout 같은 임시방편 대신 Playwright의 자동 대기 기능을 믿으세요.
• AI의 환각(Hallucination): AI는 가끔 존재하지 않는 메서드나 HTML 요소를 상상해서 코드를 짭니다. 반드시 실제 페이지의 DOM 구조를 프롬프트에 함께 넣어주세요.
• 비용 문제: GPT-4 구독료가 부담된다면 DeepSeek 같은 가성비 모델을 활용해 테스트 코드를 생성하는 것도 좋은 전략입니다.

자주 묻는 질문 (FAQ)

Q1. 코딩을 전혀 몰라도 할 수 있나요?

Playwright의 Codegen 기능을 쓰면 마우스 클릭만으로 시작할 수 있습니다. 하지만 더 복잡한 테스트를 위해 Lovable AI 같은 노코드 도구의 도움을 받는 것도 추천해요.

Q2. 기존에 쓰던 Selenium과 뭐가 다른가요?

Playwright는 더 빠르고, 설정이 간편하며, 별도의 드라이버 설치 없이 모든 브라우저를 지원합니다. 특히 자동 대기 기능이 내장되어 있어 'Wait' 코드를 남발할 필요가 없다는 게 가장 큰 장점이죠.

🔗 함께 읽으면 좋은 로댕동의 기술 가이드

• ✅ CrewAI로 자동 서버 점검 시스템 만들기 - 무인 모니터링의 시작
• ✅ 자바스크립트 비동기 처리, 콜백 지옥에서 탈출하는 법
• ✅ TCP/IP 연결의 모든 것: 네트워크 기초 탄탄히 하기

글을 마치며:

기술은 도구일 뿐입니다.
중요한 건 그 도구를 어떻게 사용해 동료들과 더 즐겁게 일하고,
사용자에게 더 가치 있는 서비스를 제공하느냐겠죠.

오늘 글이 여러분의 퇴근 시간을 앞당기는 데 조금이라도 도움이 되었기를 바랍니다!