극작가: 웹 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에 중점을 두겠습니다.

설치 및 데모

1. Node.js가 설치되어 있는지 확인하세요.
2. npm 또는 Yarn을 사용하여 PlayWright 프로젝트를 초기화합니다.

   # Using npm
   npm init playwright@latest

   # Using yarn
   yarn create playwright

1. 안내를 따르세요.
   • 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 메소드와 다릅니다.

텍스트 입력

주로 , 또는 [contenteditable] 속성이 있는 요소를 대상으로 하는 텍스트 입력에 채우기 방법을 사용하세요.<br>

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/);
});

체크박스와 라디오

locator.setChecked() 또는 locator.check()를 사용하여 input[type=checkbox], input[type=radio] 또는 [role=checkbox] 속성이 있는 요소와 상호 작용합니다.

  npx playwright test

컨트롤 선택

locator.selectOption()을 사용하여 요소:

  npx playwright test landing-page.spec.ts

마우스 클릭

기본 작업:

  npx playwright test --debug

다른 사람이 다룬 요소의 경우 세게 클릭하세요.

npx playwright codegen https://leapcell.io/

또는 프로그래밍 방식으로 클릭 이벤트를 트리거합니다.

// Text input
await page.getByRole('textbox').fill('Peter');

문자 입력

locator.type() 메서드는 문자별 입력을 시뮬레이션하고 keydown, keyup 및 keypress 이벤트를 트리거합니다.

await page.getByLabel('I agree to the terms above').check();

expect(await page.getByLabel('Subscribe to newsletter').isChecked()).toBeTruthy();

// Uncheck
await page.getByLabel('XL').setChecked(false);

특수 키

특수 키에는 locator.press()를 사용하세요.

// Select by value
await page.getByLabel('Choose a color').selectOption('blue');

// Select by label
await page.getByLabel('Choose a color').selectOption({ label: 'Blue' });

// Multi-select
await page.getByLabel('Choose multiple colors').selectOption(['red', 'green', 'blue']);

지원되는 키에는 Backquote, Minus, Equal, 백슬래시, 백스페이스, Tab, Delete, Escape, ArrowDown, End, Enter, Home, Insert, PageDown, PageUp, ArrowRight, ArrowUp, F1-F12, Digit0-Digit9 및 KeyA가 포함됩니다. -KeyZ.

파일 업로드

업로드할 파일을 지정하려면 locator.setInputFiles()를 사용하세요. 여러 파일이 지원됩니다:

// Left click
await page.getByRole('button').click();

// Double click
await page.getByText('Item').dblclick();

// Right click
await page.getByText('Item').click({ button: 'right' });

// Shift+click
await page.getByText('Item').click({ modifiers: ['Shift'] });

// Hover
await page.getByText('Item').hover();

// Click at specific position
await page.getByText('Item').click({ position: { x: 0, y: 0 } });

초점 요소

요소에 초점을 맞추려면 locator.focus()를 사용하세요.

   # Using npm
   npm init playwright@latest

   # Using yarn
   yarn create playwright

드래그 앤 드롭

드래그 앤 드롭 프로세스에는 다음 네 단계가 포함됩니다.

1. 드래그 가능한 요소 위에 마우스를 올려보세요.
2. 마우스 왼쪽 버튼을 누르세요.
3. 마우스를 원하는 위치로 이동하세요.
4. 마우스 왼쪽 버튼을 놓습니다.

locator.dragTo() 메소드를 사용할 수 있습니다:

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

대화상자 처리

기본적으로 Playwright는 경고, 확인, 프롬프트와 같은 대화 상자를 자동으로 취소합니다. 대화를 허용하도록 대화 핸들러를 사전 등록할 수 있습니다.

Running 6 tests using 6 workers

  6 passed (10s)

To open the last HTML report run:

  npx playwright show-report

새 페이지 처리

새 페이지가 나타나면 팝업 이벤트를 사용하여 처리할 수 있습니다.

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/);
});

---

극작가를 위한 최고의 플랫폼: Leapcell

Leapcell은 분산 애플리케이션용으로 설계된 최신 클라우드 컴퓨팅 플랫폼입니다. 유휴 비용이 없는 종량제 모델을 채택하여 사용한 리소스에 대해서만 비용을 지불합니다.

극작가 애플리케이션을 위한 Leapcell의 고유한 이점

1. 비용 효율성

   • 종량제: 트래픽이 적은 시간에는 리소스 낭비를 방지하고 피크 시간에는 자동으로 확장됩니다.
   • 실제 사례: 예를 들어, getdeploying.com의 계산에 따르면 기존 클라우드 서비스에서 vCPU 1개와 RAM 2GB 가상 머신을 임대하는 비용은 월 25달러 정도입니다. Leapcell에서는 25달러로 60ms의 평균 응답 시간으로 694만 개의 요청을 처리하는 서비스를 지원할 수 있어 가격 대비 더 나은 가치를 제공합니다.

2. 개발자 경험

   • 사용 편의성: 최소한의 설정 요구 사항을 갖춘 직관적인 인터페이스.
   • 자동화: 개발, 테스트, 배포를 단순화합니다.
   • 원활한 통합: Go, Python, Node.js, Rust 등을 지원합니다.

3. 확장성 및 성능

   • 자동 확장: 리소스를 동적으로 조정하여 최적의 성능을 유지합니다.
   • 비동기 최적화: 동시성이 높은 작업을 쉽게 처리합니다.
   • 글로벌 접근: 분산된 데이터 센터를 통해 지연 시간이 짧은 액세스가 지원됩니다.

더 많은 배포 예시를 보려면 설명서를 참조하세요.

위 내용은 극작가: 웹 UI 자동화 테스트 프레임워크의 포괄적인 개요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!