Playwright는 웹 테스트 및 자동화를 위한 프레임워크입니다. 단일 API로 Chromium, Firefox 및 WebKit을 테스트할 수 있습니다. Playwright는 항상 친환경적이고 유능하며 안정적 이고 빠른 크로스 브라우저 웹 자동화를 지원하도록 제작되었습니다.
| 리눅스 | macOS | 윈도우 | |
|---|---|---|---|
| 크롬 131.0.6778.33 | ✅ | ✅ | ✅ |
| 웹킷 18.0 | ✅ | ✅ | ✅ |
| 파이어폭스 132.0 | ✅ | ✅ | ✅ |
헤드리스 실행은 모든 플랫폼의 모든 브라우저에서 지원됩니다. 자세한 내용은 시스템 요구 사항을 확인하세요.
Python, .NET 또는 Java용 극작가를 찾고 계십니까?
Playwright에는 엔드투엔드 테스트를 위한 자체 테스트 실행기가 있으며 이를 Playwright 테스트라고 합니다.
Playwright Test를 시작하는 가장 쉬운 방법은 init 명령을 실행하는 것입니다.
# Run from your project's root directory
npm init playwright@latest
# Or create a new project
npm init playwright@latest new-project이렇게 하면 구성 파일이 생성되고 선택적으로 예제, GitHub Action 워크플로 및 첫 번째 테스트 example.spec.ts가 추가됩니다. 이제 어설션 작성 섹션으로 바로 이동할 수 있습니다.
종속성을 추가하고 브라우저를 설치합니다.
npm i -D @playwright/test
# install supported browsers
npx playwright install선택적으로 선택한 브라우저만 설치할 수 있습니다. 자세한 내용은 브라우저 설치를 참조하세요. 또는 브라우저를 전혀 설치하지 않고 기존 브라우저 채널을 사용할 수도 있습니다.
자동 대기 . 극작가는 작업을 수행하기 전에 요소가 실행 가능해질 때까지 기다립니다. 또한 다양한 자기 성찰 이벤트가 있습니다. 이 두 가지를 결합하면 불안정한 테스트의 주요 원인인 인위적인 시간 초과가 필요하지 않습니다.
웹 우선 주장 . 극작가 어설션은 동적 웹을 위해 특별히 생성되었습니다. 필요한 조건이 충족될 때까지 검사가 자동으로 재시도됩니다.
추적 . 테스트 재시도 전략을 구성하고 실행 추적, 비디오 및 스크린샷을 캡처하여 플레이크를 제거합니다.
브라우저는 서로 다른 프로세스에서 서로 다른 출처에 속하는 웹 콘텐츠를 실행합니다. Playwright는 최신 브라우저의 아키텍처에 맞춰 프로세스 외부에서 테스트를 실행합니다. 이를 통해 Playwright는 일반적인 프로세스 내 테스트 실행기 제한 사항에서 벗어날 수 있습니다.
여러 가지 모든 것 . 여러 탭, 여러 원본 및 여러 사용자를 포괄하는 테스트 시나리오입니다. 다양한 사용자에 대해 다양한 컨텍스트를 사용하여 시나리오를 만들고 이를 서버에 대해 한 번의 테스트로 실행해 보세요.
신뢰할 수 있는 이벤트 . 요소를 가리키고 동적 컨트롤과 상호 작용하며 신뢰할 수 있는 이벤트를 생성합니다. Playwright는 실제 사용자와 구별할 수 없는 실제 브라우저 입력 파이프라인을 사용합니다.
프레임을 테스트하고 Shadow DOM을 뚫습니다. 극작가 선택기는 Shadow DOM을 관통하여 프레임을 원활하게 입력할 수 있도록 합니다.
브라우저 컨텍스트 . Playwright는 각 테스트에 대한 브라우저 컨텍스트를 만듭니다. 브라우저 컨텍스트는 새로운 브라우저 프로필과 동일합니다. 이는 오버헤드 없이 완전한 테스트 격리를 제공합니다. 새로운 브라우저 컨텍스트를 생성하는 데는 몇 밀리초밖에 걸리지 않습니다.
한 번 로그인해 보세요 . 컨텍스트의 인증 상태를 저장하고 모든 테스트에서 재사용합니다. 이는 각 테스트에서 반복적인 로그인 작업을 우회하면서도 독립적인 테스트를 완전히 격리합니다.
코드젠 . 작업을 기록하여 테스트를 생성합니다. 어떤 언어로든 저장하세요.
극작가 검사관 . 페이지를 검사하고, 선택기를 생성하고, 테스트 실행을 단계별로 진행하고, 클릭 지점을 확인하고, 실행 로그를 살펴보세요.
추적 뷰어 . 테스트 실패를 조사하기 위해 모든 정보를 캡처합니다. Playwright 추적에는 테스트 실행 스크린캐스트, 라이브 DOM 스냅샷, 작업 탐색기, 테스트 소스 등이 포함되어 있습니다.
TypeScript, JavaScript, Python, .NET 또는 Java용 극작가를 찾고 계십니까?
이러한 Playwright 테스트 예제를 실행하는 방법을 알아보려면 시작하기 문서를 확인하세요.
이 코드 조각은 Playwright 홈페이지로 이동하고 스크린샷을 저장합니다.
import { test } from '@playwright/test' ;
test ( 'Page Screenshot' , async ( { page } ) => {
await page . goto ( 'https://playwright.dev/' ) ;
await page . screenshot ( { path : `example.png` } ) ;
} ) ; 이 스니펫은 특정 지리적 위치의 기기에서 Mobile Safari를 에뮬레이션하고,maps.google.com으로 이동하고, 작업을 수행하고, 스크린샷을 찍습니다.
import { test , devices } from '@playwright/test' ;
test . use ( {
... devices [ 'iPhone 13 Pro' ] ,
locale : 'en-US' ,
geolocation : { longitude : 12.492507 , latitude : 41.889938 } ,
permissions : [ 'geolocation' ] ,
} )
test ( 'Mobile and geolocation' , async ( { page } ) => {
await page . goto ( 'https://maps.google.com' ) ;
await page . getByText ( 'Your location' ) . click ( ) ;
await page . waitForRequest ( / .*preview/pwa / ) ;
await page . screenshot ( { path : 'colosseum-iphone.png' } ) ;
} ) ; 이 코드 조각은 example.com으로 이동하고 페이지 컨텍스트에서 스크립트를 실행합니다.
import { test } from '@playwright/test' ;
test ( 'Evaluate in browser context' , async ( { page } ) => {
await page . goto ( 'https://www.example.com/' ) ;
const dimensions = await page . evaluate ( ( ) => {
return {
width : document . documentElement . clientWidth ,
height : document . documentElement . clientHeight ,
deviceScaleFactor : window . devicePixelRatio
}
} ) ;
console . log ( dimensions ) ;
} ) ; 이 코드 조각은 페이지에 대한 요청 라우팅을 설정하여 모든 네트워크 요청을 기록합니다.
import { test } from '@playwright/test' ;
test ( 'Intercept network requests' , async ( { page } ) => {
// Log and continue all network requests
await page . route ( '**' , route => {
console . log ( route . request ( ) . url ( ) ) ;
route . continue ( ) ;
} ) ;
await page . goto ( 'http://todomvc.com' ) ;
} ) ; 
