Skip to content

ci: vrt sharding test - #266

Merged
noahchoii merged 29 commits into
mainfrom
vrt
Oct 17, 2025
Merged

ci: vrt sharding test#266
noahchoii merged 29 commits into
mainfrom
vrt

Conversation

@noahchoii

@noahchoii noahchoii commented Sep 30, 2025

Copy link
Copy Markdown
Contributor

Description of Changes

  • We implemented browser-specific visual regression testing using GitHub Actions' strategy.matrix feature.
  • To resolve the issue where snapshots appeared differently due to font flickering, we removed fonts from Storybook.

Checklist

Before submitting the PR, please make sure you have checked all of the following items.

  • The PR title follows the Conventional Commits convention. (e.g., feat, fix, docs, style, refactor, test, chore)
  • I have added tests for my changes.
  • I have updated the Storybook or relevant documentation.
  • I have added a changeset for this change. (e.g., for any changes that affect users, such as component prop changes or new features).
  • I have performed a self-code review.
  • I have followed the project's coding conventions and component patterns.

@changeset-bot

changeset-bot Bot commented Sep 30, 2025

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 26b13a5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel

vercel Bot commented Sep 30, 2025

Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
vapor-ui Ready Ready Preview Comment Oct 1, 2025 5:07am

@gemini-code-assist

Copy link
Copy Markdown
Contributor

Summary of Changes

Hello @noahchoii, I'm Gemini Code Assist1! 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 focuses on refining the continuous integration environment and Playwright test setup. The changes include optimizing a GitHub Actions composite action by removing a redundant checkout step and simplifying browser configurations within Playwright. These adjustments are likely part of an ongoing effort to enhance the efficiency and maintainability of the CI pipeline, potentially in preparation for or related to visual regression testing (VRT) sharding.

Highlights

  • CI Workflow Optimization: The actions/checkout@v4 step has been removed from the .github/composite/install/action.yml composite action. This change streamlines the CI workflow by assuming the repository is already checked out by the calling workflow, preventing redundant operations.
  • Playwright Configuration Simplification: The Playwright configuration in packages/core/playwright.config.ts has been simplified for chromium and Microsoft Edge projects. Explicit channel specifications (channel: 'chrome' and channel: 'msedge') were removed, allowing Playwright to use the default installed browsers for these configurations.
Ignored Files
  • Ignored by pattern: .github/workflows/** (1)
    • .github/workflows/ci.yml
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 by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

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 pull request 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 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. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

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.

Footnotes

  1. 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.

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Code Review

이 PR은 CI 워크플로우와 시각적 회귀 테스트(VRT) 설정을 수정합니다. .github/composite/install/action.yml에서 중복될 수 있는 checkout 단계를 제거한 것은 좋아 보입니다. 하지만 packages/core/playwright.config.ts에서 Playwright 테스트 브라우저의 channel 설정을 제거한 변경은 잠재적인 이슈가 될 수 있습니다. 이로 인해 CI와 로컬 환경 간에 사용되는 브라우저가 달라져 VRT 결과의 일관성이 깨질 수 있습니다. 해당 부분에 대해 상세한 리뷰 의견을 남겼으니 확인 후 반영을 고려해 보시기 바랍니다.

Comment thread packages/core/playwright.config.ts Outdated
Comment on lines +18 to +19
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
{ name: 'Microsoft Edge', use: { ...devices['Desktop Edge'] } },

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

high

channel 속성을 제거하면 Playwright는 시스템에 설치된 Chrome이나 Edge 브라우저 대신 번들로 제공되는 Chromium 빌드를 사용하게 됩니다. 이로 인해 CI 환경과 로컬 개발 환경 간에 테스트 브라우저가 달라져 렌더링 차이가 발생할 수 있으며, 이는 시각적 회귀 테스트(VRT)의 신뢰성에 영향을 줄 수 있습니다.

만약 CI 환경에서 특정 브라우저(Chrome, Edge) 설치를 피하고 일관된 테스트 환경을 구축하려는 의도라면 이 변경이 타당할 수 있습니다. 하지만, 실제 사용자가 사용하는 브라우저와 최대한 유사한 환경에서 테스트하는 것이 목적이라면 channel 속성을 유지하는 것을 고려해 보세요.

이 변경으로 인해 테스트가 실패하거나 예기치 않은 시각적 차이가 발생할 수 있으므로, 변경의 영향을 신중히 검토해 보시길 권장합니다.

        {
            name: 'chromium',
            use: { ...devices['Desktop Chrome'], channel: 'chrome' },
        },
        {
            name: 'Microsoft Edge',
            use: { ...devices['Desktop Edge'], channel: 'msedge' },
        },

@vapor-ui

vapor-ui commented Sep 30, 2025

Copy link
Copy Markdown
Collaborator

All tests passed!

Tests Passed Failed Duration Report
120 120 0 2m 57s Open report ↗︎

Click here if you need to update snapshots.

@noahchoii noahchoii self-assigned this Oct 1, 2025
@noahchoii noahchoii added type: enhancement Issues for feature enhancements scope: all Issues related to the all scope of component. labels Oct 1, 2025
@noahchoii
noahchoii marked this pull request as ready for review October 1, 2025 03:02

@ZeroChoi2781 ZeroChoi2781 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

[Nit]

In the long term, it's ideal to include fonts in Storybook as well, just like in the actual rendering environment. This prevents situations where a component's layout subtly changes or breaks depending on the font style.

However, preventing test failures right now is more important. We can revisit this issue later once things stabilize and find a solution. Great work : )

@noahchoii
noahchoii merged commit 8c36a71 into main Oct 17, 2025
14 checks passed
@noahchoii
noahchoii deleted the vrt branch October 17, 2025 01:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope: all Issues related to the all scope of component. type: enhancement Issues for feature enhancements

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants