chore/#38 playwright 테스트 설정 (#61)

* chore: playwright 설치

* feat: playwright e2e 테스트 (시각적 회귀 테스트, 웹접근성 테스트)

* chore: playwright ci 테스트

* chore: ci 환경에서 의존성 설치 방식 변경

* chore: 워크플로우 ci환경에 playwright 브라우저 설치

* chore: 워크플로우 playwright ci 옵션 추가

* chore: playwright npx로 실행 명령어 변경

* chore: playwright --project 옵션 제거

* chore: 명령어 복구

* chore: playwright 환경 수정

* chore: playwright worker 옵션 변경

* chore: log 추가

* chore: 스토리북 빌드 방식으로 실행

* chore: button 스냅샷 업로드

* chore: playwright 설정 복원

* chore: pr comment 추가

* chore: fetch-depth 추가

* chore: 스냅샷 파일 수정

* chore: testDir path 설정

* chore: playwright 옵션 변경

* chore: 불필요한 테스트 삭제

* chore: checkout version 업데이트

* chore: 테스트 코드 변경

* chore: log 삭제

* chore: error 로그 추가

* chore: 로그 추가

* chore: --update-snapshots 옵션 추가

* chore: 폴더 확인 로직 수정

* chore: yml indent 수정

* chore: 디렉토리 확인 수정

* chore: update snapshot 옵션 삭제

* chore: 시각적 변경 테스트

* chore: update snapshot

* chore: 디렉토리 구조 확인

* chore: 아티팩트 업로드

* chore: bold 처리 삭제

* chore: button font arial로 변경

* chore: font 업데이트 이후 actual 변경

* chore: font-weight 700 to bold

* chore: web font로 변경

* chore: 폰트 로딩 상태 확인

* chore: roboto로 변경

* chore: font-weight 삭제

* chore: ci 환경에 폰트 설치

* chore: 변경되는 스냅샷 확인

* chore: plarywright 스크립트 변경

* chore: storybook 실행 명령어 수정

* chore: process 변경

* chore: local vrt 삭제

* chore: label flow 수정

* chore: .playwright의 하위에 있는 폴더만 pr에 반영되도록 수정

* Update VRT snapshots in .playwright folder

* chore: button에 불필요한 텍스트 삭제

* Update VRT snapshots in .playwright folder

* chore: Button 라인 분리

* chore: 실패시 아티팩트 업로드하도록 수정

* chore: 성공 comment 메시지 수정

* chore: chromatic action version 수정

* chore: pnpm action version 변경

* chore: vrt test에 permission 추가

* chore: 토큰 체커

---------

Co-authored-by: GitHub Action <action@github.com>

.github/workflows/chromatic_auto_deploy.yml

@@ -25,18 +25,25 @@ jobs:
         with:
           node-version: 20
 
-      - name: Corepack 활성화
-        run: corepack enable
-
-      - name: pnpm 설치
-        run: corepack prepare pnpm@latest --activate
+      - name: pnpm 8.15.6 설치
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8.15.6
 
       - name: 의존성 설치
         run: pnpm install --no-frozen-lockfile
 
+      - name: Check if token exists
+        run: |
+          if [ -n "${{ secrets.PRIMITIVE_UI_CHROMATIC_TOKEN }}" ]; then
+            echo "PRIMITIVE_UI_CHROMATIC_TOKEN is set"
+          else
+            echo "PRIMITIVE_UI_CHROMATIC_TOKEN is not set"
+          fi
+
       - name: chromatic에 배포
         id: publish_chromatic
-        uses: chromaui/action@v1
+        uses: chromaui/action@latest
         with:
           projectToken: ${{ secrets.PRIMITIVE_UI_CHROMATIC_TOKEN }}
           token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/label-vrt-update.yml

@@ -0,0 +1,73 @@
+name: VRT 스냅샷 업데이트
+on:
+  pull_request:
+    types: [labeled]
+
+jobs:
+  update-snapshots:
+    if: github.event.label.name == 'VRT'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8.15.6
+
+      - name: 의존성 설치
+        run: pnpm install
+
+      - name: Playwright 설치
+        run: pnpm exec playwright install --with-deps
+
+      - name: 스토리북 빌드
+        run: pnpm run build-storybook
+
+        working-directory: packages/primitive
+      - name: 스토리북 실행
+        run: |
+          npx serve -l 6006 packages/primitive/storybook-static &
+          echo $! > .storybook-pid
+
+      - name: 스냅샷 업데이트
+        run: pnpm run e2e:update
+
+      - name: 스토리북 프로세스 종료
+        if: always()
+        run: kill $(cat .storybook-pid)
+
+      - name: 변경된 스냅샷 커밋 및 푸시
+        run: |
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+          git add .playwright
+          git diff --staged --quiet || git commit -m "Update VRT snapshots in .playwright folder"
+          git push origin HEAD:${{ github.head_ref }}
+
+      - name: PR 코멘트 작성
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: '## VRT 스냅샷 업데이트 완료\n\n스냅샷이 성공적으로 업데이트되었습니다. 변경된 스냅샷이 이 PR에 포함되었습니다. 리뷰해주세요.'
+            })
+
+      - name: VRT 레이블 제거
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            github.rest.issues.removeLabel({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              name: 'VRT'
+            })

.github/workflows/pr-vrt.yml

@@ -0,0 +1,84 @@
+name: PR VRT 테스트
+on:
+  pull_request:
+    branches: [develop]
+
+permissions:
+  contents: read
+  pull-requests: write
+
+jobs:
+  vrt-test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8.15.6
+
+      - name: 의존성 설치
+        run: pnpm install --no-frozen-lockfile
+
+      - name: Playwright 설치
+        run: pnpm exec playwright install --with-deps
+
+      - name: 스토리북 빌드
+        run: pnpm run build-storybook
+        working-directory: packages/primitive
+
+      - name: 스토리북 실행
+        run: |
+          npx serve -l 6006 packages/primitive/storybook-static &
+          echo $! > .storybook-pid
+
+      - name: VRT 테스트 실행
+        id: vrt-test
+        run: |
+          if pnpm run e2e; then
+            echo "결과=성공" >> $GITHUB_OUTPUT
+          else
+            echo "결과=실패" >> $GITHUB_OUTPUT
+          fi
+
+      - name: 스토리북 프로세스 종료
+        if: always()
+        run: kill $(cat .storybook-pid)
+
+      - name: 테스트 결과 및 diff 이미지 업로드
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: vrt-results
+          path: |
+            playwright-report/
+            .playwright/
+          retention-days: 7
+
+      - name: PR 코멘트 작성 (성공)
+        uses: actions/github-script@v6
+        if: success()
+        with:
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: '## VRT 테스트 성공\n\nVRT 테스트가 성공적으로 완료되었습니다.'
+            })
+
+      - name: PR 코멘트 작성 (실패)
+        uses: actions/github-script@v6
+        if: failure()
+        with:
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: '## VRT 테스트 실패\n\nVRT 테스트가 실패했습니다. 자세한 내용은 첨부된 테스트 결과와 diff 이미지를 확인해주세요.\n\n[테스트 결과 확인](https://github.com/${{github.repository}}/actions/runs/${{github.run_id}})\n\n스냅샷 업데이트가 필요한 경우, PR에 "VRT" 레이블을 추가해주세요.'
+            })

.gitignore

@@ -39,3 +39,7 @@ yarn-error.log*
 
 *storybook.log
 .eslintcache
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/