Feature: E2E 테스트 #154
Feature: E2E 테스트 #154
Conversation
Walkthrough이 풀 리퀘스트는 로그인 페이지의 테스트 계정 기능을 추가하고, 엔드투엔드(E2E) 테스트 환경을 개선하는 변경 사항을 포함하고 있습니다. GitHub Actions 워크플로우를 통해 Playwright 테스트를 자동화하고, 로그인 컴포넌트에 테스트 계정 로그인 옵션을 도입했습니다. 국제화(i18n) 파일도 업데이트되어 새로운 기능에 대한 번역을 추가했으며, 테스트 파일들은 새로운 테스트 ID 선택자를 사용하도록 수정되었습니다. Changes
Possibly related PRs
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
.github/workflows/ci.yml(1 hunks)packages/web/src/app/[lng]/(no-auth)/login/_components/LoginSection/index.tsx(2 hunks)packages/web/src/modules/i18n/locales/en/translation.json(2 hunks)packages/web/src/modules/i18n/locales/ko/translation.json(1 hunks)pages/content-ui/src/components/OpenSidePanelButton.tsx(1 hunks)pages/content-ui/src/index.tsx(0 hunks)tests/e2e/LoginPage.spec.ts(1 hunks)tests/e2e/MemosPage.spec.ts(3 hunks)tests/e2e/SidePanel.spec.ts(1 hunks)
💤 Files with no reviewable changes (1)
- pages/content-ui/src/index.tsx
✅ Files skipped from review due to trivial changes (1)
- pages/content-ui/src/components/OpenSidePanelButton.tsx
🧰 Additional context used
🪛 YAMLlint (1.35.1)
.github/workflows/ci.yml
[error] 4-4: trailing spaces
(trailing-spaces)
[error] 37-37: no new line character at the end of file
(new-line-at-end-of-file)
🔇 Additional comments (10)
tests/e2e/LoginPage.spec.ts (1)
Line range hint
13-32: 테스트 선택자 개선이 잘 이루어졌습니다!
getByRole에서getByTestId로의 변경은 다음과 같은 이점이 있습니다:
- 테스트의 안정성 향상
- 국제화(i18n)에 영향을 받지 않는 선택자 사용
- 명확한 테스트 의도 전달
tests/e2e/SidePanel.spec.ts (1)
6-6: 로그인 선택자 변경이 일관성 있게 적용되었습니다
beforeEach훅에서의 선택자 변경이 다른 테스트 파일들과 일관성을 유지하고 있습니다.tests/e2e/MemosPage.spec.ts (1)
48-48: 타임아웃 값의 설정 근거가 필요합니다
500ms타임아웃 값이 적절한지 검토가 필요합니다. 다음 사항들을 고려해보세요:
- 실제 저장 작업에 필요한 시간 측정
- 네트워크 지연 상황 고려
- 명시적인 저장 완료 이벤트나 상태 확인 사용 검토
.github/workflows/ci.yml (4)
8-8: 환경 변수 설정 검토 필요
WEB_URL환경 변수 설정이 개발 및 프로덕션 환경에 따라 적절히 구성되어 있습니다. 하지만 조건문에서develop브랜치만 확인하고 있어, 다른 환경(예: staging, qa)에 대한 고려가 필요할 수 있습니다.
9-9: 타임아웃 설정이 적절합니다60분의 타임아웃 설정은 E2E 테스트에 충분한 시간을 제공합니다.
19-19: 의존성 설치 최적화 제안
--frozen-lockfile와--prefer-offline플래그를 사용하여 의존성 설치를 최적화한 것이 좋습니다.
32-37: 테스트 결과 아티팩트 저장 설정이 적절합니다테스트 실패 시 디버깅을 위해 Playwright 리포트를 30일간 보관하도록 설정한 것이 좋습니다.
🧰 Tools
🪛 YAMLlint (1.35.1)
[error] 37-37: no new line character at the end of file
(new-line-at-end-of-file)
packages/web/src/modules/i18n/locales/ko/translation.json (1)
130-130: 번역이 자연스럽고 일관성이 있습니다"테스트 계정으로 로그인하기"라는 번역이 영문 "Continue with Test Account"와 의미상 일치하며, 다른 로그인 옵션들의 번역 스타일과도 일관성이 있습니다.
packages/web/src/modules/i18n/locales/en/translation.json (2)
130-130: 영문 텍스트가 자연스럽습니다"Continue with Test Account"라는 문구가 다른 로그인 옵션들("Continue with Kakao", "Continue with Google")과 일관된 형식을 유지하고 있습니다.
184-185: 가이드 텍스트 개선이 효과적입니다제목과 설명이 더 명확하고 친근하게 개선되었습니다. 줄바꿈을 사용하여 가독성을 높인 것도 좋습니다.
| "Ready to start? Press 'Option + S' to open the side panel", | ||
| ); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
가이드 텍스트의 국제화 처리가 필요합니다
하드코딩된 영어 텍스트를 i18n 시스템을 통해 관리하는 것이 좋습니다. 이는 다국어 지원을 용이하게 만들 것입니다.
| @@ -1,9 +1,10 @@ | |||
| 'use server'; | |||
|
|
|||
| import { SUPABASE } from '@extension/shared/constants'; | |||
There was a problem hiding this comment.
테스트 계정 정보의 보안 처리가 필요합니다
SUPABASE 상수에서 테스트 계정 정보를 직접 가져오는 것은 보안상 위험할 수 있습니다. 다음 사항들을 고려해보세요:
- 환경 변수 사용
- 테스트 환경에서만 사용 가능하도록 제한
- 프로덕션 빌드에서 제외
Also applies to: 7-7
| <Button | ||
| data-testid="test-login-button" | ||
| formAction={signInWithEmail.bind(null, SUPABASE.testEmail, SUPABASE.testPassword)} | ||
| className="h-12 bg-green-300 text-black hover:bg-green-300"> | ||
| 테스트 계정으로 로그인 | ||
| </Button> */} | ||
| {t('login.testLogin')} | ||
| </Button> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
테스트 계정 로그인 버튼의 환경별 표시 여부 제어가 필요합니다
테스트 계정 로그인 버튼은 개발 환경에서만 표시되어야 합니다. 다음과 같은 조건부 렌더링을 추가하는 것이 좋습니다:
+const isDevelopment = process.env.NODE_ENV === 'development';
// ...
+{isDevelopment && (
<Button
data-testid="test-login-button"
formAction={signInWithEmail.bind(null, SUPABASE.testEmail, SUPABASE.testPassword)}
className="h-12 bg-green-300 text-black hover:bg-green-300">
{t('login.testLogin')}
</Button>
+)}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Button | |
| data-testid="test-login-button" | |
| formAction={signInWithEmail.bind(null, SUPABASE.testEmail, SUPABASE.testPassword)} | |
| className="h-12 bg-green-300 text-black hover:bg-green-300"> | |
| 테스트 계정으로 로그인 | |
| </Button> */} | |
| {t('login.testLogin')} | |
| </Button> | |
| const isDevelopment = process.env.NODE_ENV === 'development'; | |
| {isDevelopment && ( | |
| <Button | |
| data-testid="test-login-button" | |
| formAction={signInWithEmail.bind(null, SUPABASE.testEmail, SUPABASE.testPassword)} | |
| className="h-12 bg-green-300 text-black hover:bg-green-300"> | |
| {t('login.testLogin')} | |
| </Button> | |
| )} |
| run: | | ||
| echo "${{ secrets.SHARED_ENV_FILE }}" >> packages/shared/.env | ||
| echo WEB_URL=${{ env.WEB_URL }} >> packages/shared/.env |
There was a problem hiding this comment.
🛠️ Refactor suggestion
환경 변수 파일 생성 방식 개선 필요
환경 변수를 파일에 직접 추가하는 방식은 보안상 위험할 수 있습니다. GitHub Actions의 secrets 기능을 더 안전하게 활용하는 방법을 고려해보세요.
- - name: setting environment variables
- run: |
- echo "${{ secrets.SHARED_ENV_FILE }}" >> packages/shared/.env
- echo WEB_URL=${{ env.WEB_URL }} >> packages/shared/.env
+ - name: Create environment file
+ uses: SpicyPizza/[email protected]
+ with:
+ envkey_WEB_URL: ${{ env.WEB_URL }}
+ file_name: packages/shared/.env
+ fail_on_empty: true📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| run: | | |
| echo "${{ secrets.SHARED_ENV_FILE }}" >> packages/shared/.env | |
| echo WEB_URL=${{ env.WEB_URL }} >> packages/shared/.env | |
| - name: Create environment file | |
| uses: SpicyPizza/[email protected] | |
| with: | |
| envkey_WEB_URL: ${{ env.WEB_URL }} | |
| file_name: packages/shared/.env | |
| fail_on_empty: true |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
.github/workflows/ci.yml (2)
33-38: 테스트 실행 단계 최적화 제안Playwright 테스트 실행 전에
turbo telemetry disable을 별도의 단계로 분리하는 것이 좋습니다. 또한 테스트 실패 시 재시도 메커니즘을 추가하는 것을 고려해보세요.- - name: Run Playwright tests - run: | - turbo telemetry disable - pnpm run test + - name: Disable Turbo telemetry + run: turbo telemetry disable + - name: Run Playwright tests + run: pnpm run test --retries=2
39-44: 테스트 결과 아티팩트 설정 개선테스트 실패 시에도 결과를 확인할 수 있도록
if조건을 수정하고, 테스트 스크린샷도 아티팩트에 포함하는 것이 좋습니다.- uses: actions/upload-artifact@v4 - if: ${{ !cancelled() }} + if: ${{ always() && !cancelled() }} with: name: playwright-report - path: playwright-report/ + path: | + playwright-report/ + test-results/ retention-days: 30🧰 Tools
🪛 YAMLlint (1.35.1)
[error] 44-44: no new line character at the end of file
(new-line-at-end-of-file)
.github/workflows/cicd-web.yml (2)
37-43: 개발 환경 배포 단계 개선 필요개발 환경 배포 시 URL 검증 로직이 없습니다. 배포된 URL이 유효한지 확인하는 단계를 추가하는 것이 좋습니다.
- name: Deploy development if: ${{ github.event_name == 'push'}} id: deploy run: | URL=$(vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}) + if ! curl --output /dev/null --silent --head --fail "$URL"; then + echo "배포된 URL에 접근할 수 없습니다: $URL" + exit 1 + fi echo "url=$URL" >> "$GITHUB_OUTPUT"
54-58: 프로덕션 배포 프로세스 보완 필요프로덕션 배포 시 롤백 메커니즘이 없습니다. 배포 실패 시 자동 롤백을 구현하는 것이 좋습니다.
- name: Deploy production when push on master branch if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/master'}} id: deploy-prod run: | + PREVIOUS_URL=$(vercel ls --prod --token=${{ secrets.VERCEL_TOKEN }} | grep -m 1 ${{secrets.PROD_WEB_URL_WITHOUT_PROTOCOL}} | awk '{print $2}') VERCEL_DEPOLYED_URL="$(vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }})" - vercel --prod --token=${{ secrets.VERCEL_TOKEN }} + if vercel --prod --token=${{ secrets.VERCEL_TOKEN }}; then + echo "프로덕션 배포 성공" + else + echo "프로덕션 배포 실패, 이전 버전으로 롤백" + vercel alias set "$PREVIOUS_URL" ${{secrets.PROD_WEB_URL_WITHOUT_PROTOCOL}} --token=${{ secrets.VERCEL_TOKEN }} + exit 1 + fi echo "url=$VERCEL_DEPOLYED_URL" >> "$GITHUB_OUTPUT"🧰 Tools
🪛 YAMLlint (1.35.1)
[error] 58-58: no new line character at the end of file
(new-line-at-end-of-file)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
.github/workflows/ci.yml(1 hunks).github/workflows/cicd-web.yml(2 hunks)
🧰 Additional context used
🪛 YAMLlint (1.35.1)
.github/workflows/ci.yml
[error] 7-7: trailing spaces
(trailing-spaces)
[error] 44-44: no new line character at the end of file
(new-line-at-end-of-file)
.github/workflows/cicd-web.yml
[error] 58-58: no new line character at the end of file
(new-line-at-end-of-file)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: build-web
- GitHub Check: build-web
🔇 Additional comments (1)
.github/workflows/ci.yml (1)
25-31: 환경 변수 설정 방식 개선 필요환경 변수를 파일에 직접 추가하는 방식은 보안상 위험할 수 있습니다. GitHub Actions의
secrets기능을 더 안전하게 활용하는 방법을 고려해보세요.
.github/workflows/cicd-web.yml
Outdated
| outputs: | ||
| deployment_url: ${{ steps.deploy.outputs.url }} |
There was a problem hiding this comment.
💡 Codebase verification
배포 URL 출력 구성의 불일치 발견
워크플로우의 출력 구성에 문제가 있습니다:
- 현재
deployment_url은 개발 환경 배포(steps.deploy.outputs.url)만 참조합니다 - 스테이징(
deploy-staging)과 프로덕션(deploy-prod) 배포 URL이 job 출력에 포함되지 않습니다
수정 제안:
outputs:
deployment_url: ${{ steps.deploy.outputs.url || steps.deploy-staging.outputs.url || steps.deploy-prod.outputs.url }}🔗 Analysis chain
워크플로우 출력 변수 설정 검토
deployment_url 출력 변수가 모든 배포 시나리오(개발/스테이징/프로덕션)에서 올바르게 설정되는지 확인이 필요합니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# GitHub Actions 워크플로우 실행 기록에서 deployment_url 출력값 확인
gh run list --workflow=cicd-web.yml --json conclusion,event,headBranch,status,databaseId --jq '.[] | select(.conclusion=="success") | .databaseId' | head -n 5 | while read -r run_id; do
echo "Run ID: $run_id"
gh run view $run_id --json jobs --jq '.jobs[].outputs'
done
Length of output: 817
Script:
#!/bin/bash
# Check the workflow file content focusing on deployment steps and outputs
cat .github/workflows/cicd-web.yml
Length of output: 2238
guesung
force-pushed
the
feature/fix-the-e2e
branch
from
1ed03f1 to
1795d6a
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
.github/workflows/cicd-web.yml (1)
43-57: 스테이징과 프로덕션 배포 단계의 중복을 줄일 수 있습니다스테이징과 프로덕션 배포 단계가 매우 유사한 구조를 가지고 있어 재사용 가능한 컴포저블 액션으로 리팩토링하면 좋을 것 같습니다.
다음과 같이 컴포저블 액션을 생성하는 것을 제안합니다:
# .github/actions/vercel-deploy/action.yml name: 'Vercel Deploy' inputs: environment: required: true type: string vercel-token: required: true type: string alias-url: required: true type: string runs: using: "composite" steps: - shell: bash run: | VERCEL_DEPLOYED_URL=$(vercel deploy --prebuilt --token=${{ inputs.vercel-token }}) vercel alias set "$VERCEL_DEPLOYED_URL" ${{ inputs.alias-url }} --token=${{ inputs.vercel-token }} --scope=gueit214s-projects echo "url=$VERCEL_DEPLOYED_URL" >> "$GITHUB_OUTPUT"그리고 워크플로우에서 다음과 같이 사용할 수 있습니다:
- - name: Deploy staging + - uses: ./.github/actions/vercel-deploy if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/develop'}} id: deploy-staging - run: | - VERCEL_DEPLOYED_URL=$(vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}) - vercel alias set "$VERCEL_DEPLOYED_URL" ${{secrets.STAGING_WEB_URL_WITHOUT_PROTOCOL}} --token=${{ secrets.VERCEL_TOKEN }} --scope=gueit214s-projects - echo "url=$VERCEL_DEPLOYED_URL" >> "$GITHUB_OUTPUT" + with: + environment: staging + vercel-token: ${{ secrets.VERCEL_TOKEN }} + alias-url: ${{ secrets.STAGING_WEB_URL_WITHOUT_PROTOCOL }}🧰 Tools
🪛 YAMLlint (1.35.1)
[error] 57-57: no new line character at the end of file
(new-line-at-end-of-file)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
.github/workflows/ci.yml(1 hunks).github/workflows/cicd-extension.yml(0 hunks).github/workflows/cicd-web.yml(2 hunks)
💤 Files with no reviewable changes (1)
- .github/workflows/cicd-extension.yml
🧰 Additional context used
🪛 YAMLlint (1.35.1)
.github/workflows/cicd-web.yml
[error] 57-57: no new line character at the end of file
(new-line-at-end-of-file)
.github/workflows/ci.yml
[error] 7-7: trailing spaces
(trailing-spaces)
[error] 44-44: no new line character at the end of file
(new-line-at-end-of-file)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build-web
🔇 Additional comments (6)
.github/workflows/ci.yml (4)
1-13: 워크플로우 트리거 설정이 적절합니다!CICD Web 워크플로우 완료 후 테스트를 실행하는 것은 좋은 접근 방식입니다. 성공적인 배포 후에만 테스트가 실행되도록 하는 조건도 올바르게 설정되어 있습니다.
🧰 Tools
🪛 YAMLlint (1.35.1)
[error] 7-7: trailing spaces
(trailing-spaces)
14-23: 환경 설정이 잘 구성되어 있습니다!Node.js 설정과 pnpm 캐시 활용이 모범 사례를 따르고 있습니다.
25-31: 환경 변수 설정 방식 개선이 필요합니다현재 환경 변수를 파일에 직접 작성하는 방식은 보안상 더 안전한 방법으로 개선될 수 있습니다.
다음과 같이
create-envfile액션을 사용하는 것을 권장합니다:- - name: setting environment variables - run: | - echo "${{ secrets.SHARED_ENV_FILE }}" >> packages/shared/.env - echo WEB_URL=${{ env.WEB_URL }} >> packages/shared/.env + - name: Create environment file + uses: SpicyPizza/[email protected] + with: + envkey_WEB_URL: ${{ env.WEB_URL }} + file_name: packages/shared/.env + fail_on_empty: true
33-44: 테스트 실행 구성이 잘 되어 있습니다!Playwright 브라우저 설치, 텔레메트리 비활성화, 그리고 테스트 리포트 아티팩트 업로드까지 모든 필요한 단계가 포함되어 있습니다.
🧰 Tools
🪛 YAMLlint (1.35.1)
[error] 44-44: no new line character at the end of file
(new-line-at-end-of-file)
.github/workflows/cicd-web.yml (2)
9-10: 배포 URL 출력 구성이 잘 되어 있습니다!개발, 스테이징, 프로덕션 환경의 배포 URL을 모두 고려한 fallback 패턴이 잘 구현되어 있습니다.
36-42: 개발 환경 배포 설정이 적절합니다!develop과 master 브랜치를 제외한 브랜치에 대한 개발 환경 배포 설정이 잘 구현되어 있으며, 배포 URL을 올바르게 캡처하고 있습니다.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
.github/workflows/ci.yml (1)
27-34: 🛠️ Refactor suggestion환경 변수 설정 방식 개선 필요
환경 변수를 파일에 직접 추가하는 현재 방식은 보안상 위험할 수 있습니다.
다음과 같이
create-envfile액션을 사용하여 더 안전하게 환경 변수를 관리하는 것을 추천드립니다:- - name: setting environment variables - run: | - echo "${{ secrets.SHARED_ENV_FILE }}" >> packages/shared/.env - echo WEB_URL=${{ env.WEB_URL }} >> packages/shared/.env - echo "${{ secrets.WEB_ENV_FILE }}" > packages/web/.env - echo NEXT_PUBLIC_WEB_URL=${{ env.WEB_URL }} >> packages/web/.env + - name: Create shared environment file + uses: SpicyPizza/[email protected] + with: + envkey_WEB_URL: ${{ env.WEB_URL }} + file_name: packages/shared/.env + fail_on_empty: true + + - name: Create web environment file + uses: SpicyPizza/[email protected] + with: + envkey_NEXT_PUBLIC_WEB_URL: ${{ env.WEB_URL }} + file_name: packages/web/.env + fail_on_empty: true
🧹 Nitpick comments (1)
.github/workflows/ci.yml (1)
35-46: 테스트 실행 및 결과 저장 설정이 적절합니다.Playwright 브라우저 설치, 테스트 실행, 그리고 결과 보고서 저장이 잘 구성되어 있습니다. 단, 파일 끝에 개행 문자를 추가하는 것이 좋습니다.
retention-days: 30 +🧰 Tools
🪛 YAMLlint (1.35.1)
[error] 46-46: no new line character at the end of file
(new-line-at-end-of-file)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
.github/workflows/ci.yml(1 hunks)
🧰 Additional context used
🪛 YAMLlint (1.35.1)
.github/workflows/ci.yml
[error] 4-4: trailing spaces
(trailing-spaces)
[error] 8-8: trailing spaces
(trailing-spaces)
[error] 46-46: no new line character at the end of file
(new-line-at-end-of-file)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build-web
🔇 Additional comments (2)
.github/workflows/ci.yml (2)
1-9: 워크플로우 트리거 설정이 적절합니다.워크플로우가 'CICD Web' 워크플로우 완료 후에 실행되도록 올바르게 구성되어 있습니다.
🧰 Tools
🪛 YAMLlint (1.35.1)
[error] 4-4: trailing spaces
(trailing-spaces)
[error] 8-8: trailing spaces
(trailing-spaces)
10-26: 작업 설정이 잘 구성되어 있습니다.타임아웃, Node.js 설정, 패키지 설치 등이 적절하게 구성되어 있습니다.
pnpm install에--frozen-lockfile과--prefer-offline플래그를 사용한 것이 좋습니다.
Summary by CodeRabbit
릴리즈 노트
새로운 기능
버그 수정
개선 사항