[25.07.26 / TASK-229] Feature - FE Git Action E2E CI 적용

.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'
+
+ - name: Upload screenshots
+ uses: actions/upload-artifact@v4
+ if: failure()
+ with:
+ name: cypress-screenshots
+ path: cypress/screenshots
+
+ slackNotify:
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Notify message to slack
+ uses: rtCamp/action-slack-notify@v2
+ env:
+ SLACK_WEBHOOK: ${{ secrets.GIT_ACTION_SLACK_WEBHOOK }}
+ SLACK_CHANNEL: ${{ secrets.GIT_ACTION_SLACK_CHANNEL }}
+ SLACK_COLOR: ${{ job.status }} # 또는 'green', '#ff00ff' 처럼 직접 색상 지정
+ SLACK_USERNAME: Github
+ SLACK_ICON: https://cdn-icons-png.flaticon.com/512/25/25231.png
+ SLACK_TITLE: E2E Test
+ SLACK_MESSAGE: 'E2E CI 테스트가 실패했습니다. Artifact를 확인해주세요.'

.gitignore

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

Dockerfile

@@ -18,4 +18,4 @@ RUN pnpm install --no-frozen-lockfile --prod
 
 EXPOSE 3000
 
-CMD ["pm2-runtime", "start", "ecosystem.config.js"]
+CMD ["pm2-runtime", "start", "ecosystem.config.js"]

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');