【Playwright×Python】SauceDemo E2E 테스트 자동화 방법｜로그인~주문 완료 전체 10케이스

E2E 테스트라고 하면 “어려울 것 같다”, “설정이 번거롭다”고 느끼는 분도 많을 것입니다. 하지만 Playwright를 사용하면 브라우저 설치부터 테스트 실행까지 놀라울 정도로 간단하게 실현할 수 있습니다.

이 글에서는 테스트 자동화 연습용 데모 EC 사이트로 유명한 SauceDemo를 대상으로, 로그인 → 상품 추가 → 장바구니 확인 → 체크아웃 → 주문 완료 → 로그아웃까지의 전체 플로우를 Playwright × Python으로 자동화하는 방법을 초보자도 쉽게 따라할 수 있도록 해설합니다.

Playwright란?

Playwright는 Microsoft가 개발한 브라우저 자동화 라이브러리입니다. Chromium·Firefox·WebKit의 세 가지 브라우저 엔진에 대응하며, Python·JavaScript·TypeScript·Java·C# 등 여러 언어에서 사용할 수 있습니다.

Selenium과 마찬가지로 브라우저를 조작하여 테스트를 실행하지만, 셋업이 압도적으로 간단하고 대기 처리·녹화 기능 등이 표준 탑재되어 있는 것이 큰 특징입니다.

E2E 테스트란?

E2E 테스트는 End-to-End 테스트의 약자로, 실제 사용자가 조작하는 일련의 흐름을 그대로 자동화하여 테스트하는 기법입니다. 단위 테스트·통합 테스트와 달리 실제 브라우저를 조작하여 “로그인 → 상품 선택 → 구매 완료”와 같은 실제 사용자 조작을 재현합니다.

E2E 테스트는 릴리스 전 최종 확인이나, 배포마다 기본 플로우가 망가지지 않았는지를 자동으로 체크하는 회귀 테스트로 특히 효과를 발휘합니다.

테스트 대상 사이트（SauceDemo）

SauceDemo는 Sauce Labs가 제공하는 E2E 테스트 연습용 데모 EC 사이트입니다. 로그인·상품 목록·장바구니·체크아웃 등 EC 사이트의 기본 기능이 갖춰져 있어 테스트 자동화 연습에 최적의 환경입니다.

▲ SauceDemo 로그인 화면. 화면 하단에 테스트 사용자 목록과 공통 비밀번호가 표시된다

환경 구축（Python・Playwright）

설치

Playwright 셋업은 명령어 2줄로 완료됩니다. ChromeDriver의 수동 관리는 전혀 필요 없습니다.

pip install playwright
playwright install chromium

폴더 구성

이번에는 간단한 1파일 구성입니다. 스크린샷 폴더는 실행 시 자동으로 생성됩니다.

project/
├── test_saucedemo.py       # 메인 테스트 스크립트
└── screenshots/            # 실행 시 자동 생성
    ├── ss_01_login_input.png
    ├── ss_02_after_login.png
    ├── ss_03_locked_user_error.png
    └── ...

코드 해설

코드의 핵심 부분을 뽑아서 초보자도 이해할 수 있도록 한 줄씩 상세히 해설합니다. “코드는 읽을 수 있는데 무엇을 하는지 모르겠다”는 부분을 없애는 것이 목표입니다.

① 폼에 값 입력하기：fill()

page.fill("#user-name", "standard_user")
page.fill("#password", "secret_sauce")

fill()은 입력 폼에 문자를 입력하는 Playwright 메서드입니다. #user-name은 로그인 화면의 사용자 이름 필드의 CSS 셀렉터로, HTML의 id="user-name"을 가리킵니다. Selenium의 send_keys()에 해당하지만 필드 초기화와 입력을 자동으로 함께 처리해줍니다.

▲ 잘못된 사용자 이름·비밀번호를 입력했을 때의 에러 표시（TC-03）

② 버튼 클릭：click()

page.click("#login-button")

click()은 지정한 셀렉터의 요소를 클릭하는 메서드입니다. #login-button은 로그인 버튼의 ID입니다. Playwright는 요소가 표시되어 클릭 가능한 상태가 될 때까지 자동으로 대기한 후 클릭하므로 Selenium처럼 명시적인 대기 처리를 별도로 작성할 필요가 없습니다.

③ 페이지 전환 대기：wait_for_url()

page.wait_for_url("**/inventory.html", timeout=8000)

wait_for_url()은 URL이 지정된 패턴으로 바뀔 때까지 대기하는 메서드입니다. **는 와일드카드로 도메인 부분을 생략할 수 있습니다. timeout=8000은 8초 이내에 전환되지 않으면 타임아웃 에러를 발생시키는 설정입니다. Selenium의 WebDriverWait + expected_conditions 조합이 이 한 줄로 대체됩니다.

④ 요소 필터링：filter()

item = page.locator(".inventory_item").filter(has_text="Sauce Labs Backpack")
item.locator("button").click()

locator()로 요소를 취득하고 filter(has_text=...)로 특정 텍스트를 포함한 요소만 추려냅니다. 상품명으로 대상 아이템을 특정한 후 그 안의 버튼을 클릭하는 흐름입니다. 여러 상품이 나열되는 목록 화면에서의 조작에 매우 편리한 패턴입니다.

⑤ 동작을 슬로우모션으로：slow_mo

browser = p.chromium.launch(
    headless=False,
    slow_mo=800,   # 각 조작을 800ms 지연
)

slow_mo는 Playwright 고유의 옵션으로, 각 조작 사이에 밀리초 단위의 지연을 삽입합니다. 디버깅 시나 동작 확인 시에 무슨 일이 일어나고 있는지 눈으로 쫓을 수 있어 매우 편리합니다. CI/CD 환경에서는 slow_mo=0（기본값）, 로컬 확인 시에는 slow_mo=800으로 구분하여 사용하는 것이 실무 포인트입니다.

테스트 실행 방법

실행 명령어

python test_saucedemo.py

테스트 결과

실행하면 터미널에 섹션별 결과가 실시간으로 출력되고, 마지막에 전체 테스트의 요약이 표시됩니다. 스크린샷은 screenshots/ 폴더에 자동 저장됩니다.

==================================================
  SauceDemo Automated Test Suite [Playwright]
  Executed: 2025-07-01 10:00:00
==================================================

──────────────────────────────────────────────────
  TC-02: Login Failure - Locked User
──────────────────────────────────────────────────
  Error message: Epic sadface: Sorry, this user has been locked out.
    📸 screenshots/ss_03_locked_user_error.png

──────────────────────────────────────────────────
  TC-09: Order Completion
──────────────────────────────────────────────────
  Completion message: Thank you for your order!
    📸 screenshots/ss_10_order_complete.png

==================================================
  Test Result Summary
==================================================
  ✅ PASS  TC-02: Locked User Login Failure
           → Epic sadface: Sorry, this user has been locked out.
  ✅ PASS  TC-03: Wrong Password Login Failure
           → Epic sadface: Username and password do not match...
  ✅ PASS  TC-01: Login Success
           → //www.saucedemo.com/inventory.html
  ✅ PASS  TC-04: Product List Display (6 items)
           → 6 items displayed
  ✅ PASS  TC-05: Add 2 Items to Cart
           → Badge=2
  ✅ PASS  TC-06: Cart Contents Verification
           → Cart=2 / Added=2
  ✅ PASS  TC-07: Checkout Information Input
           → //www.saucedemo.com/checkout-step-two.html
  ✅ PASS  TC-08: Order Summary Verification
           → 2 items / Total: $19.42
  ✅ PASS  TC-09: Order Completion
           → Thank you for your order!
  ✅ PASS  TC-10: Logout
           → Redirected to login page
──────────────────────────────────────────────────
  Total: 10   ✅ 10 Passed   ❌ 0 Failed
  Result: ✅ All Tests PASSED 🎉
==================================================

전체 10개 케이스가 PASS가 되면 성공입니다. screenshots/ 폴더에도 11장의 스크린샷이 자동 저장되어 있을 것입니다.

▲ 장바구니에 2개의 상품이 올바르게 추가된 것을 확인（TC-06）

▲ 주문 요약 화면. 상품 수·소계·세금·합계 금액을 자동 검증（TC-08）

▲ 「Thank you for your order!」가 표시되어 주문 완료를 확인（TC-09）

더 발전시키는 아이디어

정리

이 글에서는 Playwright와 Python을 사용해 SauceDemo의 로그인부터 주문 완료까지의 E2E 테스트를 자동화하는 방법을 해설했습니다.

실무에서는 이 E2E 테스트를 CI/CD 파이프라인에 통합하고 배포마다 구매 플로우 전체가 정상적으로 동작하는지 자동 검증합니다. Playwright는 Selenium보다 기술이 간단하고, 녹화 기능이나 slow_mo 등 실무에서 유용한 기능이 표준 탑재되어 있는 것이 큰 매력입니다.

소스 코드는 GitHub에 공개되어 있으니 꼭 직접 실행해보세요！