1.3 첫 Test와 Report

Test는 준비, 사용자 행동, 관찰 가능한 결과의 흐름으로 씁니다. 내부 구현 변수보다 사용자가 보는 role, text, URL을 검증합니다.

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

test('adds a todo', async ({ page }) => {
  await page.goto('/');

  await page.getByLabel('할 일').fill('Playwright 공부');
  await page.getByRole('button', { name: '추가' }).click();

  await expect(
    page.getByRole('listitem').filter({ hasText: 'Playwright 공부' }),
  ).toBeVisible();
});

실행 범위

npx playwright test
npx playwright test tests/todo.spec.ts
npx playwright test -g 'adds a todo'
npx playwright test --project=chromium
npx playwright test --headed

HTML report는 test, project, retry, error와 attachment를 묶어 보여 줍니다.

npx playwright show-report

Test title은 구현이 아니라 행위를 설명합니다. button test보다 로그인 실패 시 오류 메시지를 보여 준다가 failure triage에 유용합니다. 한 test에 너무 많은 사용자 여정을 넣으면 실패 지점을 찾기 어렵고 병렬 실행 단위도 커집니다.

Test 구조를 읽는 법

test('사용자가 Todo를 추가한다', async ({ page }) => {
  // Arrange
  await page.goto('/');
  // Act
  await page.getByLabel('할 일', { exact: true }).fill('첫 test');
  await page.getByRole('button', { name: '추가' }).click();
  // Assert
  await expect(page.getByRole('listitem')).toContainText('첫 test');
});

AAA 주석을 모든 test에 남길 필요는 없지만, 한 test가 여러 story를 섞지 않는지 판단하는 데 유용합니다.

Report에서 볼 것

• Project와 browser
• Test duration과 retry index
• 실패한 action/assertion
• Expected와 received
• Source location
• Screenshot, video, trace, attachment
• Tag와 annotation

학습용 실패 만들기

1. Expected title을 틀리게 작성합니다.
2. 존재하지 않는 role을 찾습니다.
3. 같은 이름의 button을 두 개 만들어 strictness error를 냅니다.
4. Disabled button을 click해 actionability log를 봅니다.
5. HTML report와 trace가 제공하는 정보의 차이를 기록합니다.

참고: Writing tests, Running tests, HTML reporter