[인프런] Playwright 기초 - 버튼 클릭 테스트 작성하기

섹션3. 기초예제

버튼 클릭 테스트 작성하기

웹 애플리케이션의 버튼 클릭 동작을 테스트 코드

 

 

cf. async/await

async/await을 사용하여 웹 페이지가 특정 상태에 도달할 때까지 기다리는 것이 중요함.

async 없이 await을 사용할 수 없으니, await이 필요하면 반드시 함수 앞에 async를 붙여야 함~!

 

test 함수

test('테스트 이름', async ({ page }) => {
    // 테스트 코드 작성
});

 

첫 번째 인자: 테스트의 이름 (예: 'open preferences menu')

두 번째 인자: 테스트에서 실행할 비동기 함수 (async 가능)

Playwright가 자동으로 page 객체를 넘겨줌 (브라우저 페이지 조작 가능)

 

*Javascript를 사용하여 testscript 작성 시 기본 문법~!

 

변수 선언: const(고정) / let(변경 가능)

함수: function 함수명() {} 또는 const 함수명 = () => {}

비동기 코드: async/await

조건문: if / else

반복문: for / forEach

배열/객체 사용법

Playwright 기본 문법 (test(), locator(), expect())

 

 

 

버튼 클릭 테스트

 

@playwright/test에서 test와 expect를 가져와 테스트 환경을 설정

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

 

describe 블록을 사용하여 "button click" 관련 테스트들을 그룹화

test.describe('button click', () => {

 

"open preferences menu" 테스트

test('open preferences menu', async ({ page }) => {
    const startUrl = 'http://localhost:3000/';
    await page.goto(startUrl);

 

 

http://localhost:3000/에 접속하여 테스트 시작

await test.step('if click nextjs icon, show dropdown menu', async () => {
    await page.getByRole('button', { name: 'Open Next.js Dev Tools' }).click();

 "Open Next.js Dev Tools" 버튼 클릭 → 드롭다운 메뉴가 열리는지 확인

await expect(
    page.getByRole('button', { name: 'Preferences' })
).toBeVisible();

 

 

"Preferences" 버튼이 보이는지 검증 (toBeVisible() 사용)

 

"if click preferences, show preferences menu" 테스트

await test.step('if click preferences, show preferences menu', async () => {
    await page.getByRole('button', { name: 'Preferences' }).click();

 

 

"Preferences" 버튼 클릭.

await expect(
    page.getByRole('heading', { name: 'Preferences' })
).toBeVisible();

 

"Preferences" 제목(heading)이 보이는지 확인 → 메뉴가 제대로 열렸는지 검증.

 버튼의 경우에는 getByRole로 버튼으로 가져오는데 텍스트가 있는 경우에는 name의 텍스트를 적어주면 되고 이렇게 아이콘으로 된 버튼 같은 경우에는 aria-label로도 가져올 수 있다

 

기초 문법은 해당 url에서 기초 문법 탭 확인~!

Playwright

Playwright | Notion