lmorchard - Pebbling Club 🐧🪨

How to fix Storybook screenshot testing | Tiger Oakes

tigeroakes.com
2024-12-04T22:02:41.175Z
webdev storybook css html react testing

Notes

As an alternative to Chromatic, I’ve been using Storybook’s Test Runner to power screenshot tests for Microsoft Loop. We configure the test runner to run in CI and take a screenshot of every story. However, the initial implementation based on the official Storybook docs was very flaky due to inconsistent screenshots of the same story. Here are some tips to reduce flakiness in your Storybook screenshot tests.

Unfurl

{ "expires": 1733436149462, "status": 200, "bodyLength": 42752, "author": "Tiger Oakes", "date": "2024-12-04T00:00:00.000Z", "description": "Reduce flakiness in Playwright screenshots", "image": "https://tigeroakes.com/twitter-default.png", "logo": "https://tigeroakes.com/favicon_x512.png", "publisher": "Tiger Oakes", "title": "How to fix Storybook screenshot testing", "url": "https://tigeroakes.com/posts/storybook-test-runner-screenshots/", "lang": "en", "duration": 236, "cached": true, "cachedAt": 1733349749698 }
Storybook Test sneak peek

storybook.js.org
2024-11-07T19:30:01.372Z
storybook webdev components testing

Notes

At Storybook, we believe there’s still hope. For months we’ve been building Storybook Test, a tool for fast, flake-free UI tests. And we’re finally ready to share it with you.

Feed

Unfurl

{ "expires": 1731094195366, "status": 200, "bodyLength": 243864, "author": "Michael Shilman", "date": "2024-10-31T17:51:25.000Z", "description": "Multi-modal testing with instant feedback in your browser", "image": "https://storybookblog.ghost.io/content/images/2024/10/storybook-test-sneak-peek.jpg", "logo": "https://storybook.js.org/storybook-favicon.png", "publisher": "Storybook Blog", "title": "Storybook Test sneak peek", "url": "https://storybook.js.org/blog/storybook-test-sneak-peek/", "feed": "https://storybook.js.org/blog/rss", "iframe": null, "lang": "en", "video": null, "audio": null, "duration": 865 }
Building a Storybook-like demo browser with web components — a much simpler way to get most of the benefits

jan.miksovsky.com
2024-10-07T20:23:36.478Z
webdev storybook webcomponents

Notes

I recently tried Storybook, a popular tool for browsing the demos and documentation for a UI component library. I think Storybook offers a good user experience, but its developer experience entails complexity out of proportion to its benefits. I tried creating a simpler web component library browser using web components, and am happy with the result.

Unfurl

{ "expires": 1728419014513, "status": 200, "bodyLength": 21625, "author": null, "date": "2020-11-02T12:00:00.000Z", "description": "I recently tried Storybook, a popular tool for browsing the demos and documentation for a UI component library.", "image": "https://jan.miksovsky.com/previews/2020/11-02-storybook.png", "logo": null, "publisher": null, "title": "Building a Storybook-like demo browser with web components — a much simpler way to get most of the benefits", "url": "https://jan.miksovsky.com/posts/2020/11-02-storybook.html", "feed": null, "iframe": null, "lang": "en", "video": null, "audio": null, "duration": 1009 }

0 - 50 of 3 items

10 25 50 100 250