PlayWright를 이용한 웹앱 테스트

플레이라이트는 웹앱에 대한 테스트 자동화 라이브러리로 JS 코드(또는 TS)로 테스트를 작성할 수 있다. 바이브 코딩 시 기능에 대한 테스트를 AI 통해 하고자할때 매우 유용한데, 웹브라우저의 특정 버튼을 AI가 클릭하고 그 결과가 기대한 것와 같은지에 대한 인터렉티브한 행동 테스트도 가능하다. 우와, 몇달 전까지만 해도 이런건 사람의 영역이라 생각했다. 하나씩 하나씩 인간의 만용을 AI는 박살내고 있다. 겸손 겸손…

플레이라이트의 목적이 특정 웹앱에 대한 테스트에 있다. 즉, 테스트를 위한 독립된 프로젝트를 구성할 수 있다. 명령은 다음과 같다.

npm init playwright@latest

위의 명령이 실행되면 인간은 다음과 같은 내용을 입력해야 한다. (음.. AI를 에이전트라고 부른다면 인간은 어떻게 불러야 구분이 될까? 개발자라고 하기엔 AI 역시 코딩을 작성하므로 개발자가 아닌게 아니니..)

Initializing project in '.'
✔ Do you want to use TypeScript or JavaScript? · TypeScript
✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (Y/n) · false
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true

테스트 프로젝트를 위한 파일들이 자동으로 구성되는데, 여기서 테스트를 위한 코드 작성은 tests 폴더(앞서 인간이 입력한 값)에 example.spec.ts 파일이 보이는데, 그냥 이 파일에 테스트 코드를 입력하면 된다. 이미 테스트로 잘 잘동하는 테스트 코드가 있는데, 그건 지우고 다음과 같은 코드를 작성해 테스트해 보았다.

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

test('login', async () => {
  const browser = await chromium.launch({
    headless: false,
    args: [
      '--enable-unsafe-webgpu',
      '--enable-features=Vulkan'
    ]
  });

  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://www.hyyyydai-3d.com');

  await page.fill('.user-id input', 'gizmo');  
  await page.fill('.user-pw input', '*********');

  await page.locator('.user-id input').press('Tab');

  await page.click('.btn-login');

  await expect(page.getByText('공지사항')).toBeVisible();
});

위의 테스트는 딱 1개인데, 주어진 url에 들어가서 id와 암호를 자동으로 채우고 로그인 버튼을 클릭해서 ‘공지사항’이라는 텍스트가 보이면 테스트 성공이라는 것이다.

내가 테스트해야할 웹 페이지가 3D 그래픽인지라 WebGPU에 대한 활성화 없이는 테스트에 실패함으로, 위의 코드에는 WebGPU에 대한 활성화 코드가 있고 테스트가 잘되는것을 확인할 수 있었다. 실제 테스트 실행은 다음과 같다.

npx playwright test

테스트를 위한 전용 웹브라우저를 보면서 테스트가 진행되는 것을 살펴보고 싶은 꼼꼼이라면 (대신 사는게 고달프겠지.. 나처럼 ㅜ_ㅜ) 다음과 같은 방식의 테스트 실행도 가능하다.

npx playwright test --ui

이 글은 플레이라이트를 처음 사용하는 인간을 위한 가이드일뿐이다. 보다 상세한 방법은 AI에게 물어보고 가이드 받으라.

답글 남기기 응답 취소