Playwright 자동화 Introduction (+window 환경에서 playwright 설치)

안녕하세요.

오랜만에 포스팅으로 돌아왔습니다. 이번에는 웹 자동화 도구 중에 하나인 playwright에 대해 공부를 시작하면서 제가 정리하고 사용해 본 후기들을 공유하고자 포스팅을 남깁니다.

우선, playwright가 나온지는 꽤 되어서 많은 분들이 알고 있고 들어봤으리라 생각합니다. 이전에는 selenium을 기본으로 웹자동화를 진행하고 있었기 때문에 Playwright가 나와있어도 그다지 관심이 가지 않았었는데요. 알고 보니 이점들이 꽤 많아 자동화를 계획 중인 분들이시라면 사용하고자 하는 목적에 맞게 비교해서 사용할 수 있도록 알고 계시면 좋을 것 같습니다.

 

Playwright Introduction

Playwright는 웹 브라우저를 자동화하여 엔드투엔드(E2E) 테스트를 수행할 수 있는 오픈소스 프레임워크입니다. Selenium의 한계를 극복하고자 Microsoft에서 2020년에 출시했으며, 현재 웹 테스팅 분야에서 주목받고 있는 도구입니다.

 

Playwright 장점

그렇다면 어떤점들이 playwright의 장점인지에 대해 알려드리겠습니다.

1. 멀티 브라우저 지원의 완성체 : Playwright는 Chromium, Firefox, Safari(WebKit) 세 가지 주요 브라우저 엔진을 모두 지원합니다. 하나의 테스트 코드로 모든 브라우저에서 동일한 테스트를 실행할 수 있어, 크로스 브라우저 호환성 검증이 매우 간편합니다.

2. 빠르고 안정적인 실행 : 기존 Selenium이 가진 속도와 안정성 문제를 해결했습니다. Playwright는 브라우저와 직접 통신하여 WebDriver의 중간 단계를 생략하므로, 더 빠르고 안정적인 테스트 실행이 가능합니다.

3. 웹 애플리케이션 지원 :

• SPA(Single Page Application) 지원
• 자동 대기(Auto-wait) 기능으로 안정적인 요소 선택 > 요소가 액션을 수행할 수 있는 상태가 될 때까지 자동으로 대기합니다. 더 이상 명시적인 sleep()이나 복잡한 대기 조건을 작성할 필요가 없어졌습니다.
• 네트워크 요청 인터셉트와 모킹 기능
• 스크린샷과 비디오 녹화 자동 생성

 

이렇게 위와 같은 장점들이 있는데 확실히 selenium보다 자동화 초기 셋팅이 간단해질 수 있고, 커스텀해서 사용하던 대기 조건이나 멀티 브라우저 예외처리등에 대한 리소스를 줄일 수 있다는 장점이 뚜렷하게 보입니다. 그래서 저도 이와 같은 조건들을 이용해서 테스트 문을 작성해 보기 위해서 우선 설치부터 진행합니다.

 

Playwright Installation

저는 윈도우 환경에서 CMD창에서 npm을 이용해서 설치를 진행했다는 점을 먼저 밝힙니다.

cmd 창에서 아래 명령어를 입력하면 설치과정이 시작됩니다. (명령어를 입력한 위치에서 파일이 설치되니 참고부탁드립니다)

npm init playwright@latest

입력하고 나면, 초기 셋팅에 관한 4가지 질문이 순서대로 나옵니다.

1. 1. TypeScript or JavaScript (default: TypeScript) > 언어를 선택하는 건데, 저는 자바스크립트 경험이 있어서 자바스크립트로 선택했지만 타입스크립트가 더 편한 분들은 이걸로 선택하시면 됩니다.
2. Tests folder name (default: tests, or e2e if tests already exists) > tests 폴더가 없다면 기본으로 tests가 디폴트로 입력되어 있어서 저는 그대로 진행했습니다.
3. Add a GitHub Actions workflow (recommended for CI) > github actoin 워크플로를 추가할 수 있는 부분인데 전 CI까지는 고려하고 있지 않아 제외했습니다.
4. Install Playwright browsers (default: yes) > playwright 브라우저 설치까지 포함할것인지 묻는 질문입니다.

 

4가지 질문에 모두 답을 하면 그때부터 다운로드가 시작됩니다.

cmd창에서 다운로드가 끝나면 해당 명령어를 수행한 폴더 위치에 tests, tests-examples라고 파일들이 설치되면 완료입니다!

 

그리고 이후로는, Playwright test를 실행해보고 어떻게 테스트가 되는지 예시를 통해 보도록 하겠습니다.

npx playwright test --ui

tests 폴더 안에는 example.spec.js 파일이 하나 들어있습니다. 위의 명령어를 입력하면 Playwright가 UI모드로 해당 파일을 테스트할 수 있게 창이 뜹니다. 해당 UI모드 창이 뜨면 RUN을 돌려보면 예제파일에 들어있는 페이지가 제대로 로드되고 제목이 맞는지와 사용자가 링크가 있는 버튼을 클릭했을 때 이동되는지에 대한 테스트문이 실행됩니다.

 

 

 

UI모드 말고 Headless 모드로도 사용가능한데 아래 명령어를 입력하면 됩니다.

npx playwright test

 

보통은 테스트 스크립트를 처음 작성하거나 시각적으로 확인이 필요하다면 UI 모드를 사용하고, 완성된 테스트를 대량으로 실행하거나 서버환경에서 테스트를 할 때에는 Headless 모드를 사용합니다.

Headless모드는 브라우저가 화면에 보이지 않는 상태로 백그라운드에서 실행되기 때문에 속도가 매우 빠르다는 장점이 있지만, 테스트 과정 중 문제 발생 지점을 쉽게 파악할 수 없기 때문에 상황에 맞게 모드를 선택하며 쓰는 게 좋을 것 같습니다.

 

그리고 UI, Headeless모드 말고 debug 모드도 있습니다. 한 테스트가 실행될때마다 브라우저 페이지가 뜨고 테스트가 단계별로 진행됩니다.

npx playwright test --debug

보통 디버그모드는 테스트 실패이유를 찾으려고 할 때 사용됩니다. 타이밍 이슈가 있거나 복잡한 플로우 속에서 어떤 단계에서 실패하는지 한 줄씩 확인이 가능해서 유용하게 사용할 수 있습니다.

 

 

 

참고사이트 : https://playwright.dev/docs/intro#installing-playwright

Installation | Playwright