[Cursor] Playwright로 테스트부터 디버깅까지 한번에 끝내기

요즘 개발 트렌드를 보면 코드 짜는 것 자체보다 디버깅에 쏟는 시간이 훨씬 길어지는 것 같다. 특히 `Cursor`, `ChatGPT` 같은 AI 코딩 도구의 도움으로 코드를 빠르게 생성할 수록, 생성된 코드를 읽고 이해하며 잠재된 버그를 찾아내는 데 더 많은 시간이 필요하다는 아이러니한 상황에 직면하곤 한다. 😭

 

 

 

 

프론트엔드 개발자라면 UI 자동화 테스트의 중요성을 익히 알고 있을 것이다. 하지만 테스트 코드를 짜는 것만큼이나 어려운 것이 테스트 실패 시 원인 파악과 디버깅이다. 

테스트 코드의 중요성을 알지만, 테스트 코드를 작성하는 비용 때문에 망설이는 개발자도 많은 것 같다. (일단 나부터 그러하다.)

 

매번 브라우저를 띄워 수동으로 재현해보고, 콘솔 로그를 뒤져보고... 이 과정에서 소중한 개발 시간을 너무 많이 소모하고 있다는 생각이 들었다.

 

오늘은 이 모든 고민을 해결해줄 강력한 도구, Playwright와 AI 코딩 도구의 환상적인 시너지에 대해 소개하려고 한다. Playwright는 단순히 자동화 테스트만 하는 것이 아니라, AI의 도움을 받아 디버깅까지 압도적으로 편리하게 만들어주는 기능들을 가지고 있다. 그동안 여러 번 듣고 보기는 했지만 제대로 활용해본 적이 없어서 이참에 제대로 써보기로 했다! 🤧

 

---

 

Playwright MCP란?

Playwright는 마이크로소프트에서 개발한 오픈 소스 웹 테스트 및 자동화 라이브러리로, 단일 API를 통해 Chromium, Firefox, WebKit을 모두 지원한다. 현대 웹 앱을 위한 엔드투엔드(E2E) 테스트를 위해 사용되며, 특히 시나리오 기록을 위한 Codegen (코드 생성기), 그리고 디버깅을 위한 Trace Viewer와 같은 도구를 제공한다.

 

예전에는 셀레니움 써서 직접 코드 짜줬는데 이제는.. MCP 연동해서 자연어만으로도 테스트가 가능하다.

(딸깍의 완성)

 

Fast and reliable end-to-end testing for modern web apps | Playwright

 

---

Playwright는 왜 디버깅에 강력할까?

기존 테스트 도구들이 제공하는 제한적인 디버깅 방식과 달리, Playwright는 "테스트가 실패한 바로 그 순간"을 완벽하게 재현하고 분석할 수 있는 도구들을 기본으로 제공한다. (마치 타임머신을 타고 문제의 순간으로 돌아가는 것과 같다.)

핵심 디버깅 기능들:

1. Playwright Inspector:
   • 테스트가 실행되는 과정을 실시간으로 브라우저에서 보면서 단계별로 진행할 수 있다.
   • 각 스텝에서 어떤 요소가 선택되었는지, 어떤 액션이 발생했는지 시각적으로 확인할 수 있어 '내가 생각한 대로' 테스트가 동작하는지 쉽게 검증할 수 있다.
   • 테스트 코드에서 page.pause()를 호출하면 Inspector가 자동으로 열려 해당 시점에서 멈추고 원하는 조작을 해볼 수 있다.
2. Trace Viewer (트레이스 뷰어):
   • 테스트가 끝난 후, 마치 동영상처럼 테스트 실행 과정을 다시 돌려볼 수 있는 강력한 도구이다.
   • 어떤 클릭이 발생했고, 어떤 텍스트가 입력되었으며, 어떤 네트워크 요청이 있었는지 등 모든 이벤트가 기록된다.
   • 각 스텝별로 DOM 스냅샷, 네트워크 요청, 콘솔 로그, 소스 코드까지 한눈에 볼 수 있어, 테스트가 실패한 지점의 정확한 원인을 파악하는 데 압도적인 도움을 준다.
3. Auto-waiting 및 Retry:
   • 요소가 나타날 때까지, 혹은 특정 상태가 될 때까지 자동으로 기다려주기 때문에, 테스트가 불안정하게 실패하는(Flaky Test) 경우가 훨씬 줄어든다.
   • 명시적으로 waitForSelector, waitForTimeout 등을 쓸 필요가 거의 없어 테스트 코드 작성도 간결해진다.

 

Playwright 설치하기

Playwright 패키지 설치

npm install playwright

Playwright MCP 추가

`mcp.json`에 아래와 같이 playwright를 추가한다.

"playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }

• https://www.npmjs.com/package/@playwright/mcp

 

MCP 활성화 시 에러가 뜬다면

Error

Show Output

mcp.json 내 args를 확인해보자

저 부분을 "@playwright/mcp@latest"로 수정하니 정상적으로 로딩되었다.

"playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@executeautomation/playwright-mcp-server"
      ]
    }

 

---

Playwright로 테스트부터 디버깅까지 경험해 보기

간단한 예제 코드를 통해 Playwright가 어떻게 테스트와 디버깅을 효율적으로 만들어주는지 살펴보자.

 

// 예시: 로그인 테스트
test('should login successfully', async ({ page }) => {
  await page.goto('https://example.com/login'); // 해당 URL로 이동
  await page.fill('input[name="username"]', 'testuser');
  await page.fill('input[name="password"]', 'password123');
  // await page.pause(); // 디버깅 시 여기에 pause()를 넣으면 Inspector가 열림
  await page.click('button[type="submit"]');
  await expect(page).toHaveURL(/dashboard/); // 대시보드로 리다이렉트 되었는지 확인
});

위 코드가 실패했을 때, npx playwright test --debug 명령어를 실행하면 Playwright Inspector가 열리면서 실행 과정을 단계별로 볼 수 있다.

또한, playwright.config.ts 파일에서 trace: 'on-first-retry' 옵션을 설정해두면, 테스트가 한 번 실패했을 때 자동으로 트레이스 파일을 생성하여 Trace Viewer로 자세히 분석할 수 있다.

 

---

마치며

 

Playwright는 강력한 자동화 테스트 기능을 넘어, 개발자가 겪는 가장 큰 고통 중 하나인 "디버깅"을 혁신적으로 개선해주는 도구이다.

테스트 코드를 작성하는 시간보다 디버깅하는 시간이 더 길었던 경험이 있으시다면, 지금 바로 Playwright를 도입해보자. 여러분의 개발 생산성이 한 단계 더 업그레이드될 것이다.

다음 포스팅에서는 Playwright의 Trace Viewer를 더욱 자세히 활용하는 방법에 대해 알아보아야겠다.

 

---

댓글로 여러분의 Playwright 활용 팁도 공유해주세요🐿️!