Playwright report 인증, 배포

Playwright trace viewer를 사용한 report HTML을 배포할 때 외부에서 확인이 불가하도록 Web API를 통해 간단한 인증을 적용하고 인프라 비용 없이 Playwright report HTML을 Netlify를 통해 배포하는 방법을 소개합니다.

구현

Playwright 설치 및 설정이 완료되었다고 가정합니다.

인증

먼저, package.json 파일을 다음과 같이 수정합니다.

{
  "name": "e2e",
  "version": "1.0.0",
  "scripts": {
    "playwright:report": "npx playwright test --trace on --reporter=html",
    "report:auth": "dotenv -e .env pnpm playwright:report; API_DOMAIN=https://example.com pnpm add-script; playwright show-report",
    "add-script": "node addScript.js"
  },
  "dependencies": {
    "@playwright/test": "^1.48.0"
  }
}

playwright:report 명령을 통해 trace viewer가 적용된 report HTML을 생성합니다. ./playwright-report 폴더에 index.html 파일이 생성되면, add-script 명령을 통해 index.html 상단에 스크립트를 추가할 것입니다. addScript.js의 내용은 다음과 같습니다.

addScript.js

const fs = require('fs')
const path = require('path')
 
const scriptTag = `
  <script>
    (async () => {
        const id = prompt("id:");
        const password = prompt("password:");
 
        if (!id || !password) {
            window.location.reload();
            return; 
        }
 
        try {
            const response = await fetch('${process.env.API_DOMAIN}/sign-in', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json' 
                },
                body: JSON.stringify({ id, password })
            });
            if (!response.ok) {
                window.location.reload();
                return; 
            }
        } catch (error) {
            window.location.reload();
        }
    })();
  </script>\n`
 
const filePath = path.join(__dirname, './playwright-report/index.html')
 
fs.readFile(filePath, 'utf8', (err, data) => {
  if (err) {
    console.error('playwright report html 읽기 실패:', err)
    return
  }
 
  const lines = data.split('\n')
 
  lines.splice(7, 0, scriptTag)
 
  const updatedData = lines.join('\n')
 
  fs.writeFile(filePath, updatedData, 'utf8', (err) => {
    if (err) {
      console.error('playwright report html 수정 실패:', err)
      return
    }
    console.log('script를 playwright report html에 추가합니다.')
  })
})

위의 스크립트는 사용자에게 ID와 비밀번호를 입력받고 API를 통해 인증하는 절차를 추가합니다. 만약 API를 통해 인증하는 것이 번거롭다면, 테스트용 아이디와 비밀번호와 비교하는 방식으로도 구현할 수 있습니다.

index.html 파일에 추가되는 스크립트는 HTML의 head 태그 시작 부분에 삽입되며, 페이지 로드 시 사용자에게 인증을 요구합니다. 입력하지 않거나 인증에 실패할 경우 페이지를 새로 고침하여 다시 인증을 요구합니다.

배포

GitHub Actions를 통해 테스트를 실행하고, index.html에 스크립트를 추가한 후 결과물을 Netlify를 통해 배포합니다.

Netlify에 로그인한 후, GitHub 레포지토리를 기반으로 프로젝트를 생성합니다.
우상단 User image > User Settings > Applications > Personal access token 에서 토큰을 생성하고 복사합니다.
Project > Site > Site Configuration > Site Information > Site id를 복사합니다.
GitHub 레포지토리 > Settings > Secrets and variables > Repository secrets에 다음과 같이 추가합니다.
```
NETLIFY_AUTH_TOKEN=복사한 토큰
NETLIFY_SITE_ID=복사한 Site id
```
GitHub Action yml 파일을 작성합니다. 프로젝트 루트 디렉토리에 ./github/workflows/deploy.yml 파일을 추가합니다.

name: Playwright Report Deploy
 
on:
  push:
    branches:
      - main
 
jobs:
  test-report:
    runs-on: ubuntu-latest
 
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
 
      - name: Install dependencies
        run: pnpm i --frozen-lockfile && pnpm exec playwright install
 
      - name: Run Playwright Tests
        run: pnpm playwright --trace on --reporter=html
 
      - name: Add authorization prompt
        if: always()
        run: API_DOMAIN=https://example.com pnpm add-script
 
      - name: Deploy to Netlify
        if: always()
        uses: nwtgck/actions-netlify@v2.0
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
        with:
          publish-dir: ./playwright-report
          production-branch: main
          production-deploy: true

위의 설정을 완료하고 main 브랜치에 push하면 GitHub Actions 워크플로우가 실행됩니다.

참고 자료

Dependencies Git 명령어 모음