Skip to content

Conversation

@qkrwoghd04
Copy link
Member

@qkrwoghd04 qkrwoghd04 commented Jul 29, 2025

playwright CI 스크립트 작성 및 테스트

이 CI는 main/master 브랜치에 대한 코드 변경 시 Playwright 테스트를 자동으로 실행하고, 결과 리포트를 아티팩트로 업로드하는 파이프라인입니다. (보관 기간은 30일)

Summary by CodeRabbit

  • Chores
    • Introduced automated Playwright testing for pull requests to the main branch, including test execution and uploading of test reports as artifacts.
    • Split test commands into separate unit and end-to-end test scripts for clearer test management.
    • Updated ignore rules to exclude Playwright test results, reports, and cache from version control.
  • New Features
    • Added comprehensive end-to-end tests for the TodoMVC demo app and example web pages using Playwright.
  • Refactor
    • Added a Playwright configuration to support parallel testing across multiple browsers with retry and reporting options.

@coderabbitai
Copy link

coderabbitai bot commented Jul 29, 2025

Caution

Review failed

The pull request is closed.

Walkthrough

A new GitHub Actions workflow named "Playwright Tests" has been added to run Playwright end-to-end tests on pull requests targeting the main branch. The package.json test scripts were split into separate unit and end-to-end test commands. Playwright test configuration and ignore rules were added. New Playwright-based end-to-end test suites were introduced for example and demo TodoMVC applications.

Changes

Cohort / File(s) Change Summary
Playwright CI Workflow
.github/workflows/playwright.yml
Added a GitHub Actions workflow to run Playwright tests on PRs, including setup, dependency installation, test execution, and artifact upload.
Test Script and Dependency Updates
package.json
Replaced unified "test": "vitest" script with two separate scripts: "test:unit": "vitest" and "test:e2e": "playwright test". Added Playwright and Node types to devDependencies.
Playwright Configuration
playwright.config.js
Added Playwright test configuration defining test directory, parallelism, retries, reporters, and browser projects.
Git Ignore Updates
.gitignore
Added ignore rules for Playwright test results, reports, and cache directories.
Playwright Test Suites
tests/example.spec.js, tests-examples/demo-todo-app.spec.js
Added new Playwright test files with end-to-end tests for Playwright website and TodoMVC demo app, including helper functions and detailed UI interaction tests.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐇
In the warren of code, tests now take flight,
Playwright hops in, running checks day and night.
Unit tests and e2e split with care,
Ensuring each bug gets caught in the snare.
Reports and logs tucked out of sight,
This bunny’s testing with all its might!
CI flows onward, swift and bright.

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 82f27ab and 3041995.

⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (5)
  • .gitignore (1 hunks)
  • package.json (2 hunks)
  • playwright.config.js (1 hunks)
  • tests-examples/demo-todo-app.spec.js (1 hunks)
  • tests/example.spec.js (1 hunks)
✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch develop

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (2)
.github/workflows/playwright.yml (2)

3-5: Consider adding a push trigger to catch direct commits to main.

CI will be skipped if someone bypasses PRs and pushes straight to main.
A minimal addition keeps your current behaviour while covering that gap.

   pull_request:
     branches: [main]
+
+  push:
+    branches: [main]

15-18: Turn on the built-in npm cache for substantially faster runs.

actions/setup-node@v4 supports transparent caching (cache: 'npm').
Enabling it avoids reinstalling every dependency on each run.

-      - uses: actions/setup-node@v4
-        with:
-          node-version: 'lts/*'
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+          cache: 'npm'
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 456bf64 and 5bca97f.

📒 Files selected for processing (1)
  • .github/workflows/playwright.yml (1 hunks)
🔇 Additional comments (1)
.github/workflows/playwright.yml (1)

25-27: Guarantee that an HTML report is produced before you attempt to upload it.

playwright-report/ exists only when an HTML reporter is enabled.
Unless your playwright.config.* already sets reporter: 'html', the folder will be missing and the later upload step will fail.

-      - name: Run Playwright tests
-        run: npx playwright test
+      - name: Run Playwright tests
+        run: npx playwright test --reporter=line,html

Comment on lines +28 to +33
- uses: actions/upload-artifact@v4
if: always()
with:
name: playwright-report
path: playwright-report
retention-days: 30
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Guard the artifact upload to avoid a hard failure when the report folder is absent.

upload-artifact errors if the given path does not exist.
Protect the step with a hash-based check so the workflow still completes even when no report is generated.

-      - uses: actions/upload-artifact@v4
-        if: always()
+      - uses: actions/upload-artifact@v4
+        if: always() && hashFiles('playwright-report/**') != ''
         with:
           name: playwright-report
           path: playwright-report
           retention-days: 30
📝 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.

Suggested change
- uses: actions/upload-artifact@v4
if: always()
with:
name: playwright-report
path: playwright-report
retention-days: 30
- uses: actions/upload-artifact@v4
if: always() && hashFiles('playwright-report/**') != ''
with:
name: playwright-report
path: playwright-report
retention-days: 30
🤖 Prompt for AI Agents
In .github/workflows/playwright.yml around lines 28 to 33, the upload-artifact
step fails if the playwright-report folder does not exist. To fix this, add a
conditional check before the upload step that verifies the existence of the
playwright-report directory using a hash or file existence check. This will
prevent the step from running and failing when the report folder is absent,
allowing the workflow to complete successfully even if no report is generated.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
package.json (1)

6-13: Restore a generic test script for ecosystem tooling

Many editors, hooks and marketplace actions still invoke npm test by default.
Consider making it an alias to both new commands to avoid breakage:

   "scripts": {
     "dev": "vite",
@@
-    "test:unit": "vitest",
-    "test:e2e": "playwright test"
+    "test": "npm run test:unit && npm run test:e2e",
+    "test:unit": "vitest",
+    "test:e2e": "playwright test"
   },
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5bca97f and 82f27ab.

📒 Files selected for processing (1)
  • package.json (1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: test

@qkrwoghd04 qkrwoghd04 closed this Jul 29, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants