[인프런] Playwright 기초 - 기초적인 활용법과 핵심 원리

playwright의 장점

- 윈도우나 리눅스, macOS 등 다양한 OS에서 가능하고 로컬 PC 뿐 아니라 배포할 서버 환경에서도 실행 가능

- 여러 언어로 테스트 코드 작성 가능

- 전용 인스펙터가 존재 (debug 모드로 하면 전용 인스펙터 나타남)

- UI 모드 (시간대별 스냅샷 확인 가능)

- 어떤 locator를 사용할 지 모를 때, 권장 locator 추천해줌

---

locator?

Playwright가 DOM 요소를 찾고 조작할 수 있도록 도와주는 API

요소를 찾고 클릭하거나 입력하는 등의 액션을 수행할 때 사용하는 방식

Ex. 웹 자동화 테스트에서 버튼을 클릭하거나 입력 필드에 텍스트를 입력할 때 사용

코드에서 page.locator("text=Click Me") 는 "Click Me"라는 텍스트를 가진 버튼을 찾는 로케이터

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)  # 브라우저 실행
    page = browser.new_page()
    page.goto("https://example.com")

    # 로케이터를 이용해 버튼 클릭
    button = page.locator("text=Click Me")
    button.click()

    browser.close()

 

UI 모드 실행 코드 : npx playwright test --ui

 

debug 모드 실행 코드 : npx playwright test --debug

 

Playwright 안에 GUI 기반의 도구가 있어서, 사용자가 쉽게 테스트를 기록하고 실행할 수 있음 (아래 화면 확인)

터미널에서 명령어만 사용하는 게 아니라, 시각적으로 테스트를 확인하고 조작할 수 있는 UI도 제공

트레이싱 해주는 화면, step by step으로도 활용 가능

 

Playwright 기능 중 하나인 코드 생성 (Code Generator)

Playwright 의 Code Generator

 

 

Playwright의 Codegen(코드 생성 기능)을 활용하면,
→ 웹사이트에서 버튼 클릭, 입력, 스크롤 등 사용자 액션을 그대로 기록
→ Playwright가 자동으로 테스트 코드(JavaScript, Python 등)를 생성해줌

즉, 개발을 몰라도 테스트 시뮬레이션을 하면 그걸 기반으로 코드가 만들어지는 기능

 

 

 

결론

Playwright는 웹사이트에서 사용자의 행동을 자동으로 기록하고, 그걸 바탕으로 테스트 코드를 자동 생성하는 기능을 제공

QA Engineer도 충분히 테스트 코드를 생성해볼 수 있으며, 업무에서 자동화 테스트를 더욱 효과적으로 수행할 수 있을듯 하다~!