Test#151 Playwright e2e 테스트 환경 구축 #153

toothlessdev · 2025-07-15T09:20:46Z

✅ Linked Issue

resolve [✨ 기능 요청] Playwright e2e 테스트 환경 구축 #151

🔍 What I did

Playwright e2e 테스트 환경 구축
vitest coverage 스크립트 수정

vercel · 2025-07-15T09:20:52Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
mosu-client	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 15, 2025 9:22am

gemini-code-assist

Summary of Changes

Hello @toothlessdev, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the project's testing capabilities by establishing a dedicated End-to-End (E2E) testing environment using Playwright. It separates E2E test concerns into a new workspace, provides initial test coverage for a user flow, and refines the existing unit test coverage reporting for better developer experience.

Highlights

E2E Test Environment Setup: A new mosu-e2e workspace has been established to house Playwright End-to-End tests. This includes a dedicated package.json, .gitignore, and playwright.config.ts for the E2E suite, separating it from the main application.
Playwright Configuration & Execution: The Playwright configuration has been moved to the new mosu-e2e workspace, with baseURL set to http://localhost:3000 and a webServer command configured to build and start the mosu-app before E2E tests run. A root e2e script has been added for easy execution.
Sample E2E Test: A new E2E test (signup.spec.ts) has been added to the mosu-e2e/tests directory, demonstrating a basic user flow by navigating to the signup page and asserting the correct URL.
Vitest Coverage Enhancement: The mosu-app's package.json now includes an updated test:coverage script that automatically opens the generated HTML coverage report. Additionally, vitest.config.ts has been configured to generate coverage reports in multiple formats (text, JSON, HTML).
Dependency Management: Playwright-related dependencies have been updated and moved to the new mosu-e2e workspace's package.json, and the root yarn.lock has been updated accordingly, including the addition of @types/node.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

github-actions · 2025-07-15T09:21:58Z

	Warnings
⚠️	package.json이 변경되었습니다. 새로운 의존성이 추가되었다면 필요성을 설명해주세요.

	Messages
📖	✅ PR 제목에 이슈 번호가 포함되어 있습니다.
📖	✅ PR에 Reviewers가 지정되어 있습니다.
📖	✅ PR에 라벨이 지정되어 있습니다.
📖	✅ PR에 Assignees가 지정되어 있습니다.
📖	✅ 브랜치 이름 'test#151'이 컨벤션을 따릅니다.
📖	✅ TypeScript 컴파일이 성공적으로 완료되었습니다.
📖	✅ ESLint 검사 결과 문제가 없습니다.

📦 Package 변경사항

mosu-app/package.json
package.json
mosu-e2e/package.json

📝 추가 및 변경된 파일

총 11개 파일 변경

├── 📂 .github/
│   └── 📂 workflows/
│       ├── ⚙️ mosu-app-test.yml
│       └── ⚙️ mosu-app-e2e.yml
├── 📂 mosu-app/
│   ├── 📋 package.json
│   └── 📘 vitest.config.ts
├── 📂 mosu-e2e/
│   ├── 📘 playwright.config.ts
│   ├── 📄 .gitignore
│   ├── 📋 package.json
│   └── 📂 tests/
│       └── 📘 signup.spec.ts
├── 📋 package.json
├── 📄 yarn.lock
└── 📄 .prettierignore

Generated by 🚫 dangerJS against 4e8a850

kimgho

e2e 테스트도 중요하죠!
앞으로 테스트 코드 계속 추가해봅시다 👍

gemini-code-assist

Code Review

This pull request sets up a new Playwright E2E testing environment in a dedicated mosu-e2e workspace, which is a great structural improvement. The changes include configuration for Playwright, a new test for the signup flow, and updates to the Vitest coverage script.

I've identified a few areas for improvement:

Maintainability: The new E2E test uses hardcoded URLs and a brittle XPath selector. These should be updated to use Playwright's baseURL and more robust locators to make the tests more resilient.
Cross-platform compatibility: The test:coverage script uses a macOS-specific command.
Developer Experience: The webServer command in the Playwright config could be optimized to speed up local development.
Correctness: There's a minor typo in one of the new npm scripts.

Overall, this is a solid foundation for E2E testing. Addressing these points will make the test suite more robust and easier for the whole team to work with.

gemini-code-assist · 2025-07-15T09:23:24Z

mosu-e2e/package.json

+  "scripts": {
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
+    "report" :"playwright show-report"


There's a typo in the report script key. The space before the colon will cause an error when trying to run this script with yarn workspace @mosu/mosu-e2e report.

"report": "playwright show-report"

gemini-code-assist · 2025-07-15T09:23:24Z

mosu-e2e/tests/signup.spec.ts

+import { test, expect } from "@playwright/test";
+
+test("회원가입 페이지로 이동합니다", async ({ page }) => {
+    await page.goto("http://localhost:3000/");


The test contains a hardcoded URL. It's a best practice to use the baseURL configured in playwright.config.ts to make tests more maintainable and portable across different environments. You can use a relative path for page.goto().

Suggested change

await page.goto("http://localhost:3000/");

await page.goto("/");

gemini-code-assist · 2025-07-15T09:23:24Z

mosu-e2e/tests/signup.spec.ts

+
+test("회원가입 페이지로 이동합니다", async ({ page }) => {
+    await page.goto("http://localhost:3000/");
+    await page.locator(`xpath=//*[@id="__next"]/header/nav/ul/li[8]/a`).click();


Using XPath locators like this is highly discouraged as they are brittle and can easily break with small changes to the DOM structure. It's better to use user-facing locators that are more resilient to changes.

Playwright recommends using locators like page.getByRole(), page.getByText(), or page.getByTestId(). Please consider adding a data-testid attribute to the element or using a more robust locator.

For example, if the link has text "로그인", you could use:

await page.getByRole('link', { name: '로그인' }).click();

This makes the test much more readable and less likely to break.

gemini-code-assist · 2025-07-15T09:23:24Z

mosu-e2e/tests/signup.spec.ts

+    await page.locator(`xpath=//*[@id="__next"]/header/nav/ul/li[8]/a`).click();
+    await page.getByText("회원가입").click();
+
+    await expect(page).toHaveURL("http://localhost:3000/auth/signup");


The URL in the assertion is hardcoded. To make the test more robust and reusable across different environments, you should use a relative path. This will be combined with the baseURL from your Playwright configuration.

Suggested change

await expect(page).toHaveURL("http://localhost:3000/auth/signup");

await expect(page).toHaveURL("/auth/signup");

gemini-code-assist · 2025-07-15T09:23:24Z

mosu-app/package.json

        "test": "vitest",
        "test:watch": "vitest --watch",
-        "test:coverage": "vitest run --coverage"
+        "test:coverage": "vitest run --coverage && open coverage/index.html"


The open command is specific to macOS. This will cause the test:coverage script to fail for developers using other operating systems like Linux or Windows. To ensure cross-platform compatibility, I recommend using a package like open-cli.

You would first add it to your dev dependencies:
yarn add -D open-cli

Then you can update the script.

"test:coverage": "vitest run --coverage && open-cli coverage/index.html"

gemini-code-assist · 2025-07-15T09:23:24Z

mosu-e2e/playwright.config.ts

-    //   reuseExistingServer: !process.env.CI,
-    // },
+    webServer: {
+        command: "cd .. && yarn app build && yarn app start",


The webServer command includes yarn app build, which will run a production build every time the test server needs to be started. This can be time-consuming during local development.

Consider removing the build step from this command. Developers can run the build once manually when needed. The reuseExistingServer: !process.env.CI option will then work more effectively, as it will just start the server if it's not already running, without a full rebuild.

This will significantly speed up the local E2E testing workflow.

Suggested change

command: "cd .. && yarn app build && yarn app start",

command: "cd .. && yarn app start",

github-actions · 2025-07-15T09:25:36Z

📚 Storybook이 Chromatic에 배포되었습니다!

🔗 Storybook Preview: https://www.chromatic.com/build?appId=68627ee20725077171386a15&number=84
🚀 Chromatic Build: https://www.chromatic.com/build?appId=68627ee20725077171386a15&number=84

toothlessdev added 5 commits July 15, 2025 17:30

chore: playwright 패키지 제거

4df2b5c

chore: playwright 테스트 환경 설정

2134c12

feat: e2e 테스트 워크플로우 추가

163d96f

feat: 회원가입 페이지 테스트 추가

3f2e5ef

feat: 테스트 커버리지 설정 및 스크립트 수정

4e8a850

toothlessdev added this to the 1차 릴리즈 전 milestone Jul 15, 2025

toothlessdev requested review from eunwoo-levi and kimgho July 15, 2025 09:20

toothlessdev self-assigned this Jul 15, 2025

toothlessdev added this to mosu-client Jul 15, 2025

toothlessdev added the 테스트 label Jul 15, 2025

toothlessdev moved this to 진행중 in mosu-client Jul 15, 2025

gemini-code-assist bot reviewed Jul 15, 2025

View reviewed changes

toothlessdev enabled auto-merge July 15, 2025 09:21

vercel bot deployed to Preview July 15, 2025 09:22 View deployment

kimgho approved these changes Jul 15, 2025

View reviewed changes

toothlessdev merged commit 392b31b into main Jul 15, 2025
7 checks passed

github-project-automation bot moved this from 진행중 to 완료 in mosu-client Jul 15, 2025

gemini-code-assist bot reviewed Jul 15, 2025

View reviewed changes

toothlessdev deleted the test#151 branch August 3, 2025 21:43

	await page.goto("http://localhost:3000/");
	await page.goto("/");

	await expect(page).toHaveURL("http://localhost:3000/auth/signup");
	await expect(page).toHaveURL("/auth/signup");

	command: "cd .. && yarn app build && yarn app start",
	command: "cd .. && yarn app start",

Test#151 Playwright e2e 테스트 환경 구축 #153

Test#151 Playwright e2e 테스트 환경 구축 #153

Uh oh!

Conversation

toothlessdev commented Jul 15, 2025

✅ Linked Issue

🔍 What I did

Uh oh!

vercel bot commented Jul 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Summary of Changes

Highlights

Footnotes

Uh oh!

github-actions bot commented Jul 15, 2025

📦 Package 변경사항

📝 추가 및 변경된 파일

Uh oh!

kimgho left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jul 15, 2025

📚 Storybook이 Chromatic에 배포되었습니다!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel bot commented Jul 15, 2025 •

edited

Loading