오픈소스 웹 테스트, 자동화 라이브러리 Playwright 소개

 

Playwright는 오픈소스 웹 테스트, 자동화 라이브러리로 MS에서 제작했습니다.

Playwright 장점

• 하나의 API로 Chromium, Firefox, WebKit까지 테스트 할 수 있습니다.
• 관련 툴 제공
  • Codegen. : 작업을 기록하여 테스트를 생성. 어떤 언어로든 저장. https://playwright.dev/docs/codegen
  • Playwright inspector: 페이지를 검사하고, 선택기를 생성하고, 테스트 실행을 단계별로 진행하고, 클릭 지점을 확인하고, 실행 로그를 탐색합니다.
  • Trace Viewer. 테스트 실패를 조사하기 위해 모든 정보를 캡처합니다. 극작가 추적에는 테스트 실행 스크린캐스트, 라이브 DOM 스냅샷, 액션 탐색기, 테스트 소스 등이 포함됩니다.
  • Playwright Test for VSCode : VSCode 에 plugin 을 설치하면 실행과 디버깅이 유리합니다.

 

1.설치

터미널에서 npm init playwright@latest 으로 설치합니다. TypeScript 옵션으로 설치한 예시입니다.

playwright npm init playwright@latest -- --next
Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
✔ Do you want to use TypeScript or JavaScript? · TypeScript
✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (y/N) · true
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true
Initializing NPM project (npm init -y)…
Wrote to /Users/Documents/playwright/package.json:

{
  "name": "playwright",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Installing Playwright Test (npm install --save-dev @playwright/test@next)…

added 4 packages, and audited 5 packages in 500ms

found 0 vulnerabilities
Downloading browsers (npx playwright install)…
Writing playwright.config.ts.
Writing .github/workflows/playwright.yml.
Writing tests/example.spec.ts.
Writing tests-examples/demo-todo-app.spec.ts.
Writing package.json.
✔ Success! Created a Playwright Test project at /Users/1112469/Documents/playwright

Inside that directory, you can run several commands:

  npx playwright test
    Runs the end-to-end tests.

  npx playwright test --ui
    Starts the interactive UI mode.

  npx playwright test --project=chromium
    Runs the tests only on Desktop Chrome.

  npx playwright test example
    Runs the tests in a specific file.

  npx playwright test --debug
    Runs the tests in debug mode.

  npx playwright codegen
    Auto generate tests with Codegen.

We suggest that you begin by typing:

    npx playwright test

And check out the following files:
  - ./tests/example.spec.ts - Example end-to-end test
  - ./tests-examples/demo-todo-app.spec.ts - Demo Todo App end-to-end tests
  - ./playwright.config.ts - Playwright Test configuration

Visit https://playwright.dev/docs/intro for more information. ✨

Happy hacking! 🎭
➜  playwright

설명에는 실행하는 방법 등이 나옵니다.

 

VSCode로 설치 폴더를 열었습니다.

playwright.config.ts
package.json
package-lock.json
tests/
  example.spec.ts
tests-examples/
  demo-todo-app.spec.ts

자동으로 생성된 테스트 코드는 아래와 같습니다.

tests > example.spec.ts

타이틀이 있는지 보는 케이스와 start link를 클릭하는 2개 테스트 케이스입니다.

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

test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Click the get started link.
  await page.getByRole('link', { name: 'Get started' }).click();

  // Expects the URL to contain intro.
  await expect(page).toHaveURL(/.*intro/);
});

 

2. 실행

ui를 이용한 실행

아래 명령어를 실행하면 실행UI 가 뜹니다. 원하는 테스트 케이스를 실행하면 결과를 화면으로 볼 수 있습니다.

npx playwright test --ui 

실행하고 브라우저가 열리는 시간까지 확인할 수 있습니다.

 

터미널에서 실행

➜  playwright npx playwright test     

Running 6 tests using 5 workers
  6 passed (4.7s)

To open last HTML report run:

  npx playwright show-report

➜  playwright npx playwright show-report

  Serving HTML report at http://localhost:9323. Press Ctrl+C to quit.

기본적으로 테스트는 3개의 작업자를 사용하여 3개의 브라우저, 크롬, 파이어폭스 및 웹킷에서 모두 실행됩니다.

이것은 playwright.config 파일에서 구성할 수 있습니다. 테스트는 헤드리스 모드에서 실행되므로 테스트를 실행할 때 브라우저가 열리지 않습니다.

테스트 결과 및 테스트 로그가 터미널에 표시됩니다.

 

터미널에서 npx playwright show-report 명령어를 수행하면 아래와 같이 브라우저마다 실행한 결과가 웹페이지로 나옵니다.

3. VSCode 실행옵션

테스트 케이스를 에이닷 웹 페이지로 바꿔서 검증을 해 보겠습니다. 타이틀에 에이닷이 있는지 검증하는 케이스입니다.

test('has title', async ({ page }) => {
  await page.goto('https://a.sktelecom.com/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/내 손안의 AI 친구 에이닷/);
});

VSCode 에서는 브라우저에서 실행하는 옵션과 트레이스 뷰어에서 실행하는 옵션을 선택할 수 있습니다.

 

브라우저 선택

그리고 브라우저를 선택적으로 실행할수도 있습니다.

 

pick locator

데모에서 웹페이지만 에이닷으로 변경한 테스트 케이스입니다. 당연히 에러가 발생합니다. 이 때 pick locator를 이용하여 엘리먼트 값을 알아보겠습니다.

test('get started link', async ({ page }) => {
  await page.goto('https://a.sktelecom.com/');

  // Click the get started link.
  await page.getByRole('link', { name: 'Get started' }).click();

  // Expects the URL to contain intro.
  await expect(page).toHaveURL(/.*intro/);
});

1. 테스트 케이스를 실행합니다.
2. 에러가 난 상황에서 pick locator를 선택하고 브라우저를 클릭합니다.
3. 확인하고자 하는 웹 페이지 엘리멘트를 클락하여 정보를 확인합니다

 

link name이 구글 플레이에서 다운로드 라는 것을 알 수 있습니다. 코드의 name 을 변경하고 첫번째 데모에서 확인했던 타이틀 확인하는 코드를 사용하여 다시 실행해 봅니다.

test('get started link', async ({ page }) => {
  await page.goto('https://a.sktelecom.com/');

  // Click the get started link.
  await page.getByRole('link', { name: '구글 플레이에서 다운로드' }).click();

  // Expects the name to contain intro.
  await expect(page).toHaveTitle("A.(에이닷) - AI, 대화 (Open Beta) - Google Play 앱");
   
});

실행하면서 에러가 발생할 경우 기대 결과와 실제 결과를 보여주는 기능이 유용합니다.

 

 

한장으로 보는 playwright 참고해보세요

참고)

https://playwright.dev/

https://playwright.dev/docs/intro

Installation | Playwright

출처:https://devocean.sk.com/blog/techBoardDetail.do?ID=165090