playwright를 알아보자

PlayWright란? (https://playwright.dev/)

MS에서 내놓은 웹앱 자동화 테스트 툴이다. 

Any browser • Any platform • One API

어떤 브라우저, 어떤 플랫폼에서든지 하나의 API로 테스트를 할 수 있다는게 강점이다.

추가적으로 여러가지 장점을 더 나열해놨지만, 나에게는 이게 가장 큰 매력인것 같다. (업무상 다양한 기기에서 테스트를 필요하다.

 

설치 방법

설치는 간단하다. 아래 두 명령어만 넣으면 된다.

npm i -D @playwright/test
# install supported browsers
npx playwright install

Test #1

'Hello World'를 찍듯이, 가장 기본적인 테스트부터 해보자

//파일명 : tests/example.spec.ts

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

test('basic test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  const title = page.locator('.navbar__inner .navbar__title');
  await expect(title).toHaveText('Playwright');
});

코드를 설명하자면, 

'https://playwright.dev/'  사이트로 이동하고, selector를 이용하여 navbar__inner와 .navbar__title을 찾는다. 

찾은 Selector가 'Playwright'인지 보는 것이다. 

 

실행하는 모습이 보고싶지 않다면

$ npx playwright test 

브라우저를 띄워서 실행하는 모습을 보고 싶으면 아래 명령어를 이용하면 된다. 

$ npx playwright test --headed

 

Test #2 - Global config file 적용

Test#1은 기본 browser에서만 테스트를 진행했다.

config 파일을 만들어서 다양하게 테스트를 진행해 볼 수도 있다. 

projects 부분에 여러개의 devices를 넣어준다. (아이폰이나 갤럭시도 지원을 한다.)

명령어는 동일하게 npx playwright test로 진행하면 된다.

// playwright.config.ts
import { type PlaywrightTestConfig, devices } from '@playwright/test';

const config: PlaywrightTestConfig = {
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  use: {
    trace: 'on-first-retry',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
};
export default config;

Test #3 - inspect 사용

selector를 찾으라니...정말 어려운일이 아닐까라는 생각이 든다. 

웹이 class명이 다 있는것도 아니고, title을 모두 가진것들이 아니라고 생각하기때문이다.

 

그래서 나온것이 playwright inspect이다. 

Playwright를 debug 모드로 실행시켜 한단계씩 진행가능하게 한다.

 

PWDEBUG=1 npx playwright test

그리고 code 중간에 아래와 같은 구문을 넣으면 break point처럼 동작한다. 

// Pause on the following line.
await page.pause();

pause로 멈춘 모습

inspect에서 'Record'를 누르고 웹사이트의 특정 부분을 선택해보면 알아서 Selector에 맞체 추출을 해준다. 

이걸 바로 가져다 사용하면 된다.