Playwright Capture Artifacts 사용하기

Playwright는 테스트 실행 중 스크린샷, 비디오, 트레이스 파일과 같은 다양한 아티팩트를 자동으로 저장하는 기능을 제공합니다. 이러한 Artifacts(운영체제나 애플리케이션을 사용하면서 생성되는 흔적 이하 아티팩트로 명명함)는 테스트의 동작을 이해하고 디버깅하는 데 매우 유용합니다.

 

Playwright에서 아티팩트 캡처 설정하기

테스트 실행 중 스크린샷, 비디오, 트레이스 파일을 자동으로 캡처하려면 Playwright 설정을 구성해야 합니다. 이 설정은 Playwright 구성 파일(playwright.config.ts)에서 할 수 있습니다.

 

아티팩트 자동 캡처를 위한 예제 설정

1. Playwright 설정 파일 구성

playwright.config.ts 파일을 생성하거나 편집하여 다음과 같은 설정을 포함시킵니다:

import { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  use: {
    // 실패 시 스크린샷 캡처
    screenshot: 'only-on-failure',

    // 실패 시 테스트 실행 비디오 녹화
    video: 'retain-on-failure',

    // 실패 시 트레이싱 활성화
    trace: 'retain-on-failure',
  },
  reporter: [['html', { outputFolder: 'test-results', open: 'never' }]],
};

export default config;

 

 

2. 테스트 스크립트 작성

 

예를 들어 example.spec.ts라는 테스트 파일을 생성하고 다음 코드를 추가합니다:

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

test.describe('Example Test Suite', () => {
  test('example test with screenshots and tracing', async ({ page }) => {
    // 트레이싱 시작
    await page.tracing.start({ screenshots: true, snapshots: true });

    // 페이지로 이동
    await page.goto('https://example.com');

    // 작업 수행
    await page.fill('#username', 'testuser');
    await page.fill('#password', 'password');
    await page.click('#submit');

    // 로그인 후 스크린샷 찍기
    await page.screenshot({ path: 'screenshots/after-login.png' });

    // 로그인 후 URL 확인
    await expect(page).toHaveURL('https://example.com/dashboard');

    // 트레이싱 중지 및 트레이스 파일 저장
    await page.tracing.stop({ path: 'trace.zip' });
  });

  test('example test with video recording', async ({ browser }) => {
    // 비디오 녹화를 활성화한 새로운 브라우저 컨텍스트 생성
    const context = await browser.newContext({
      recordVideo: {
        dir: 'videos/', // 비디오를 저장할 디렉토리
      },
    });

    // 컨텍스트 내에서 새로운 페이지 생성
    const page = await context.newPage();

    // 페이지로 이동
    await page.goto('https://example.com');

    // 작업 수행
    await page.fill('#search', 'playwright');
    await page.click('#search-button');

    // 검색 결과 확인
    await expect(page).toHaveSelector('.search-results');

    // 비디오 녹화를 완료하기 위해 컨텍스트 닫기
    await context.close();
  });
});

설명

1. 트레이스 설정:
   • await page.tracing.start({ screenshots: true, snapshots: true });는 스크린샷 및 스냅샷을 캡처하도록 트레이싱을 시작
   • await page.tracing.stop({ path: 'trace.zip' });는 트레이싱을 중지하고 트레이스 파일을 trace.zip으로 저장
2. 스크린샷 캡처:
   • await page.screenshot({ path: 'screenshots/after-login.png' });는 특정 시점에 스크린샷을 캡처하여 지정된 경로에 저장
3. 비디오 녹화:
   • const context = await browser.newContext({ recordVideo: { dir: 'videos/' } });는 비디오 녹화가 활성화된 새로운 브라우저 컨텍스트를 생성하고, 비디오가 저장될 디렉토리를 지정
   • await context.close();는 컨텍스트를 닫아 비디오를 저장

 

아티팩트 보기

• 스크린샷: screenshots 디렉토리에 저장된 PNG 파일을 열어 확인
• 비디오: videos 디렉토리에 저장된 비디오 파일을 미디어 플레이어로 열어 확인
• 트레이스 파일: Playwright Trace Viewer를 사용하여 트레이스 파일을 검사

 

npx playwright show-trace trace.zip

위 명령은 테스트 실행의 세부 정보를 보여주는 웹 인터페이스를 열어, 스크린샷, 네트워크 요청, 콘솔 로그 등을 확인할 수 있습니다.