극작가: 웹 UI 자동화 테스트 프레임워크의 포괄적인 개요
PlayWright는 Microsoft에서 개발한 웹 UI 자동화 테스트 프레임워크입니다.
모바일 브라우저도 지원하는 크로스 플랫폼, 크로스 언어, 크로스 브라우저 자동화 테스트 프레임워크를 제공하는 것을 목표로 합니다.
공식 홈페이지 설명:
- 자동 대기, 페이지 요소에 대한 지능형 어설션 및 실행 추적을 통해 웹페이지의 불안정성을 처리하는 데 매우 효과적입니다.
- 테스트를 실행하는 프로세스와 다른 프로세스로 브라우저를 제어하여 프로세스 내 테스트 실행기의 한계를 없애고 Shadow DOM 침투를 지원합니다.
- PlayWright는 각 테스트에 대한 브라우저 컨텍스트를 생성합니다. 브라우저 컨텍스트는 완전히 새로운 브라우저 프로필과 동일하므로 비용이 전혀 들지 않고 전체 테스트 격리가 가능합니다. 새로운 브라우저 컨텍스트를 생성하는 데는 몇 밀리초밖에 걸리지 않습니다.
- 코드 생성, 단계별 디버깅, 트레이스 뷰어 등의 기능을 제공합니다.
PlayWright 대 셀레늄 대 Cypress
현재 사용 가능한 최고의 웹 UI 자동화 테스트 프레임워크는 무엇입니까? 눈에 띄는 옵션에는 10년 된 Selenium, 최근 인기 있는 Cypress, 그리고 여기서 소개하는 PlayWright가 포함됩니다. 그들은 어떻게 다릅니 까? 아래는 참고용으로 요약된 비교입니다
| Feature | PlayWright | Selenium | Cypress |
|---|---|---|---|
| Supported Languages | JavaScript, Java, C#, Python | JavaScript, Java, C#, Python, Ruby | JavaScript/TypeScript |
| Supported Browsers | Chrome, Edge, Firefox, Safari | Chrome, Edge, Firefox, Safari, IE | Chrome, Edge, Firefox, Safari |
| Testing Framework | Frameworks for supported languages | Frameworks for supported languages | Frameworks for supported languages |
| Usability | Easy to use and configure | Complex setup with a learning curve | Easy to use and configure |
| Code Complexity | Simple | Moderate | Simple |
| DOM Manipulation | Simple | Moderate | Simple |
| Community Maturity | Improving gradually | Highly mature | Fairly mature |
| Headless Mode Support | Yes | Yes | Yes |
| Concurrency Support | Supported | Supported | Depends on CI/CD tools |
| iframe Support | Supported | Supported | Supported via plugins |
| Driver | Not required | Requires a browser-specific driver | Not required |
| Multi-Tab Operations | Supported | Not supported | Supported |
| Drag and Drop | Supported | Supported | Supported |
| Built-in Reporting | Yes | No | Yes |
| Cross-Origin Support | Supported | Supported | Supported |
| Built-in Debugging | Yes | No | Yes |
| Automatic Wait | Yes | No | Yes |
| Built-in Screenshot/Video | Yes | No video recording | Yes |
주요 비교:
- 지원 언어: PlayWright 및 Selenium은 Java, C# 및 Python을 지원하므로 JavaScript/TypeScript에 익숙하지 않은 테스트 엔지니어들 사이에서 더욱 인기가 높습니다.
- 기술적 접근: PlayWright와 Selenium은 모두 Google의 원격 디버깅 프로토콜을 사용하여 Chromium 기반 브라우저를 제어합니다. Firefox와 같은 브라우저의 경우 이러한 프로토콜이 없으면 JavaScript 삽입을 사용합니다. Selenium은 이를 드라이버에 캡슐화하고 PlayWright는 이를 직접 호출합니다. 반면 Cypress는 JavaScript를 사용하여 브라우저를 제어합니다.
- 브라우저 지원: Selenium은 Internet Explorer를 지원하지만 IE는 단계적으로 폐지되고 있으므로 이는 무관합니다.
- 사용 용이성: 세 가지 프레임워크 모두 학습 곡선이 있습니다. 그러나 PlayWright와 Cypress는 Selenium에 비해 간단한 시나리오에서 더 사용자 친화적입니다.
시작하기
PlayWright는 여러 언어를 지원하지만 Node.js에 크게 의존합니다. Python 또는 Java 버전을 사용하는지 여부에 관계없이 PlayWright는 초기화 중에 Node.js 드라이버를 다운로드하는 동안 Node.js 환경이 필요합니다. 따라서 이 가이드에서는 JavaScript/TypeScript에 중점을 두겠습니다.
설치 및 데모
- Node.js가 설치되어 있는지 확인하세요.
- npm 또는 Yarn을 사용하여 PlayWright 프로젝트를 초기화합니다.
# Using npm npm init playwright@latest # Using yarn yarn create playwright
- 안내를 따르세요.
- TypeScript 또는 JavaScript를 선택합니다(기본값: TypeScript).
- 테스트 디렉터리 이름을 지정하세요.
- PlayWright 지원 브라우저 설치 여부를 결정합니다(기본값: True).
브라우저 다운로드를 선택하면 PlayWright에서 Chromium, Firefox 및 WebKit을 다운로드하는데 시간이 다소 걸릴 수 있습니다. 이 프로세스는 PlayWright 버전이 업데이트되지 않는 한 첫 번째 설정 중에만 발생합니다.
프로젝트 구조
초기화 후 프로젝트 템플릿을 받게 됩니다:
playwright.config.ts # PlayWright configuration file package.json # Node.js configuration file package-lock.json # Node.js dependency lock file tests/ # Your test directory example.spec.ts # Template test case tests-examples/ # Example tests directory demo-todo-app.spec.ts # Example test case
예제 테스트 사례 실행:
npx playwright test
테스트는 헤드리스 모드에서 자동으로 실행되며 결과는 다음과 같이 표시됩니다.
Running 6 tests using 6 workers 6 passed (10s) To open the last HTML report run: npx playwright show-report
예제 소스 코드
example.spec.ts 테스트 사례는 다음과 같습니다.
import { test, expect } from '@playwright/test';
test('has title', async ({ page }) => {
await page.goto('https://playwright.dev/');
await expect(page).toHaveTitle(/Playwright/);
});
test('get started link', async ({ page }) => {
await page.goto('https://playwright.dev/');
await page.getByRole('link', { name: 'Get started' }).click();
await expect(page).toHaveURL(/.*intro/);
});
- 첫 번째 테스트: 페이지 제목에 "극작가"가 포함되어 있는지 확인합니다.
- 두 번째 테스트: "시작하기" 링크를 클릭하고 URL을 확인합니다.
각 테스트 방법에는 다음이 포함됩니다.
- 테스트 이름(예: '제목 있음').
- 테스트 로직을 실행하는 함수
주요 방법은 다음과 같습니다.
- page.goto: URL로 이동합니다.
- Expect(page).toHaveTitle: 페이지 제목을 확인합니다.
- page.getByRole: 역할별로 요소를 찾습니다.
- 대기: 비동기 작업이 완료될 때까지 기다립니다.
명령줄에서 테스트 실행
다음은 일반적인 명령입니다:
- 모든 테스트 실행:
# Using npm npm init playwright@latest # Using yarn yarn create playwright
- 특정 테스트 파일 실행:
playwright.config.ts # PlayWright configuration file package.json # Node.js configuration file package-lock.json # Node.js dependency lock file tests/ # Your test directory example.spec.ts # Template test case tests-examples/ # Example tests directory demo-todo-app.spec.ts # Example test case
- 테스트 사례 디버그:
npx playwright test
코드 기록
Codegen 기능을 사용하여 상호작용을 기록하세요.
Running 6 tests using 6 workers 6 passed (10s) To open the last HTML report run: npx playwright show-report
기록된 코드를 파일에 복사할 수 있습니다. 참고: 레코더는 호버링과 같은 복잡한 동작을 처리하지 못할 수도 있습니다.
심층 극작가 가이드
작업 및 행동
이 섹션에서는 페이지 요소와 상호작용하기 위한 몇 가지 일반적인 극작가 작업을 소개합니다. 앞서 소개한 로케이터 개체는 페이지를 만드는 동안 실제로 페이지의 요소를 찾지 않습니다. 요소가 페이지에 존재하지 않더라도 요소 로케이터 메서드를 사용하여 로케이터 개체를 가져오면 예외가 발생하지 않습니다. 실제 요소 조회는 상호 작용 중에만 발생합니다. 이는 페이지에서 요소를 직접 검색하고 해당 요소가 발견되지 않으면 예외를 발생시키는 Selenium의 findElement 메소드와 다릅니다.
텍스트 입력
주로 ,