Playwright 작성하기

Playwright 테스트는 간단하고 효율적으로 설계되었습니다. 테스트는 동작을 수행하고 상태를 기대값과 비교하는 것으로 이루어집니다. Playwright의 주요 장점 중 하나는 동작을 수행하기 전에 요소나 조건을 기다릴 필요가 없다는 것입니다. Playwright는 각 동작을 수행하기 전에 자동으로 동작 가능성을 확인하기 위한 체크를 기다립니다.

마찬가지로, Playwright의 어서션(Assertion)은 경합 조건(race condition)을 처리하는 방식으로 설계되었습니다. 경합 조건은 여러 동시 실행 스레드나 프로세스에서 동일한 자원에 동시에 접근할 때 발생할 수 있는 문제입니다. 이런 경우에는 정확한 타이밍에 데이터를 읽거나 변경해야 하는데, 경합 조건이 발생하면 예상치 못한 결과가 발생할 수 있습니다.

Playwright의 어서션은 이러한 경합 조건을 처리하기 위해 설계되었습니다. 어서션은 특정 상태가 예상한 조건에 도달할 때까지 기다립니다. 즉, 특정 요소가 나타나거나 특정 값을 가질 때까지 대기하며, 그 후에야 다음 동작을 수행합니다. 이를 통해 경합 조건이 발생할 가능성을 줄이고 테스트의 신뢰성을 높일 수 있습니다.

Playwright의 어서션은 타이밍 문제를 자동으로 처리하므로, 개발자는 일일이 타이밍을 조정하거나 대기 상태를 처리할 필요가 없습니다. 이는 테스트 작성과 유지보수를 더욱 간편하게 만들어 줍니다.따라서, Playwright를 사용하면 어서션을 통해 경합 조건을 효과적으로 처리할 수 있고, 안정적인 테스트 환경을 구축할 수 있습니다.

이러한 설계 선택 사항으로 인해 Playwright 사용자는 테스트에서 불안정한 시간 초과와 경합 조건을 걱정할 필요가 없습니다. 이를 통해 테스트의 신뢰성과 안정성이 향상됩니다.

Playwright를 배우고 사용하면서, 그 간결함과 견고성, 테스트 개발 과정의 간소화를 더욱 높이게 될 것입니다.

---

간단한 테스트 방법입니다.

• 우선 React.js 프로젝트를 하나 만들어주세요.  미리 샘플코드를 넣어놨습니다.참고하세요
  • https://github.com/leeyonghe/react-playwright

GitHub - leeyonghe/react-playwright

• Playwright를 설치해주세요. (아래를 참고해주세요)

2023.05.31 - [Playwright(Web-Tool)] - Playwright?

Playwright?

• 아래 코드를 Playwright를 설치할때 미리 만들어진 e2e 폴더로 이동한다. 기본적으로 생성된 file인 example.spec.ts 파일에 아래 코드를 붙여 넣습니다.

import { test, expect } from '@playwright/test';

test('has title', async ({ page }) => {
  await page.goto('http://localhost:3000');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/title/);
});

test('get started link', async ({ page }) => {
  await page.goto('http://localhost:3000');

  // Click the get started link.
  await page.getByRole('a', { name: 'Learn React' }).click();

  // Expects the URL to contain intro.
  await expect(page).toHaveURL(/https://react.dev/);
});

• 아래 명령어를 실행하여 Playwright 테스트를 위한 사전 준비를 해주세요

$ npm i
$ npm run start

• 명령어 창에서 Playwright 실행 코드를 실행합니다.

$ npx playwright test --ui

아래와 같이 앱하나가 뜨고 그 앱에서 테스트를 진행합니다. 

그림 1

• 진행하는 방법은 영상을 참고하세요.

영상 1

자세한 코드 내용은 다음 챕터에서 다루겠습니다.