1. Playwright 시작해보기

Playwright는 e2e 테스트를 위한 도구이다. 크로니움, 사파리, 파이어폭스 등 다양한 환경에서의 테스트를 가능하게 해준다.

 

🎈 설치

아래 명령어를 통해 설치가 가능하다.

yarn create playwright

 

 

설치가 완료되면 다음과 같은 파일이 생성된다.

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

• playwright.config.ts : playwright에 대한 설정
• tests : 기본 설정은 해당 폴더 내에 존재하는 테스트를 실행하게 해준다.
• test-examples : 테스트 예시이다.

 

👓 실행

테스트를 실행하는 명령어는 다음과 같다.

npx playwright test

 

명령어를 실행하면 테스트가 진행이 되는데 별다른 설정을 하지 않았다면 크로니움, 사파리, 파이어폭스에 대한 테스트를 실행하게 된다.

 

테스트 실행이 완료가 되면 결과를 리포트로 확인할 수 있다. 리포트에서는 성공, 실패에 대한 결과 및 대략적으로 어디에서 테스트를 실패했는지를 확인할 수 있다.

 

아래는 모든 테스트가 정상적으로 성공했기 때문에 체크 표시가 되어 있다.

 

만약 테스트에 실패하게 되면 아래와 같이 X 표시가 되어 있다.

 

 

그리고 실패한 테스트를 클릭 하면 아래와 같이 좀 더 상세한 실패 원인을 확인할 수 있다.

 

📯 UI 모드로 실행

UI 모드는 테스트를 터미널에서 실행 후 결과만 확인하는 것이 아니라 UI 에서도 진행할 수 있게 해준다. 전체 테스트 리스트를 확인할 수 있고 특정 테스트만 실행할 수 있게 해준다. 이를 통해 테스트 디버깅을 효율적으로 하도록 도와준다.

npx playwright test --ui

 

 

명령어 실행 시 아래와 같은 UI 프로그램이 실행된다. 좌측에서 테스트 리스트를 확인할 수 있고 전체, 파일별, 테스트별 실행도 가능하고 여러가지 기능들을 제공한다.

 

 

🚩 테스트 작성해보기

기존에 테스트 코드를 작성해본적이 있다면 간단하게 playwright를 작성해보는 것은 어렵지 않다.

 

test 함수를 통해서 테스트를 정의하고, test로 전달된 함수 내부에서 given, when, then에 맞추어 코드를 구성하면 된다. 사용되는 함수명이나 matcher 또한 직관적인 이름으로 구성되어 있어 이해하기 어렵지 않다.

 

아래의 코드는 playwright 홈페이지에서 Playwright 타이틀이 존재하는지 확인하는 테스트 코드이다.

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

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

  await expect(page).toHaveTitle(/Playwright/);
});

• page.goto : 테스트하려는 사이트로의 접속을 한다.
• expect/toHaveTitle : 대상(page)에서 Playwright 글자를 가진 타이틀을 확인한다.

 

playwright에서는 동작을 수행한 뒤 해당 동작이 수행되었는지 여부를 확인할때까지의 시간을 기다려준다. 또는 대상이 존재하는 지 여부를 확인할때 까지도 일정시간 기다려주는 처리가 되어 있다.

 

그래서 위의 테스트코드만 보더라도 async/await을 사용하는데 이러한 이유때문이다. 이러한 처리가 모두 되어 있기 때문에 개발자가 직접 동작이 완료될 때까지 기다리는 처리를 할 필요가 없다.

 

이우에는 playwright 에서 제공하는 Action 및 Assertion 들에 대해 알아볼 예정이다.