Skip to content

fix(percy): add global waitForSelector to validate that storybook has loaded #7483

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Conversation

matthewgallo
Copy link
Member

@matthewgallo matthewgallo commented May 9, 2025

Closes #7513

I'm hoping increasing the network timeout for percy will resolve some of the flaky snapshots that get flagged as visual changes.

Next attempt is to use the waitForSelector in the percy config to look for [data-carbon-theme] since that attribute is only added after storybook has finished loading.

Percy has flagged 8 visual differences which I think may be accurate. This PR contained changes to the breadcrumb row height which would explain the page header snapshots. And the other snapshot that was flagged was NotificationPanel, but it was just the 'n months ago' text. I'll approve the Percy snapshot changes and we can monitor new PRs for any Percy flakiness.

While storybook is loading (no [data-carbon-theme] attribute)
Screenshot 2025-05-15 at 3 18 36 PM

After storybook has loaded
Screenshot 2025-05-15 at 3 19 09 PM

What did you change?

  • .percy.yml

How did you test and verify your work?

Will test via percy PR check run in this PR

@matthewgallo matthewgallo requested a review from a team as a code owner May 9, 2025 14:16
@matthewgallo matthewgallo requested review from AlexanderMelox and jlongshore and removed request for a team May 9, 2025 14:16
Copy link

netlify bot commented May 9, 2025

Deploy Preview for ibm-products-web-components ready!

Name Link
🔨 Latest commit 4a3fc0e
🔍 Latest deploy log https://app.netlify.com/projects/ibm-products-web-components/deploys/68263f9cd07ed1000836e5fb
😎 Deploy Preview https://deploy-preview-7483--ibm-products-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link

netlify bot commented May 9, 2025

Deploy Preview for carbon-for-ibm-products ready!

Name Link
🔨 Latest commit 4a3fc0e
🔍 Latest deploy log https://app.netlify.com/projects/carbon-for-ibm-products/deploys/68263f9cb3d7ee00084923ff
😎 Deploy Preview https://deploy-preview-7483--carbon-for-ibm-products.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link

codecov bot commented May 9, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 83.93%. Comparing base (05c037e) to head (4a3fc0e).
Report is 7 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #7483      +/-   ##
==========================================
- Coverage   83.94%   83.93%   -0.02%     
==========================================
  Files         425      425              
  Lines       17216    17227      +11     
  Branches     4545     4553       +8     
==========================================
+ Hits        14452    14459       +7     
- Misses       2764     2768       +4     
Components Coverage Δ
ibm-products 82.00% <ø> (-0.02%) ⬇️
ibm-products-web-components 90.02% <ø> (ø)
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

davidmenendez
davidmenendez previously approved these changes May 9, 2025
elycheea
elycheea previously approved these changes May 13, 2025
@matthewgallo matthewgallo dismissed stale reviews from elycheea and davidmenendez via 1fe1ba2 May 15, 2025 19:15
@matthewgallo matthewgallo changed the title fix(percy): increase network timeout value fix(percy): add global waitForSelector to validate that storybook has loaded May 15, 2025
@elycheea
Copy link
Contributor

@matthewgallo I’ll let you do the honors but looks like Percy is passing this time. 🙏

@matthewgallo matthewgallo added this pull request to the merge queue May 15, 2025
Merged via the queue into carbon-design-system:main with commit ce6686c May 15, 2025
37 checks passed
@matthewgallo matthewgallo deleted the increase-percy-network-timeout branch May 15, 2025 23:35
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.

Investigate flaky Percy tests
3 participants