E2E 테스트 프레임 워크 - Playwright_번역본

안녕하세요 Devport 입니다. 이번에 테스트 프레임워크 중 하나인 E2E에 대해서 스터디 하기 위해서 일단 Github 문서를 번역해두고 추후에도 쉽게 확인하기 위해서 해당 블로그를 작성하였습니다. 의역 및 오역이 있을 수 있을 수 있기 때문에 잘못 번역된 부분은 알려주시면 감사하겠습니다. 

Playwright?

단일 API로 Chromium, Firefox 및 WebKit을 자동화하는 Node.js 라이브러리 입니다. Playwright는 항상 친환경적이고 유능하고 안정적이며 빠른 크로스 브라우저 웹 자동화를 가능하게도록 구축되었습니다.

	Linux	macOS	Windows
Chromium 97.0.4681.0	✅	✅	✅
WebKit 15.4	✅	✅	✅
Firefox 93.0	✅	✅	✅

사용방법

npm i -D playwright

위 명령어를 커멘드에서 실행하게 되면 프로젝트에 Chromium, Firefox 및 Webkit용 Playwright 및 브라우저 바이너리가 설치 됩니다. 일단 설치하게 된다면 Node.js 스크립트에서 Playwright를 요구하고 웹 브라우저 상호 작용을 자동화 할 수 있습니다.

 

기능

Playwright는 단일 페이지 앱 및 프로그레시브 웹 앱에서 사용되는 광범위하고 증가하는 웹 브라우저 기능 세트를 자동화 하도록 구축되었습니다.

• 여러 페이지, 도메인 및 iframe에 걸쳐 있는 시나리오
• 작업(클릭, 채우기 등)을 실행하기 전에 요소가 준비 될 때까지 자동대기
• 네트워크 요청을 stubbing(스터빙, 다른 소스로 대리하는 역할) 및 mocking(목킹, 가상데이터)을 위한 네트워크 활동 Intercept(인터셉트, 서버에 대한 요청을 intercept에서 대신 응답)
• 모바일 장비, geolocation(지리적 위치), 권한에 대하여 에뮬레이션
• shadow-piercing selector를 통한 웹 구성 요소 지원
• 마우스, 키보드 기본 입력 이벤트
• 파일 업로드 및 다운로드

예제

Page screenshot

Chromium, Firefox 및 WebKit에서 whatsmyuseragent.org로 각 환경에 이동하여 3장의 스크린샷을 저장합니다.

const playwright = require('playwright');

(async () => {
  for (const browserType of [playwright.chromium, playwright.firefox, playwright.webkit]) {
    const browser = await browserType.launch();
    const context = await browser.newContext();
    const page = await context.newPage();
    await page.goto('http://whatsmyuseragent.org/');
    await page.screenshot({ path: `example-${browserType.name()}.png` });
    await browser.close();
  }
})();

Mobile and geolocation

지정된 지리적 위치에서 기기의 Mobile Safari를 에뮬레이트하고 maps.google.com으로 이동하여 작업을 수행하고 난 뒤에 스크린샷을 생성

const { webkit, devices } = require('playwright');
const iPhone11 = devices['iPhone 11 Pro'];

(async () => {
  const browser = await webkit.launch();
  const context = await browser.newContext({
    ...iPhone11,
    locale: 'en-US',
    geolocation: { longitude: 12.492507, latitude: 41.889938 },
    permissions: ['geolocation']
  });
  const page = await context.newPage();
  await page.goto('https://maps.google.com');
  await page.click('text="Your location"');
  await page.waitForRequest(/.*preview\/pwa/);
  await page.screenshot({ path: 'colosseum-iphone.png' });
  await browser.close();
})();

Evaluate in browser context

Firefox에서 example.com으로 이동하고 페이지 컨텍스트에서 스크립트를 실행

const { firefox } = require('playwright');

(async () => {
  const browser = await firefox.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://www.example.com/');
  const dimensions = await page.evaluate(() => {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      deviceScaleFactor: window.devicePixelRatio
    }
  });
  console.log(dimensions);

  await browser.close();
})();

Intercept network requests

모든 네트워크 요청을 기록하기 위해 Webkit 페이지에 대한 요청 라우팅을 설정

const { webkit } = require('playwright');

(async () => {
  const browser = await webkit.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  // Log and continue all network requests
  await page.route('**', route => {
    console.log(route.request().url());
    route.continue();
  });

  await page.goto('http://todomvc.com');
  await browser.close();
})();

본 문서: https://github.com/microsoft/playwright