Playwright 테스트 작성

첫 Playwright 테스트

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

test('opens the home page', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveURL(/.*localhost/);
});

page 픽스처

goto로 이동하기

await page.goto('/login');      // resolves against baseURL
await page.goto('https://example.com'); // absolute also works

로케이터로 요소 찾기

const submit = page.getByRole('button', { name: 'Sign in' });
const email = page.getByLabel('Email');

입력하고 클릭하기

await page.getByLabel('Email').fill('ada@example.com');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Sign in' }).click();

자동 대기로 불안정한 대기 제거하기

// No need for: await page.waitForTimeout(2000)
await expect(page.getByText('Welcome back')).toBeVisible();

describe로 테스트 그룹화하기

test.describe('Login flow', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/login');
  });

  test('shows the form', async ({ page }) => {
    await expect(page.getByLabel('Email')).toBeVisible();
  });
});

전체 사용자 여정 테스트하기

test('user can log in and see dashboard', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('ada@example.com');
  await page.getByLabel('Password').fill('secret');
  await page.getByRole('button', { name: 'Sign in' }).click();
  await expect(page).toHaveURL(/.*dashboard/);
});

테스트 실행하기

npx playwright test
npx playwright test --headed
npx playwright test --ui

실패 디버깅하기

npx playwright test --trace on
npx playwright show-trace trace.zip

테스트 격리가 중요합니다

빠른 확인

복습