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();
inspect에서 'Record'를 누르고 웹사이트의 특정 부분을 선택해보면 알아서 Selector에 맞체 추출을 해준다.
이걸 바로 가져다 사용하면 된다.