Playwright E2E 탐험기

Team by team 이겠지만, TDD에서는 프로덕트 코드를 작성하기전에 테스트코드를 작성하고 그다음으로 넘어가지만 실제로 테스트를 미리 신경쓰고 작성하기에 아직 정해지지 않는 부분까지 생각해야되는데 제한이 있어서 테스트 시나리오 또는 단위를 정하기 너무 힘들다고 생각한다.

현재 사이드 프로젝트 또한 TDD로 진행하지는 않았지만 마무리가 될 시점에 테스트 코드를 작성하기 시작하면서 playwright를 적용해보기로 했다.

하지만 아직 테스트 시나리오를 작성하는것이 익숙하지않아서 MCP로 playwright랑 cursor를 활용해서 테스트 코드를 작성했다.

{playwright mcp}
https://github.com/microsoft/playwright-mcp

우선 제일 처음부터 splash 페이지 부터,회원가입, 로그인까지 진행하는 테스트를 작성했다.

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

// 회원가입 E2E 테스트

test('회원가입 후 /dashboard 진입', async ({ page }) => {
  // 1. 메인 페이지 접속
  await page.goto('http://localhost:5173/');

  // 2. "시작하기" 버튼 클릭
  await page.getByRole('button', { name: '시작하기' }).click();

  // 3. "회원가입" 링크 클릭
  await page.getByRole('link', { name: '회원가입' }).click();

  // 4. 회원정보 입력
  await page.getByRole('textbox', { name: '이름' }).fill('테스트유저');
  // 이메일은 매번 다르게 생성 (중복 방지)
  const email = `testuser6@example.com`;
  await page.getByRole('textbox', { name: '이메일' }).fill(email);
  await page
    .getByRole('textbox', { name: '비밀번호', exact: true })
    .fill('TestPassword123!');
  await page
    .getByRole('textbox', { name: '비밀번호 확인' })
    .fill('TestPassword123!');

  // 5. "회원가입" 버튼 클릭
  await page.getByRole('button', { name: '회원가입' }).click();

  // 6. /dashboard로 이동하는지 확인 (자동 로그인 또는 리다이렉트)
  await page.waitForTimeout(1000); // 네트워크/애니메이션 대기
  await expect(page).toHaveURL(/.*login/);

  // 7. 로그인 페이지에서 이메일과 비밀번호 입력
  await page.getByRole('textbox', { name: '이메일' }).fill(email);
  await page
    .getByRole('textbox', { name: '비밀번호', exact: true })
    .fill('TestPassword123!');

  // 8. "로그인" 버튼 클릭
  await page.getByRole('button', { name: '로그인' }).click();

  await page.waitForTimeout(1000); // 네트워크/애니메이션 대기
  await expect(page).toHaveURL(/.*dashboard/);
  await page.context().storageState({ path: 'auth.json' });
});

테스트를 크게 3가지로 나누게 되는데 단위테스트, 통합 테스트, E2E 테스트가 있다.

단위 테스트 는 특정 모듈또는 특정 단위로 테스트를 만들어서 해당 모듈에 대한 모든 함수 또는 메서드를 검사하는것
통합 테스트 는 외부라이브러리 또는 모듈들의 연결했을때 정상적으로 작동하는것을 검사하는 테스트
E2E 테스트 는 End to End 즉 애플리케이션의 전체적인 흐름을 테스트하는것을 말하는것이다.

이제 추가적인 테스트를 만들어야하는데 궁금증이 생겼다.
만약 로그인테스트를 거치고 다른 페이지들에서 동일한 작업 또는 토큰같은 인증 작업은 어떻게 처리를 해야하는 고민을 해보았다.

방법 1. 로그인 테스트를 한번더 돌려서 인증해서 userId, token을 받는다
방법 2. 이미 존재하는 userId랑 token을 받아서 하드코딩으로 저장해서 사용한다

///test-asset.json
{
  "userTestInfo": {
    "email": "testuser@example.com",
    "password": "TestPassword123!",
    "userId": 9
  },
  "invitationTestInfo": {
    "invitationId": 1,
    "invitationTitle": "Test Invitation",
    "invitationContent": "Test Content",
    "invitationDate": "2025-01-01",
    "invitationTime": "10:00",
    "invitationLocation": "Test Location",
    "invitationContact": "Test Contact",
    "invitationImage": "https://test.com/image.jpg"
  }
}