Feature: E2E 테스트

.github/workflows/ci.yml

@@ -0,0 +1,46 @@
+name: Playwright Tests
+on:
+  workflow_run:
+    workflows: 
+      - CICD Web
+    types:
+      - completed
+
+
+jobs:
+  test:
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    env:
+      WEB_URL: ${{ github.event.workflow_run.outputs.deployment_url }}
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: pnpm
+      - name: pnpm install
+        run: pnpm install --frozen-lockfile --prefer-offline
+
+      - 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: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: |
+          turbo telemetry disable
+          pnpm run test
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.github/workflows/cicd-extension.yml

@@ -2,7 +2,6 @@ name: CICD Extension
 
 on:
   - push
-  - pull_request
 
 jobs:
   build-extension:

.github/workflows/cicd-web.yml

@@ -2,11 +2,12 @@ name: CICD Web
 
 on:
   - push
-  - pull_request
 
 jobs:
   build-web:
     runs-on: ubuntu-22.04
+    outputs:
+      deployment_url: ${{ steps.deploy.outputs.url || steps.deploy-staging.outputs.url || steps.deploy-prod.outputs.url }}
     env:
       WEB_URL: "${{ github.ref == 'refs/heads/develop' && secrets.STAGING_WEB_URL || secrets.PROD_WEB_URL }}"
     steps:
@@ -32,14 +33,25 @@ jobs:
       - name: Vercel Build
         run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
 
-      - name: Deploy staging when push on develop branch
+      - name: Deploy development
+        if: ${{ github.ref != 'refs/heads/develop' && github.ref != 'refs/heads/master' }}
+        id: deploy
+        run: |
+          VERCEL_DEPLOYED_URL=$(vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }})
+          echo "url=$VERCEL_DEPLOYED_URL" >> "$GITHUB_OUTPUT"
+
+      - name: Deploy staging
         if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/develop'}}
+        id: deploy-staging
         run: |
-          VERCEL_DEPOLYED_URL="$(vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }})"
-          vercel alias set "$VERCEL_DEPOLYED_URL" ${{secrets.STAGING_WEB_URL_WITHOUT_PROTOCOL}} --token=${{ secrets.VERCEL_TOKEN }} --scope=gueit214s-projects
+          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"
 
-      - name: Deploy production when push on master branch
+      - name: Deploy production
         if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/master'}}
+        id: deploy-prod
         run: |
-          VERCEL_DEPOLYED_URL="$(vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }})"
-          vercel --prod --token=${{ secrets.VERCEL_TOKEN }}
+          VERCEL_DEPLOYED_URL=$(vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }})
+          vercel alias set "$VERCEL_DEPLOYED_URL" ${{secrets.PROD_WEB_URL_WITHOUT_PROTOCOL}} --token=${{ secrets.VERCEL_TOKEN }} --scope=gueit214s-projects
+          echo "url=$VERCEL_DEPLOYED_URL" >> "$GITHUB_OUTPUT"

packages/web/src/app/[lng]/(no-auth)/login/_components/LoginSection/index.tsx

@@ -1,9 +1,10 @@
 'use server';
 
+import { SUPABASE } from '@extension/shared/constants';
 import { Button } from '@src/components/ui';
 import type { LanguageType } from '@src/modules/i18n';
 import useTranslation from '@src/modules/i18n/util.server';
-import { signInWithOAuth } from '@src/modules/supabase/util.server';
+import { signInWithEmail, signInWithOAuth } from '@src/modules/supabase/util.server';
 import Image from 'next/image';
 
 interface LoginSectionProps extends LanguageType {}
@@ -19,21 +20,26 @@ export default async function LoginSection({ lng }: LoginSectionProps) {
       <form className="flex w-full flex-col gap-4 px-4">
         {/* 'use server' 함수를 사용하기 위해 bind 사용 */}
         <Button
+          data-testid="kakao-login-button"
           formAction={signInWithOAuth.bind(null, 'kakao')}
           className="h-12 bg-[rgb(247,228,76)] text-black hover:bg-[rgb(247,228,76)]">
           <Image src="/images/svgs/kakao.svg" width={16} height={16} alt="kakao" />
           {t('login.kakaoLogin')}
         </Button>
         {/* 'use server' 함수를 사용하기 위해 bind 사용 */}
-        <Button formAction={signInWithOAuth.bind(null, 'google')} className="h-12 bg-white text-black hover:bg-white">
+        <Button
+          data-testid="google-login-button"
+          formAction={signInWithOAuth.bind(null, 'google')}
+          className="h-12 bg-white text-black hover:bg-white">
           <Image src="/images/svgs/google.svg" width={16} height={16} alt="google" />
           {t('login.googleLogin')}
         </Button>
-        {/* <Button
+        <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>
       </form>
     </section>
   );

packages/web/src/modules/i18n/locales/en/translation.json

@@ -127,6 +127,7 @@
     "welcomeDescription": "Let's make memo-taking easier and more convenient together!",
     "kakaoLogin": "Continue with Kakao",
     "googleLogin": "Continue with Google",
+    "testLogin": "Continue with Test Account",
     "askGoInstallExtension": "Looks like you haven't installed our extension yet. You'll need it to use all the great memo features. Would you like to install it now?",
     "personalInformationInfo": "Don't worry! Your personal information is strictly protected and will never be used for marketing purposes."
   },
@@ -180,8 +181,8 @@
       "description": "Ready to start? Press '{{key}} + S' to open the side panel"
     },
     "save": {
-      "title": "Save memos",
-      "description": "Great! Now you can write memos. Don't worry, they save automatically"
+      "title": "Save Your Memos",
+      "description": "Great job!\nNow you can write memos in the side panel.\nDon't worry, memos are saved automatically"
     },
     "check": {
       "title": "Check memos",

packages/web/src/modules/i18n/locales/ko/translation.json

@@ -127,6 +127,7 @@
     "welcomeDescription": "웹 메모와 함께 더 쉽고 편리하게 메모를 관리해보세요.",
     "kakaoLogin": "카카오 계정으로 시작하기",
     "googleLogin": "구글 계정으로 시작하기",
+    "testLogin": "테스트 계정으로 로그인하기",
     "askGoInstallExtension": "메모 기능을 사용하시려면 확장 프로그램이 필요해요. 지금 설치하러 가시겠어요?",
     "personalInformationInfo": "고객님의 소중한 개인정보는 안전하게 보호되며, 마케팅 목적으로는 절대 사용되지 않아요."
   },

pages/content-ui/src/components/OpenSidePanelButton.tsx

@@ -3,6 +3,7 @@ import { ExtensionBridge } from '@extension/shared/modules/extension-bridge';
 export default function OpenSidePanelButton() {
   return (
     <button
+      id="open-side-panel"
       className="fixed bottom-4 right-4 z-50 flex h-12 w-12 items-center justify-center rounded-full bg-white shadow-lg hover:bg-gray-50"
       type="button"
       onClick={ExtensionBridge.requestOpenSidePanel}>

pages/content-ui/src/index.tsx

@@ -1,9 +1,7 @@
 import { ExtensionBridge } from '@extension/shared/modules/extension-bridge';
 import { isProduction } from '@extension/shared/utils';
-import { createRoot } from 'react-dom/client';
 
 import { OpenSidePanelButton } from './components';
-
 import { attachShadowTree } from './utils';
 
 const renderOpenSidePanelButton = async () => {

tests/e2e/LoginPage.spec.ts

@@ -10,21 +10,21 @@ test.describe('Login Page', () => {
       expect(page).toHaveURL(REGEXR.page.login);
     });
     test('카카오 로그인 버튼을 클릭하면 카카오 로그인 페이지로 이동한다.', async ({ page }) => {
-      await page.getByRole('button', { name: 'kakao 카카오 로그인' }).click();
+      await page.getByTestId('kakao-login-button').click();
 
       await page.waitForURL(REGEXR.page.kakaoLogin);
 
       expect(page).toHaveURL(REGEXR.page.kakaoLogin);
     });
     test('구글 로그인 버튼을 클릭하면 구글 로그인 페이지로 이동한다.', async ({ page }) => {
-      await page.getByRole('button', { name: 'google 구글 로그인' }).click();
+      await page.getByTestId('google-login-button').click();
 
       await page.waitForURL(REGEXR.page.googleLogin);
 
       expect(page).toHaveURL(REGEXR.page.googleLogin);
     });
     test('테스트 계정으로 로그인 시, memos페이지로 이동한다.', async ({ page }) => {
-      await page.getByRole('button', { name: '테스트 계정으로 로그인' }).click();
+      await page.getByTestId('test-login-button').click();
 
       await page.waitForURL(REGEXR.page.memos);
 

tests/e2e/MemosPage.spec.ts

@@ -1,18 +1,19 @@
 import { expect, test } from './fixtures';
 
-test.describe('Login Page', () => {
+test.describe('Memo Page', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('http://localhost:3000');
-    await page.getByRole('button', { name: '테스트 계정으로 로그인' }).click();
+    await page.getByTestId('test-login-button').click();
     await page.waitForURL(/.*memos/);
   });
 
   test.describe('가이드 기능', () => {
     test('메모 페이지 최초 접속시, 가이드를 볼 수 있다.', async ({ page }) => {
       expect(page.locator('#driver-popover-description')).toHaveText(
-        '메모를 한 번 해볼까요?\nOption + S를 눌러 사이드 패널을 열어보세요 !',
+        "Ready to start? Press 'Option + S' to open the side panel",
       );
     });
+
     test('사이드 패널을 열 시, 다음 가이드 페이지로 이동한다.', async ({ page, baseURL }) => {
       await page.goto('https://blog.toss.im/article/toss-team-culture');
       await page.locator('#open-side-panel').click();
@@ -21,9 +22,10 @@ test.describe('Login Page', () => {
       await page.waitForTimeout(1000);
 
       expect(page.locator('#driver-popover-description')).toContainText(
-        '이제 이 사이드 패널에서 메모를 기록하실 수 있답니다.',
+        "Great job!\nNow you can write memos in the side panel.\nDon't worry, memos are saved automatically",
       );
     });
+
     test('새로고침 버튼을 누르면, 가이드가 종료된다.', async ({ page }) => {
       await page.locator('.driver-popover-next-btn').click();
       await page.locator('.driver-popover-next-btn').click();
@@ -43,7 +45,7 @@ test.describe('Login Page', () => {
     test('사이드 패널에서 메모를 저장하면 메모를 확인할 수 있다.', async ({ page, sidePanelPage }) => {
       const text = String(new Date());
       await sidePanelPage.locator('#memo-textarea').fill(text);
-      await sidePanelPage.locator('#memo-textarea').press('ControlOrMeta+s');
+      await sidePanelPage.waitForTimeout(500);
 
       await page.reload();
       expect(page.getByText(text)).toBeVisible();

tests/e2e/SidePanel.spec.ts

@@ -3,7 +3,7 @@ import { expect, test } from './fixtures';
 test.describe('SidePanel', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('http://localhost:3000');
-    await page.getByRole('button', { name: '테스트 계정으로 로그인' }).click();
+    await page.getByTestId('test-login-button').click();
     await page.waitForURL(/.*memos/);
 
     await page.goto('https://blog.toss.im/article/toss-team-culture');