PlayWright는 Microsoft에서 개발한 웹 UI 자동화 테스트 프레임워크입니다. 모바일 브라우저도 지원하는 크로스 플랫폼, 크로스 랭귀지, 크로스 브라우저 자동화 테스트 프레임워크를 제공하는 것을 목표로 합니다.

공식 홈페이지에 설명된 내용은 다음과 같습니다.

• 자동 대기, 페이지 요소에 대한 지능형 어설션, 실행 추적 기능을 통해 웹 페이지의 불안정성을 효과적으로 처리할 수 있습니다.
• 테스트를 실행하는 프로세스와 다른 프로세스에서 브라우저를 제어하므로 인프로세스 테스트 러너의 제한을 제거하고 Shadow DOM 침투를 지원합니다.
• PlayWright는 각 테스트에 대한 브라우저 컨텍스트를 생성합니다. 브라우저 컨텍스트는 완전히 새로운 브라우저 프로필과 동일하므로 비용 없이 완전한 테스트 격리가 가능합니다. 새 브라우저 컨텍스트를 만드는 데 몇 밀리초 밖에 걸리지 않습니다.
• 코드 생성, 단계별 디버깅, 추적 뷰어와 같은 기능을 제공합니다.

---

PlayWright vs. Selenium vs. Cypress

오늘날 사용 가능한 최고의 웹 UI 자동화 테스트 프레임워크는 무엇일까요? 눈에 띄는 옵션으로는 10년 역사의 Selenium, 최근 인기를 얻고 있는 Cypress, 그리고 여기서 소개하는 PlayWright가 있습니다. 이들은 어떻게 다를까요? 다음은 참조를 위한 요약된 비교입니다.

주요 비교 사항:

• 지원 언어: PlayWright와 Selenium은 Java, C#, Python을 지원하므로 JavaScript/TypeScript에 익숙하지 않은 테스트 엔지니어에게 더 인기가 있습니다.
• 기술적 접근 방식: PlayWright와 Selenium은 모두 Google의 Remote Debugging Protocol을 사용하여 Chromium 기반 브라우저를 제어합니다. 이러한 프로토콜이 없는 Firefox와 같은 브라우저의 경우 JavaScript 주입을 사용합니다. Selenium은 이를 Driver에 캡슐화하고 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 프로젝트를 초기화합니다.

   # npm 사용
   npm init playwright@latest
   
   # yarn 사용
   yarn create playwright

3. 프롬프트를 따릅니다.

   • TypeScript 또는 JavaScript를 선택합니다(기본값: TypeScript).
   • 테스트 디렉터리 이름을 지정합니다.
   • PlayWright에서 지원하는 브라우저를 설치할지 여부를 결정합니다(기본값: True).

   브라우저를 다운로드하도록 선택하면 PlayWright에서 Chromium, Firefox 및 WebKit을 다운로드하며 시간이 다소 걸릴 수 있습니다. 이 프로세스는 PlayWright 버전이 업데이트되지 않는 한 처음 설정하는 동안에만 발생합니다.

프로젝트 구조

초기화 후 프로젝트 템플릿이 제공됩니다.

playwright.config.ts    # PlayWright 구성 파일
package.json            # Node.js 구성 파일
package-lock.json       # Node.js 종속성 잠금 파일
tests/                  # 테스트 디렉터리
  example.spec.ts       # 템플릿 테스트 케이스
tests-examples/         # 예제 테스트 디렉터리
  demo-todo-app.spec.ts # 예제 테스트 케이스

예제 테스트 케이스를 실행합니다.

npx playwright test

테스트는 자동으로(헤드리스 모드에서) 실행되고 결과는 다음과 같이 표시됩니다.

Using 6 workers
6 tests 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/);
});

• 첫 번째 테스트: 페이지 제목에 "Playwright"가 포함되어 있는지 확인합니다.
• 두 번째 테스트: "Get started" 링크를 클릭하고 URL을 확인합니다.

각 test 메서드에는 다음이 포함됩니다.

• 테스트 이름(예: 'has title').
• 테스트 논리를 실행하는 함수.

주요 메서드는 다음과 같습니다.

• page.goto: URL로 이동합니다.
• expect(page).toHaveTitle: 페이지 제목을 어설션합니다.
• page.getByRole: 역할을 기준으로 요소를 찾습니다.
• await: 비동기 작업이 완료될 때까지 기다립니다.

---

명령줄에서 테스트 실행

다음은 일반적인 명령입니다.

• 모든 테스트 실행:

  npx playwright test

• 특정 테스트 파일 실행:

  npx playwright test landing-page.spec.ts

• 테스트 케이스 디버깅:

  npx playwright test --debug

---

코드 기록

codegen 기능을 사용하여 상호 작용을 기록합니다.

npx playwright codegen https://leapcell.io/

기록된 코드를 파일에 복사할 수 있습니다. 참고: 레코더는 호버링과 같은 복잡한 작업을 처리하지 못할 수 있습니다.

---

심층 Playwright 가이드

작업 및 동작

이 섹션에서는 페이지 요소와 상호 작용하기 위한 몇 가지 일반적인 Playwright 작업을 소개합니다. 앞에서 소개한 locator 개체는 생성 중에 페이지에서 실제 요소를 찾지 않습니다. 요소가 페이지에 존재하지 않더라도 요소 로케이터 메서드를 사용하여 locator 개체를 가져오면 예외가 발생하지 않습니다. 실제 요소 조회는 상호 작용 중에만 발생합니다. 이는 페이지에서 직접 요소를 검색하고 요소를 찾을 수 없으면 예외를 throw하는 Selenium의 findElement 메서드와 다릅니다.

텍스트 입력

텍스트 입력에는 fill 메서드를 사용합니다. 주로 <input>, <textarea> 또는 [contenteditable] 속성이 있는 요소를 대상으로 합니다.

// 텍스트 입력
await page.getByRole('textbox').fill('Peter');

확인란 및 라디오

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

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

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

// 선택 취소
await page.getByLabel('XL').setChecked(false);

선택 컨트롤

<select> 요소와 상호 작용하려면 locator.selectOption()을 사용합니다.

// 값으로 선택
await page.getByLabel('Choose a color').selectOption('blue');

// 레이블로 선택
await page.getByLabel('Choose a color').selectOption({ label: 'Blue' });

// 다중 선택
await page.getByLabel('Choose multiple colors').selectOption(['red', 'green', 'blue']);

마우스 클릭

기본 작업:

// 왼쪽 클릭
await page.getByRole('button').click();

// 두 번 클릭
await page.getByText('Item').dblclick();

// 오른쪽 클릭
await page.getByText('Item').click({ button: 'right' });

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

// 호버
await page.getByText('Item').hover();

// 특정 위치에서 클릭
await page.getByText('Item').click({ position: { x: 0, y: 0 } });

다른 요소로 덮인 요소의 경우 강제 클릭을 사용합니다.

await page.getByRole('button').click({ force: true });

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

await page.getByRole('button').dispatchEvent('click');

문자 입력

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

await page.locator('#area').type('Hello World!');

특수 키

특수 키에는 locator.press()를 사용합니다.

// Enter 키
await page.getByText('Submit').press('Enter');

// Ctrl+오른쪽 화살표
await page.getByRole('textbox').press('Control+ArrowRight');

// 달러 키
await page.getByRole('textbox').press('$');

지원되는 키에는 Backquote, Minus, Equal, Backslash, Backspace, Tab, Delete, Escape, ArrowDown, End, Enter, Home, Insert, PageDown, PageUp, ArrowRight, ArrowUp, F1-F12, Digit0-Digit9 및 KeyA-KeyZ가 있습니다.

파일 업로드

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

// 파일 업로드
await page.getByLabel('Upload file').setInputFiles('myfile.pdf');

// 여러 파일 업로드
await page.getByLabel('Upload files').setInputFiles(['file1.txt', 'file2.txt']);

// 파일 제거
await page.getByLabel('Upload file').setInputFiles([]);

// 버퍼에서 업로드
await page.getByLabel('Upload file').setInputFiles({
  name: 'file.txt',
  mimeType: 'text/plain',
  buffer: Buffer.from('this is test')
});

요소에 포커스 맞추기

요소에 포커스를 맞추려면 locator.focus()를 사용합니다.

await page.getByLabel('Password').focus();

드래그 앤 드롭

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

1. 드래그 가능한 요소 위로 마우스를 가져갑니다.
2. 왼쪽 마우스 단추를 누릅니다.
3. 마우스를 대상 위치로 이동합니다.
4. 왼쪽 마우스 단추를 놓습니다.

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

await page.locator('#item-to-be-dragged').dragTo(page.locator('#item-to-drop-at'));

또는 프로세스를 수동으로 구현할 수 있습니다.

await page.locator('#item-to-be-dragged').hover();
await page.mouse.down();
await page.locator('#item-to-drop-at').hover();
await page.mouse.up();

대화 상자 처리

기본적으로 Playwright는 alert, confirm 및 prompt와 같은 대화 상자를 자동으로 취소합니다. 대화 상자를 수락하도록 대화 상자 처리기를 미리 등록할 수 있습니다.

page.on('dialog', dialog => dialog.accept());
await page.getByRole('button').click();

새 페이지 처리

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

const newPagePromise = page.waitForEvent('popup');
await page.getByText('Click me').click();
const newPage = await newPagePromise;
await newPage.waitForLoadState();
console.log(await newPage.title());

---

Playwright를 위한 최고의 플랫폼: Leapcell

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

Playwright 애플리케이션을 위한 Jumpcell의 고유한 이점

1. 비용 효율성

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

2. 개발자 경험

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

3. 확장성 및 성능

   • 자동 확장: 최적의 성능을 유지하기 위해 리소스를 동적으로 조정합니다.
   • 비동기 최적화: 고동시성 작업을 쉽게 처리합니다.
   • 글로벌 도달 범위: 분산된 데이터 센터에서 지원되는 낮은 대기 시간 액세스.

자세한 배포 예는 설명서를 참조하십시오.