Playwright - E2E 테스트 환경 세팅

설치

playwright 최신 버전 버전 설치 명령어는 다음과 같다.

npm init playwright@latest

혹은 playwright 로 된 프로젝트를 생성하고자 한다면 다음과 같다.

npm init playwright@latest new-project-name

test 패키지 설치

npm install -D @playwright/test

playwright config 설정

local 에서 인증되지 않은 https 페이지 접근 허용

기본적으로 playwright 패키지를 init 하면 playwright.config.ts 가 설치된다.
이때 인증서 권한과 관련한 문제가 발생하게 되는데, 이를 해결하기 위해 별도의 config 옵션을 설정해야한다.

다음은 report 에서 확인된 권한 관련 에러 내용이다.

page.goto: net::ERR_CERT_AUTHORITY_INVALID at https://10.20.10.200:8080/
=========================== logs ===========================
navigating to "https://10.20.10.200:8080/", waiting until "load"
============================================================

  2 |
  3 | test('테스트', async ({ page }) => {
> 4 |   await page.goto(`https://10.20.10.200:8080/`);
    |              ^
  5 |
  6 |   await expect(page).toHaveTitle(/title/);
  7 | });

    at /Users/spacedevelopher/Desktop/development/e2etest/tests/test.ts:4:14

playwright.config.ts 내에서 use 프로퍼티가 존재하는데, 여기에 옵션을 추가하면 된다.

// playwright.config.ts

export default defineConfig({
    ... 기존 config 옵션들 ...
    use: {
        ... 기존 use 옵션들 ...
        ignoreHTTPSErrors: true,
      }
})
...

테스트 실행

npx playwright test --headed

레포트 확인

npx playwright show-report

Test Generator 를 통한 Code 생성

playwright 에서는 브라우저 를 통한 Test Code Generator 기능을 지원한다.

브라우저에서 click 및 input 시 자동으로 Test code 가 생성된다.

codegen 실행

npx playwright codegen url-path

codegen 트러블 슈팅

url-path 를 입력하면 해당 url 로 접근해서 테스트 할 수 있다.

https 로 접근으로시 authentication 관련 문제가 발생할 수 있다.

npx playwright codegen http://10.100.20.21:8080 

[Error: net::ERR_CERT_AUTHORITY_INVALID at http://10.100.20.21:8080/
=========================== logs ===========================
navigating to "http://10.100.20.21:8080/", waiting until "load"
============================================================]

이런 경우 추가적인 옵션값 설정을 통해 해결이 가능하다.

npx playwright codegen http://10.100.20.21:8080  --ignore-https-errors

레퍼런스

Playwright 공식 홈페이지
Playwright NPM Docs
Playwright Docs - Install