playwright(Ch1)

Playwright란

• 하나의 API로 모든 최신 브라우저(크로미움, 파이어폭스, 웹킷)에서 빠르고, 안정적인 자동화를 지원하는 MS에서 만든 자동화 도구.
• 공식문서

프로젝트 setting (공식문서 참고)

폴더구조

공식문서를 참고하여 config.js를 작성하였습니다 (너무 많은 옵션들이 존재하여 제가 생각하기에 자주 사용하는거 위주로 작성을 하였습니다. (위,경도 셋팅등 및 Permission 등 다양한 옵션이 존재합니다)
자세한 내용을 확인을 위해서는 공식문서를 확인해주세요 링크

(참고 process.env.CI는 현재 코드가 CI 환경에서 실행되고 있는지를 확인하는 데 사용)

• playwright.config.js

import { defineConfig, devices } from "@playwright/test";

const defaultOptions = {
  baseURL: "http://127.0.0.1:3000",
};

export default defineConfig({
  // 이 구성 파일을 기준으로 "tests" 디렉토리경로
  testDir: "tests",

  // 모든 테스트를 병렬로 실행 유무.
  fullyParallel: true,

  // 소스 코드에 test.only를 실수로 남겨두었을 경우 CI에서 빌드를 실패시킵니다.
  forbidOnly: !!process.env.CI,

  // CI에서만 재시도합니다.
  retries: process.env.CI ? 2 : 0,

  // CI에서 병렬 테스트를 선택 해제합니다.
  workers: process.env.CI ? 1 : undefined,

  // // 사용할 리포터
  reporter: "html",

  use: {
    // `await page.goto('/')`와 같은 액션에서 사용할 기본 URL.
    baseURL: "http://127.0.0.1:3000",

    // 실패한 테스트를 재시도할 때 추적을 수집합니다.
    trace: "on-first-retry",

    // 주어진 저장 상태로 스토리지의 상태를 채웁니다.
    // storageState: "state.json",

    // 모든 페이지에 사용되는 뷰포트.
    viewport: { width: 1280, height: 720 },

    // 사용자 시간대를 에뮬레이트합니다.
    timezoneId: "Asia/Seoul", // 한국 시간대

    // 각 테스트 실패 후 스크린샷을 캡처합니다.
    screenshot: "only-on-failure",
  },
  // 주요 브라우저에 대한 프로젝트를 구성합니다.
  projects: [
    {
      ...defaultOptions,
      name: "Desktop Chrome",
      use: {
        ...devices["Desktop Chrome"],
      },
    },
    {
      ...defaultOptions,
      name: "Mobile Safari",
      use: {
        ...devices["iPhone 13"],
      },
    },
  ],
  // 테스트를 시작하기 전에 로컬 개발 서버를 실행.
  webServer: {
    command: "npm run start",
    url: "http://127.0.0.1:3000",
    reuseExistingServer: !process.env.CI,
  },

  // 테스트 파일을 무시할 Glob 패턴 또는 정규 표현식.
  testIgnore: "*test-assets",

  // 테스트 파일과 일치하는 Glob 패턴 또는 정규 표현식.
  testMatch: "*tests/spec/*.spec.ts",

  // 테스트 완료시 결과 파일을 저장할 경로 입니다
  outputDir: "test-results",

  // 각 테스트별 타임아웃 시간. (30 seconds by default)
  timeout: 30000,
});

간단한 테스트 playwright 작동시키기

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

test.use({
  viewport: { width: 1600, height: 1200 },
});

test("첫테스트입니다(모바일 + 데스크탑)", async ({ page }) => {
  await page.goto("http://localhost:3000");
});

npx playwright show-report를 실행

강제로 실패케이스를 만들기

-> 3000 으로 열리는 port를 3001로 셋팅하였을때 나오는걸 확인해보자

test("첫테스트입니다(모바일 + 데스크탑)", async ({ page }) => {
  await page.goto("http://localhost:3001");
});

오류에대한 캡쳐화면 및 "outputDir"에 셋팅해둔 곳으로 결과 실행유무에 대한 파일이 저장되는것을 확인 할 수있었습니다

VScode extension을사용한 디버깅

extension 설치전 버전을 확인해주세요
npm install @playwright/test@latest --save-dev

1. "Playwright Test for VScode" extension 설치
2. vscode에서 "command + shift + p"를 사용하여 'Install Playwright'를 설치
   
   

셋팅 후 화면

• 화살표를 클릭
  

보다 직관적으로 성공여부 및 각 테스트별로 바로바로 확인이가능한것으로 확인할 수있습니다

참고

• 공식문서를 보고 초기 셋팅등에 대한 내용으로 Ch1을 마무리하고, 계속계속 고도화하여 CH2,3,4 쭉쭉 개발 해보도록 하겠습니다 셋팅코드