프론트엔드 E2E 테스트 - playwright 설정

.github/workflows/frontend_playwright.yml

@@ -0,0 +1,59 @@
+name: Frontend Playwright
+
+on:
+  push:
+    branches:
+      - dev/fe
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on:
+      - self-hosted
+      - spring
+      - develop
+    env:
+      frontend-directory: ./frontend
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: 노드 환경 사용
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: 환경 파일 생성
+        run: |
+          if [ "${{ github.ref_name }}" == "main" ]; then
+            echo "REACT_APP_API_URL=${{ secrets.REACT_APP_API_URL }}" > ${{ env.frontend-directory }}/.env.production
+            echo "REACT_APP_BASE_URL=${{ secrets.REACT_APP_BASE_URL }}" >> ${{ env.frontend-directory }}/.env.production
+          else
+            echo "REACT_APP_API_URL=${{ secrets.REACT_APP_BETA_API_URL }}" > ${{ env.frontend-directory }}/.env.development
+            echo "REACT_APP_BASE_URL=${{ secrets.REACT_APP_BETA_BASE_URL }}" >> ${{ env.frontend-directory }}/.env.development
+          fi
+
+          echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> ${{ env.frontend-directory }}/.env.production
+          echo "SENTRY_DSN=${{ secrets.SENTRY_DSN }}" >> ${{ env.frontend-directory }}/.env.production
+          echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> ${{ env.frontend-directory }}/.env.sentry-build-plugin
+
+      - name: 환경 파일 권한 설정
+        run: chmod 644 ${{ env.frontend-directory }}/.env.*
+
+      - name: npm 패키지 설치
+        run: npm ci
+        working-directory: ${{ env.frontend-directory }}
+
+      - name: Playwright Browsers 설치
+        run: npx playwright install --with-deps
+        working-directory: ${{ env.frontend-directory }}
+
+      - name: Playwright 테스트 실행
+        run: npx playwright test
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

frontend/.gitignore

@@ -10,3 +10,7 @@ dist
 *.crt
 *.key
 *.csr
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

frontend/e2eTests/example.spec.ts

@@ -0,0 +1,15 @@
+import { test } from '@playwright/test';
+
+test('코드잽 서비스에 들어가서 로그인 할 수 있다.', async ({ page }) => {
+  await page.goto('/');
+  await page.getByRole('button', { name: '로그인', exact: true }).click();
+  await page
+    .locator('div')
+    .filter({ hasText: /^아이디 \(닉네임\)$/ })
+    .locator('div')
+    .click();
+  await page.locator('input[type="text"]').fill('ll');
+  await page.locator('input[type="text"]').press('Tab');
+  await page.locator('input[type="password"]').fill('llll1111');
+  await page.locator('form').getByRole('button', { name: '로그인' }).click();
+});

frontend/jest.config.ts

@@ -20,6 +20,7 @@ const config: Config = {
     'react-syntax-highlighter/dist/esm': 'react-syntax-highlighter/dist/cjs',
   },
   transformIgnorePatterns: ['/node_modules/(?!react-syntax-highlighter)'],
+  testPathIgnorePatterns: ['/node_modules/', '/e2eTests/', '/tests-examples/'],
 };
 
 export default config;