[인프런] Playwright 기초 - 네비게이션 테스트 작성하기

섹션3. 기초 예제

네비게이션 테스트 작성하기

e2e 아래, navigation-spec-ts 플레이라이트에 필수 API들을 임포트해

먼저 Next.js 앱을 실행

첫 번째로 작성할 시나리오는 Next.js 공식 홈페이지에서 get started 클릭시 introduction이라는 h1 태그를 가지며 페이지 타이틀이 introduction을 포함하는지 검증하는 테스트

 

introduction을 포함하는지 검증하는 테스트입니다

test('if user visit home and click "Get Started", h1 "introduction" is visible and page title contains "Introduction"', async () => {

사용자가 홈 페이지를 방문하고 "Get Started" 버튼을 클릭하면,

h1 태그에 "introduction"이 표시되어야 하며, 페이지 제목(title)에 "Introduction"이 포함되어야 한다는 테스트를 수행하는 코드입니다.

 

이 코드는 테스트 자동화 프레임워크 (예: Jest, Playwright, Cypress 등) 에서 사용되는 테스트 함수입니다.
이후 {} 내부에서 실제 테스트 동작이 구현될 것으로 보입니다.

 

playwright에서 HTML 엘레멘트를 가져오는 것을 로케이터라고 부르는데 로케이터의 경우에는 링크와 버튼이 다름

breakpoint 걸고 디버그 모드 실행

*Assertions은 테스트 코드에서 예상한 결과와 실제 결과가 일치하는지 확인하는 역할

테스트가 예상한 값과 다르면 오류를 발생시켜 테스트가 실패하게 만듭니다.

 

Playwright Assertions 종류

Playwright는 기본적으로 expect 함수를 사용하여 다양한 검증을 수행할 수 있습니다.

1. 일반적인 Assertions 예시

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

test('example test', async ({ page }) => {
  await page.goto('https://example.com');

  // 특정 텍스트가 페이지에 존재하는지 확인
  await expect(page.locator('h1')).toHaveText('Example Domain');

  // 특정 요소가 존재하는지 확인
  await expect(page.locator('h1')).toBeVisible();

  // URL이 예상한 값과 일치하는지 확인
  await expect(page).toHaveURL('https://example.com/');
});

 

 

주요 Assertion 메서드

Assertion설명

toBe(value)	주어진 값과 일치하는지 확인
toHaveText(text)	특정 텍스트가 있는지 확인
toBeVisible()	요소가 보이는지 확인
toBeHidden()	요소가 숨겨져 있는지 확인
toBeEnabled()	요소가 활성화되어 있는지 확인
toBeDisabled()	요소가 비활성화되어 있는지 확인
toHaveAttribute(name, value)	특정 속성이 예상된 값을 가지는지 확인
toHaveURL(url)	현재 페이지 URL이 예상한 URL과 같은지 확인
toHaveTitle(title)	페이지의 제목이 예상한 제목과 같은지 확인
toHaveClass(className)	특정 클래스를 포함하는지 확인

---

예제: 버튼이 클릭 가능해야 하는 경우

await expect(page.locator('#submit-button')).toBeEnabled();

 

예제: 특정 요소가 비활성화되어 있는 경우

await expect(page.locator('#loading')).toBeHidden();

 

예제: 특정 텍스트가 포함되어 있는지 확인

await expect(page.locator('.message')).toHaveText(/Success/);

 

Assertions을 사용하면 테스트의 신뢰성을 높이고, 예기치 않은 동작을 감지하는 데 도움