Github-Actions Playwright Test Report 결과 PR Commnet로 남기기

📒 Github-Actions Playwright Test Report 결과 PR Commnet로 남기기

---

Github Actions 파이프라인에서 Playwright로 E2E 테스트를 진행하고, 테스트 결과 및 소요 시간을 Pull Request Comment로 남기는 방법을 소개합니다.

 

📌 Playwright Report output 설정

playwright.config.ts 파일에서 테스트 결과 report를 다음과 같이 설정해 주었습니다.

export default defineConfig({
  ...
  reporter: process.env.CI ? [["json", { outputFile: "results.json" }]] : "line",
  ...
});

Github Action 환경에서 돌아갈 때는 json 타입으로 파일을 생성하도록 했고, 로컬 터미널에서는 결과만 표시합니다.

 

만약 파일이 생성되면 다음과 같이 프로젝트 루트 경로에 report 파일이 생성됩니다.

 

📌 배포 스크립트 작성

- uses: daun/playwright-report-summary@v3
  name: "Playwright Reporter"
  with:
    report-file: results.json
    comment-title: "🔎 테스트 결과"
    job-summary: true

https://github.com/daun/playwright-report-summary

리포트 comment는 playwright-report-summary 액션 모듈의 도움을 받습니다.

report-file 속성에 아까 설정해 둔 json 파일명을 입력해 주시면 됩니다.

 

 

다음과 같이 테스트를 마친 후 실행시켜 주면 됩니다.

name: test
on:
  pull_request:
    branches: main
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    env:
      DOCKER_IMAGE_TAG: lasbe/test:latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: lts/*

      - name: Build the Dockerfile
        run: docker build -t ${{ env.DOCKER_IMAGE_TAG }} .

      - name: Run Docker Container
        run: docker run -d --name test -p 3000:3000 ${{ env.DOCKER_IMAGE_TAG }}

      - name: Install dependencies
        run: npm i -g pnpm && pnpm i && pnpm playwright install chromium --with-deps

      - name: Run Playwright tests
        run: pnpm test:e2e

      - name: Stop And Remove Docker Container
        run: |
          docker stop test
          docker rm test

      - uses: daun/playwright-report-summary@v3
        name: "Playwright Reporter"
        with:
          report-file: results.json
          comment-title: "🔎 테스트 결과"
          job-summary: true

 

📌 Repository Workflow permissions 설정

해당하는 Repository에서 Setting > Actions > General로 진입해서 Read and write permissions으로 변경 후 Save 해줍니다.

이 과정이 되어있지 않으면 pipeline에서 permission warning이 발생하며 comment를 남기지 못합니다.