e2e 테스트 도구로 Playwright를 선택한 이유

Playwright 소개와 적용기를 공유합니다 🙆‍♀️
테스트 도구로 앓던 저에게 Playwright를 소개해주신 @heelieben님께 감사를 드려요 🌸

목차

• e2e 테스트 도구로 Playwright를 선택한 이유
• Best practice 및 주요 개념 (예정)
• 실제 프로젝트 적용기 (예정)

Intro

잠깐 👀, e2e 테스트란?
End to End, 프로그램과 사용자가 만나는 '화면'에서 이뤄지는 상호작용을 테스트하는 것입니다.

로그인 페이지를 예로 든다면 '로그인'이라는 버튼이 화면에 잘 출력되나? 인풋값들을 다 입력하면 로그인 버튼이 활성화 되는가? 클릭하면 어떤 처리를 해주는가? 등을 확인하는 것이죠.

직접 눌러가며 잘 동작하는지 확인해볼 수도 있지만 cypress, playwright 같은 e2e 테스트 도구들을 활용해 컴퓨터에게 일감을 넘길 수 있습니다 🦾

🌝 Playwright란?

end-to-end 테스트 도구로, 하나의 API를 이용해 Chromium, WebKit, Firefox를 포함한 모든 모던 랜더링 엔진을 테스트할 수 있습니다.

더 확장된 auto-waiting, retry-ability 기능, 모든 모던 랜더링 엔진 테스트, 테스트 속도 향상(브라우저 컨텍스트 재사용, 병렬 테스트 진행 등), 편리한 디버깅 툴, 다양한 언어 지원 등을 지원하며 인기를 얻고있는 테스트 도구입니다.

다음 명령어로 간단하게 사용할 수 있으며 기본 환경 설정과 예제 코드도 제공합니다.

npm init playwright@latest

Installing Playwright

🌝 Playwright 너 뭐 돼?

얼마전까지만 해도 e2e하면 Cypress일 정도로 입지가 굳건했던 것 같은데, 최근 Playwright라는 도구가 자주 언급되는 것 같아요.

마침 사내 프로젝트에 e2e 테스트를 도입할 필요가 있어 도구를 선택하기 위해 간단한 리서치를 해보았습니다.

e2e 테스트 자체를 처음 써보기 때문에(..🙈) Cypress과 자세한 비교를 할 순 없지만 둘 중에 Playwright를 선택한 이유를 간략히 소개드리려고 합니다.

1. 향상된 테스트 속도

Playwright는 기본적으로 하나의 테스트 파일당 하나의 워커를 실행합니다. 따라서 테스트 파일이 여러개가 있으면 각각의 워커에서 병렬적으로 동시에 진행할 수 있어 훨씬 빠른 테스트 결과를 받아볼 수 있습니다.

물론 설정 파일을 통해 특정 테스트들은 순차적으로 진행한다던가 워커의 갯수를 제한하는 등의 조작도 가능합니다. playwright Pararellism and sharding

반면 Cypress는 3.1.0 버전부터 병렬 테스트가 가능하지만 성능상의 이유로 권장하지 않고 있습니다. cypress 공식문서

2. 폭넓은 지원 브라우저

Playwright는 모든 모던 브라우저엔진을 지원합니다.

• Cypress
  - Chrome
  - Edge
  - Electron
  - Firefox

• Playwright
  - Chromium
  - Firefox
  - WebKit
  - Chrome & Edge (playwright의 기본값 설정은 아님)

3. 도움되는 디버깅 툴

Playwright는 편리한 디버깅 툴을 많이 제공합니다.

• 중복되거나 모호한 선택자를 사용하지 않도록 Locators 추천
• 화면에서 조작하는대로 코드로 만들어주는 Codegen
• HTML 보고서 [Opening HTML report]

3-1. codegen으로 테스트 자동완성

다음은 실제 인증 상태 등록을 위해 로그인 과정을 코드로 적용하려는 화면입니다. (비디오 추가 예정)

Record 버튼은 누른 후 브라우저(좌측 이미지)에서 상호작용하고 있으면 playwright 코드(우측 이미지)를 작성해줍니다 🙊

물론 출력된 코드는 실제 테스트에 필요한 적절한 셀렉터와 액션으로 적절히 수정해주어야 합니다.

• codegen 자동 완성
  실제로 조작한 모든 내용이 코드로 변환됨

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

test('test', async ({ page }) => {
  await page.getByPlaceholder('아이디').click();
  await page.getByPlaceholder('아이디').fill('hello');
  await page.getByPlaceholder('아이디').press('Tab');
  await page.getByPlaceholder('비밀번호').fill('wrongpassword');
  page.once('dialog', dialog => {
    console.log(`Dialog message: ${dialog.message()}`);
    dialog.dismiss().catch(() => {});
  });
  await page.getByPlaceholder('비밀번호').press('Enter');
});

• 수정 후
  필요한 액션만 사용하도록 정제

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

test('test', async ({ page }) => {
	// 입력창에 값을 넣고 로그인을 클릭하는 과정만 추출합니다.
	// placeholder보다 요소의 역할을 더 잘 나타내는 title로 선택하였습니다.
	await page.getByTitle('아이디').fill(process.env.TEST_USER_ID);
	await page.getByTitle('비밀번호').fill(process.env.TEST_USER_PW);
	await page.getByTitle('로그인', { exact: true }).click();
});

3-2. HTML 보고서

실행된 결과를 html 문서로 만들어줍니다. 따라서 실제 웹 페이지를 통해 테스트 결과를 볼 수 있으며 필터링, 검색, 상세 설명 등을 볼 수 있습니다.

4. Cypress보다 더 많은 이벤트 지원

• cypress
  - hover, drag 지원 안 함
• playwright
  - hover, drag 지원함

5. 문법

자바스크립트 문법을 그대로 사용할 수 있어 러닝커브가 매우 낮다는 장점도 있습니다.

이 외에도 javascript와 typescript뿐만 아니라 다양한 언어(python, java, .net )를 지원하여 좀 더 폭넓은 개발자들도 E2E 테스트를 도입하기 좋다는 장점이 있습니다. Supported languages

둘의 차이를 더 자세히 비교해보고 싶으신 분들은 Cypress vs Playwright: Let the Code Speak Recap 를 참고해보세요! 직접 사용자들에게 설문조사를 하며 비교하는데, 기존에 작업하던 도구가 있으시면 재밌게 보실 수 있을 것 같습니다.

결론

Playwright를 사용해보자 😁

(다소 편협한) Playwright와 Cypress의 비교 포인트 잘 보셨나요.

분명 Cypress가 내세울 수 있는 장점도 많습니다. 더 크고 강한 커뮤니티, 네이티브 모바일 앱 지원, 그리고 제가 파악하지 못한 부분들도 많을 것 같아요.

전 병렬 테스트로 더 빠르게 테스트할 수 있다는 점, 여러 페이지와 탭을 넘나들 수 있고 문법이 더 친숙하다는 점에서 Playwright를 사용해보기로 했습니다.

참고 링크

• E2E 테스트 : Playwright / heelieben
• Cypress vs Playwright: Let the Code Speak Recap
• Playwright로 E2E 테스트 작성하기