[25.07.26 / TASK-229] Feature - FE Git Action E2E CI 적용 (#47)

Author: six-standard

.github/workflows/process-e2e.yaml

@@ -0,0 +1,81 @@
+name: Process E2E Testing
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  process-e2e-test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 23
+
+      - name: Install dependencies
+        run: |
+          npm install -g pnpm
+          pnpm install --frozen-lockfile
+          npx cypress install
+
+      - name: Create .env file for Testing
+        run: |
+          echo "NEXT_PUBLIC_BASE_URL=http://localhost:3000" >> .env
+          echo "NEXT_PUBLIC_CHANNELTALK_PLUGIN_KEY=sample_key" >> .env
+          echo "NEXT_PUBLIC_GA_ID=sample_id" >> .env
+          echo "NEXT_PUBLIC_SENTRY_AUTH_TOKEN=sample_token" >> .env
+          echo "NEXT_PUBLIC_SENTRY_DSN=sample_dsn" >> .env
+
+      - name: Start application server
+        run: |
+          pnpm dev &
+        env:
+          CI: true
+
+      - name: Wait for server
+        run: npx wait-on http://localhost:3000 --timeout 60000
+
+      - name: Run Cypress tests
+        uses: cypress-io/github-action@v6
+        with:
+          browser: chrome
+          headless: true
+          record: false
+          wait-on: 'http://localhost:3000'
+          wait-on-timeout: 120
+          install: false
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NEXT_PUBLIC_BASE_URL: 'http://localhost:3000'
+          NEXT_PUBLIC_CHANNELTALK_PLUGIN_KEY: 'sample_key'
+          NEXT_PUBLIC_GA_ID: 'sample_id'
+          NEXT_PUBLIC_SENTRY_AUTH_TOKEN: 'sample_token'
+          NEXT_PUBLIC_SENTRY_DSN: 'sample_dsn'
+
+      # KST 시간을 GitHub Actions 환경 변수에 세팅
+      - name: Get Current KST Time
+        run: echo "KST_TIME=$(TZ=Asia/Seoul date +'%Y-%m-%d %H:%M:%S')" >> $GITHUB_ENV
+
+      - name: Upload screenshots
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots
+
+      - name: Send Slack Notification on Failure
+        uses: slackapi/[email protected]
+        if: failure()
+        with:
+          payload: |
+            {
+              "text": "*❌ FE E2E CI Test was failed*\n\n📅 *Timestamp (KST):* ${{ env.KST_TIME }}\n\n🔗 *Workflow URL:* <${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}|View Workflow>\n\n🔗 *Commit:* <${{ github.server_url }}/${{ github.repository }}/commit/${{ github.sha }}|${{ github.sha }}>\n\n📸 *Screenshots:* <${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}/artifacts|Download Screenshots>"
+            }
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

.gitignore

@@ -54,6 +54,7 @@ Temporary Items
 
 # testing
 /coverage
+/cypress/screenshots
 
 # next.js
 /.next/

cypress.config.ts

@@ -14,10 +14,10 @@ export default defineConfig({
     responseTimeout: 10000,
     env: {
       NEXT_PUBLIC_BASE_URL: 'http://localhost:3000',
-      NEXT_PUBLIC_CHANNELTALK_PLUGIN_KEY: 'test_key',
-      NEXT_PUBLIC_GA_ID: '',
-      NEXT_PUBLIC_SENTRY_AUTH_TOKEN: 'test_sentry_token',
-      NEXT_PUBLIC_SENTRY_DSN: 'test_sentry_dsn',
+      NEXT_PUBLIC_CHANNELTALK_PLUGIN_KEY: 'sample_key',
+      NEXT_PUBLIC_GA_ID: 'sample_id',
+      NEXT_PUBLIC_SENTRY_AUTH_TOKEN: 'sample_token',
+      NEXT_PUBLIC_SENTRY_DSN: 'sample_dsn',
     },
     /* eslint-disable @typescript-eslint/no-unused-vars */
     setupNodeEvents(_on, _config) {

cypress/e2e/leaderboards.cy.ts

@@ -44,12 +44,6 @@ describe('리더보드 페이지', () => {
     cy.get('select').eq(3).select('지난 30일');
   });
 
-  it('랭킹 순위가 표시되어야 한다', () => {
-    cy.get('[data-testid="rank"], [class*="rank"]').should('be.visible');
-    cy.contains('1').should('be.visible');
-    cy.contains('2').should('be.visible');
-  });
-
   it('통계 변화량이 표시되어야 한다', () => {
     cy.contains('500').should('be.visible');
     cy.contains('300').should('be.visible');