GitHub Actions × Playwright로 E2E 테스트를 자동화하는 방법｜CI/CD 설정을 처음부터 해설

GitHub Actions와 Playwright를 조합하면, 코드를 푸시할 때마다 E2E 테스트가 자동 실행되는 CI/CD 파이프라인을 추가 비용 없이 구축할 수 있습니다.

로컬에서 테스트가 통과해도 팀원이 푸시한 코드로 인해 깨지는 경우는 흔히 있습니다. CI/CD에 E2E 테스트를 통합하면 「누가 푸시해도 자동으로 테스트가 실행되고, 실패하면 알림이 오는」 구조를 만들 수 있습니다. 이 글에서는 GitHub Actions × Playwright × pytest 구성으로, 실제로 동작하는 CI/CD 파이프라인을 처음부터 구축하는 절차를 해설합니다.

CI/CD와 GitHub Actions의 기본

CI（지속적 통합）란 코드 푸시나 PR을 트리거로 자동으로 빌드·테스트를 실행하는 구조입니다. GitHub Actions는 GitHub에 내장된 CI/CD 서비스로, 리포지토리에 .github/workflows/ 폴더를 만들고 YAML 파일을 두는 것만으로 동작합니다.

① 프로젝트 구성

이번에 사용할 프로젝트 구성입니다.

my_project/
├── .github/
│   └── workflows/
│       └── playwright.yml    # GitHub Actions 워크플로우 파일
├── tests/
│   ├── conftest.py
│   └── test_saucedemo.py     # Playwright 테스트
├── requirements.txt          # 패키지 의존성 목록
└── pytest.ini                # pytest 설정

② requirements.txt 준비

CI 환경에서 설치할 패키지를 requirements.txt에 정리합니다.

pytest
pytest-playwright
pytest-html
playwright

③ 테스트 코드 확인

CI에서 실행할 Playwright 테스트 샘플입니다. SauceDemo의 로그인 플로우를 테스트합니다.

# tests/test_saucedemo.py
from playwright.sync_api import Page

def test_로그인_정상(page: Page):
    page.goto("https://www.saucedemo.com/")
    page.fill("#user-name", "standard_user")
    page.fill("#password", "secret_sauce")
    page.click("#login-button")
    assert page.url.endswith("/inventory.html")

def test_로그인_비밀번호_오류(page: Page):
    page.goto("https://www.saucedemo.com/")
    page.fill("#user-name", "standard_user")
    page.fill("#password", "wrong_password")
    page.click("#login-button")
    error_msg = page.locator(".error-message-container").text_content()
    assert "Epic sadface" in error_msg

# pytest.ini
[pytest]
testpaths = tests
addopts = -v --tb=short --html=reports/report.html --self-contained-html

④ GitHub Actions YAML 파일 작성（핵심）

이것이 이번 설정의 핵심입니다. .github/workflows/playwright.yml을 작성합니다.

# .github/workflows/playwright.yml

name: Playwright E2E Tests

# ① 트리거 설정：main으로의 push·PR에서 자동 실행
on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  test:
    # ② 실행 환경：Ubuntu 최신판 사용
    runs-on: ubuntu-latest

    steps:
      # ③ 리포지토리 코드를 체크아웃
      - name: 리포지토리 체크아웃
        uses: actions/checkout@v4

      # ④ Python 설정
      - name: Python 3.11 설정
        uses: actions/setup-python@v5
        with:
          python-version: "3.11"

      # ⑤ 의존 패키지 설치（안정성을 위해 pip를 먼저 업그레이드）
      - name: 의존 패키지 설치
        run: |
          python -m pip install --upgrade pip
          pip install -r requirements.txt

      # ⑥ Playwright 브라우저 설치
      - name: Playwright 브라우저 설치
        run: playwright install chromium --with-deps

      # ⑦ reports 폴더 생성（없으면 아티팩트 저장이 실패함）
      - name: reports 폴더 생성
        run: mkdir -p reports

      # ⑧ 테스트 실행
      - name: E2E 테스트 실행
        run: pytest

      # ⑨ 테스트 결과 리포트를 아티팩트로 저장
      - name: 리포트 업로드
        uses: actions/upload-artifact@v4
        if: always()    # 테스트 실패 시에도 반드시 실행
        with:
          name: playwright-report
          path: reports/
          retention-days: 30

각 스텝의 의미를 정리합니다：

⑤ 실행 결과 확인 방법

YAML 파일을 GitHub에 푸시하면 워크플로우가 자동으로 시작됩니다. 확인 절차는 다음과 같습니다.

실행 로그 샘플

Run pytest
========================= test session starts ==========================
platform linux -- Python 3.11.0, pytest-7.4.0
collected 2 items

tests/test_saucedemo.py::test_로그인_정상        PASSED  [ 50%]
tests/test_saucedemo.py::test_로그인_비밀번호_오류  PASSED  [100%]

========================== 2 passed in 8.43s ===========================

⑥ 응용：스케줄 실행·복수 브라우저 대응

매일 심야에 자동 실행하기

푸시 시뿐만 아니라 정기적으로 테스트를 실행하고 싶은 경우에는 schedule을 추가합니다.

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
  schedule:
    - cron: "0 0 * * *"   # 매일 UTC 0:00（한국 시간 09:00）에 실행

복수 브라우저로 병렬 테스트

strategy: matrix를 사용하면 Chromium·Firefox·WebKit의 3개 브라우저에서 테스트를 병렬 실행할 수 있습니다.

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        browser: [chromium, firefox, webkit]

    steps:
      # ... 이전 스텝과 동일 ...

      - name: Playwright 브라우저 설치
        run: playwright install ${{ matrix.browser }} --with-deps

      - name: E2E 테스트 실행（${{ matrix.browser }}）
        run: pytest --browser ${{ matrix.browser }}

      - name: 리포트 업로드
        uses: actions/upload-artifact@v4
        if: always()
        with:
          name: report-${{ matrix.browser }}
          path: reports/

FAQ

⚠️ GitHub Actions × Playwright에서 자주 발생하는 함정 8선

CI 환경 특유의 트러블이 많은 것이 GitHub Actions × Playwright의 조합입니다. 로컬에서 동작했는데 CI에서 실패한다……는 경험을 하지 않으려면 미리 파악해 두세요.

# 캐시를 활성화하는 경우（requirements.txt의 해시가 변하면 자동으로 갱신됨）
- uses: actions/setup-python@v5
  with:
    python-version: "3.11"
    cache: "pip"          # requirements.txt가 변하면 자동으로 캐시를 파기

# 캐시를 비활성화하여 클린 설치하는 경우
- uses: actions/setup-python@v5
  with:
    python-version: "3.11"
    # cache를 쓰지 않으면 캐시 없음（매번 클린 설치）

📋 이 글의 정리

CI/CD에 E2E 테스트를 통합하면 「누가 푸시해도 품질이 보증되는」 상태가 됩니다. 처음에는 Chromium만·main 브랜치만의 간단한 구성에서 시작하여 익숙해지면 스케줄 실행이나 복수 브라우저 대응으로 확장해 나가세요.