PlayWright는 Microsoft에서 개발한 웹 UI 자동화 테스트 프레임워크입니다.
모바일 브라우저도 지원하는 크로스 플랫폼, 크로스 언어, 크로스 브라우저 자동화 테스트 프레임워크를 제공하는 것을 목표로 합니다.
공식 홈페이지 설명:
현재 사용 가능한 최고의 웹 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는 여러 언어를 지원하지만 Node.js에 크게 의존합니다. Python 또는 Java 버전을 사용하는지 여부에 관계없이 PlayWright는 초기화 중에 Node.js 드라이버를 다운로드하는 동안 Node.js 환경이 필요합니다. 따라서 이 가이드에서는 JavaScript/TypeScript에 중점을 두겠습니다.
# Using npm npm init playwright@latest # Using yarn yarn create playwright
브라우저 다운로드를 선택하면 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/);
});
각 테스트 방법에는 다음이 포함됩니다.
주요 방법은 다음과 같습니다.
다음은 일반적인 명령입니다:
# 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 메소드와 다릅니다.
주로 ,