인프런 강의 - Playwright 기초 (기초적인 활용법과 핵심 원리)

[지금 무료]Playwright 기초 - 기초적인 활용법과 핵심 원리 강의 | duckyoung lee - 인프런

 

📌 프로젝트 설정

🚀 npm init playwright@latest
 ㄴ Playwright는 웹 자동화 테스트 도구 (E2E 테스트에 사용됨)
 ㄴ 이 명령어는 Playwright를 위한 기본 설정과 샘플 테스트 파일을 생성

🚀 npx playwright test
 ㄴ Playwright 테스트 실행
 ㄴ CLI 상에서 테스트 결과 출력
 ㄴ playwright-report/ 폴더에 HTML 리포트도 생성

 

package.json의 scripts에 다음처럼 추가

"scripts": {
    "test": "npx playwright test"
}

 

그 이후부터는 아래 명령어만으로 테스트 실행 가능

npm run test

 

그 후, VS Code에서 Playwright Test for VS Code 확장 설치

 

1. 테스트 탐색 & 실행

• 사이드바에서 테스트 파일 트리 구조로 확인
• 개별 테스트 또는 전체 실행 버튼 클릭
• Projects 섹션에서 원하는 브라우저만 선택하여 실행

2. 시각적 디버깅

• "Show browser" 체크 → 테스트 실행 과정을 실제로 볼 수 있음
• "Show trace viewer" 체크 → 실행 후 타임라인으로 분석 가능

3. 코드 생성 & Locator 찾기

• Pick locator: 브라우저에서 요소 클릭 → selector 자동 생성
• Record new: 브라우저 조작 → 테스트 코드 자동 생성
• Locator 편집 후 브라우저에서 하이라이트로 즉시 확인

4. 실패 분석

• 테스트 실패 시 해당 지점 클릭 → 브레이크포인트 설정
• 라이브 디버그 모드로 단계별 실행 및 변수 확인
• Trace Viewer로 실패 순간의 스크린샷, 네트워크 로그 등 분석

 

📌 기초 예제

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

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

test('if user visit home and click "Get Started", h1 "introduction" is visible and page title is contains "Introduction"', async ({page}) => {
    const startUrl = 'https://nextjs.org/';
    const h1 = "Next.js Docs";
    const title = /Docs/;

    await page.goto(startUrl);
    await page.getByRole('link', { name: 'Get Started' }).click();

    await expect(page.getByRole('heading', { name: h1, level: 1 })).toBeVisible();
    await expect(page).toHaveTitle(title);
});

 

💡 버튼 클릭 테스트 작성하기

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

test.describe('button click', () => {
    test('open preferences menu', async ({page}) => {
        const startUrl = 'http://localhost:3000/';
        
        await page.goto(startUrl);
        
        await test.step('if click next.js icon, show dropdown menu', async () => {
            await page.getByRole('button', { name: 'Open Next.js Dev Tools'}).click();
            await expect(page.getByText('Preferences')).toBeVisible();
        });
        await test.step('if click preferences, show preferences menu', async () => {
            await page.getByText('Preferences').click();
            await expect(page.getByRole('heading', {name: 'Preferences'})).toBeVisible();
        });
    })
})

 

💡 제출 양식 테스트 작성하기

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

test.describe('sign-up', () => {
    test.describe('validation', () => {
        test('if select plan type and fill name, submit enabled', async ({page}) => {
            const startUrl = 'https://vercel.com/signup';

            await page.goto(startUrl);

            await page.getByText("I'm working on personal projects").click();
            await page.getByLabel('Your Name').fill('input content');
            await expect(page.getByRole('button', {name: 'Continue'})).toBeEnabled();
        });
    });
});

 

📌 핵심 개념

package.json의 scripts에 다음처럼 수정 시, ui 모드 사용 가능

"scripts": {
    "test": "npx playwright test --ui"
}

 

✅ ui 모드 주요 목적

• 테스트 탐색, 선택, 실행을 GUI로 제어
• 테스트의 히스토리와 각 단계의 스냅샷 확인

✅ ui 모드에서 할 수 있는 일

• 전체 테스트 목록을 시각적으로 탐색
• 특정 테스트만 선택하여 실행
• 테스트 실행 중 단계별 스냅샷 자동 기록
• 각 단계별 locator, assert, click 등 시점별 상태 확인
• 실패한 테스트의 DOM 상태, 에러 로그, 스크린샷 확인
• 재실행 및 디버깅 모드 전환 가능

✅ ui 모드 특징

• 브라우저가 자동으로 뜨며, GUI 도구가 함께 열림
• 테스트 전반적인 흐름을 관리하고자 할 때 적합
• 인터랙티브하게 개발자용 GUI에서 확인하고 싶은 경우 유용

---

 

package.json의 scripts에 다음처럼 수정 시, debug 모드 사용 가능

"scripts": {
    "test": "npx playwright test --debug"
}

 

✅ debug 모드 주요 목적

• 특정 테스트를 중간에 멈추고 한 단계씩 수동 조작
• 디버깅 도구(Playwright Inspector)를 열어 내부 상태 분석

✅ debug 모드에서 할 수 있는 일

• 테스트 중단점(pause) 상태에서 시작
• 테스트 흐름을 한 단계씩 수동으로 실행
• 각 명령어의 Locator 결과, 상태, Timeout 등을 확인
• 실시간 DOM 상태 관찰 및 조작 가능
• 필요한 경우 page.pause(), debug() 등 코드에 직접 삽입 가능

✅ debug 모드 특징

• 자동 실행보단 중간 개입이 필요한 디버깅에 적합
• 콘솔에서 직접 요소 상태 확인, 다시 시도, 수정 등을 할 수 있음
• 반복 실패 구간을 정밀하게 파악하고자 할 때 유용

 

또한, debug 모드 실행 시 자동으로 뜨는 Playwright Inspector 창 안에서 다양한 기능들을 제공

 

✅ [Pick Locator] 버튼

• 웹 페이지에서 테스트하고 싶은 요소를 클릭하면, Playwright가 최적의 Locator 코드를 자동 생성
• getByRole, getByText, locator() 등 가장 안정적이고 의미 있는 방식으로 추천
• QA 엔지니어나 비개발자도 직접 CSS/XPath 고민 안 하고 요소 선택 가능
• 불안정한 XPath 대신 안정적인 Locator 추출에 사용

✅ [Record] 버튼

• 직접 테스트를 수행하는 것만으로 코드가 자동 생성됨
• 버튼 클릭 → 웹페이지에서 클릭/입력/전환 등 수행 → Playwright가 click(), fill(), navigate() 등 테스트 코드로 자동 기록
• 비개발자 QA 팀원이 테스트 흐름을 직접 따라가면서 시나리오 기록 가능
• 테스트 코드 작성을 자동화하거나, 초안으로 빠르게 만들고 싶은 경우 사용 가능

 

📌 필수 API

💡 Locator

Locators | Playwright

• page.getByRole()
   ㄴ 명시적 또는 암시적인 접근성 속성(role 등)을 기반으로 요소를 찾는 방법
• page.getByText()
   ㄴ 텍스트 내용을 기준으로 요소를 찾는 방법
• page.getByLabel()
   ㄴ 연관된 label 텍스트를 기준으로 form control 요소(예: input, textarea 등)를 찾는 방법
• page.getByPlaceholder()
   ㄴ placeholder 속성을 기준으로 input 요소를 찾는 방법
• page.getByAltText()
   ㄴ 대체 텍스트(alt 속성)를 기준으로 요소(주로 이미지)를 찾는 방법
• page.getByTitle()
   ㄴ title 속성을 기준으로 요소를 찾는 방법
• page.getByTestId()
   ㄴ data-testid 속성(또는 설정한 다른 속성)을 기준으로 요소를 찾는 방법

 

💡 Actions

Actions | Playwright

• page.click()
   ㄴ 지정한 셀렉터의 요소를 클릭하는 방법
• page.fill()
   ㄴ input, textarea 등 입력 필드에 문자열을 입력하는 방법 (기존 값은 자동 삭제)
• page.type()
   ㄴ 키보드 입력을 한 글자씩 시뮬레이션하는 방법 (입력 속도 조절 가능)
• page.press()
   ㄴ 키보드의 특정 키(Enter, Tab 등)를 누르는 동작을 수행하는 방법
• page.check()
   ㄴ 체크박스를 체크 상태로 만드는 방법
• page.uncheck()
   ㄴ 체크박스를 체크 해제 상태로 만드는 방법
• page.selectOption()
   ㄴ `<select>` 요소에서 특정 옵션을 선택하는 방법
• page.focus()
   ㄴ 특정 요소에 포커스를 주는 방법
• page.tap()
   ㄴ 모바일 환경에서 터치 이벤트를 시뮬레이션하는 방법
• page.dragAndDrop()
   ㄴ 한 요소를 다른 요소로 드래그 앤 드롭하는 방법

 

💡 Events

Events | Playwright

• page.on('request', handler)
   ㄴ HTTP 요청 발생 시 실행할 콜백 등록 방법. 
• page.on('response', handler)
   ㄴ 서버 응답 수신 시 실행할 콜백 등록 방법.
• page.on('requestfailed', handler)
   ㄴ 요청 실패 시 실행할 콜백 등록 방법.
• page.on('dialog', handler)
   ㄴ alert/prompt/confirm 창 발생 시 콜백 등록 방법.
• page.on('popup', handler)
   ㄴ 새 창이나 탭이 열릴 때 콜백 등록 방법.
• page.on('pageerror', handler)
   ㄴ JS 오류 발생 시 실행할 콜백 등록 방법.

 

💡 Assertions

Assertions | Playwright

• await expect(locator).toBeVisible()
   ㄴ 요소의 가시성을 확인하는 방법.
• await expect(locator).toHaveText(textOrRegex)
   ㄴ 요소가 특정 텍스트를 포함했는지 확인하는 방법.
• await expect(locator).toHaveAttribute(name, valueOrRegex)
   ㄴ 요소의 특정 속성(attribute) 값을 검증하는 방법.
• await expect(page).toHaveURL(urlOrRegex)
   ㄴ 현재 페이지의 URL이 예상한 값과 일치하는지 확인하는 방법.
• await expect(page).toHaveTitle(titleOrRegex)
   ㄴ 현재 페이지의 타이틀이 예상과 일치하는지 확인하는 방법.
• await expect(response).toBeOK()
   ㄴ 네트워크 응답이 2xx 상태인지 확인하는 방법.

 

📌 테스트 생성 기능

Playwright의 공식 VS Code 확장인 Playwright Test for VS Code를 설치하면, 사이드바에 [Record New] 버튼이 생긴다. 이 버튼을 클릭하면 새로운 테스트 파일이 자동으로 생성되고, 브라우저 창이 함께 열린다. 이 창에서 사용자가 웹사이트를 방문하고 버튼을 클릭하거나 텍스트를 입력하는 등, 수행하는 모든 동작이 자동으로 기록된다. 예를 들어, 홈페이지에 접속해 로그인 버튼을 클릭하고 입력창에 텍스트를 입력하면, 해당 행동이 그대로 Playwright 테스트 코드로 변환되어 테스트 파일에 자동 입력된다.

 

이 외에도 [Record at cursor] 기능을 사용하면, 이미 작성 중인 테스트 코드에서 커서 위치 이후부터 녹화를 시작할 수 있어 중간에 테스트 시나리오를 추가하거나 이어서 작성할 때 유용하다. 또한 [Pick Locator] 기능은 앞서 살펴본 디버그 모드와 마찬가지로, 화면에서 특정 요소를 클릭하면 가장 적절한 locator를 자동으로 추출해주는 기능으로, 정확하고 안정적인 요소 선택에 매우 도움이 된다.