[Playwright] 테스트 브라우저 화면 영상 녹화 - playwright-video

Playwright의 테스팅 화면을 영상으로 녹화하는 방법 중 하나인 playwright-video 라이브러리입니다.

playwright-video 라이브러리를 설치하면, 간단한 코드를 통해 영상 녹화를 핸들링할 수 있습니다.

 

설치 

npm i playwright playwright-video @ffmpeg-installer/ffmpeg

 

활용 예

const { saveVideo } = require('playwright-video');

test.describe('record video sample', () => {
  let testTab;
  let saveVideo;
  
  test.beforeAll(async ({ browser }) => { // 테스트 시작 전 영상 녹화 세팅
    testTab = await browser.newPage(); // 영상 녹화 할 페이지 초기화
    saveVideo = await saveVideo(testTab, 'videos/test.mp4'); // 영상 저장 경로 설정
  });

  test.afterAll(async({ browser }) => { // 테스트 종료 후 영상 녹화 종료
    await Promise.all([
      testTab?.isClosed() ? Promise.resolve() : testTab.close(),
      saveVideo?.stop?.(), // 녹화 종료
    ]);
    browser.close();
  });
});

위 코드는 제가 사용해보고 메모해두었던 코드입니다.

test.beforeAll 에서 녹화할 대상을 지정하고, test.afterAll 에서 녹화를 종료하는 코드로 아주 쉽게 사용이 가능합니다.

 

Playwright의 초기 버전에서는 영상 녹화를 자체적으로 지원하지 않아 이런 라이브러리들이 사용되었으나,

최근에는 config.ts에 설정만으로 녹화가 가능해졌으니 직접 영상 녹화를 핸들링 할 이유가 없으시다면

공식 문서를 참조하여 사용하셔도 될 것 같습니다.

공식 문서 : https://playwright.dev/docs/videos

 

위와 같은 이유 때문인지 playwright-video 라이브러리는 npm에 4년간 업데이트가 없는 점도 사용하실 때 고려하시기 바랍니다.

https://www.npmjs.com/package/playwright-video