Continuous Testing in a DevOps World
summary
Shows how to auto-generate visual tests from Storybook using Sauce Labs’ Screener integration, running npm run storybook in a Jenkins multibranch pipeline and comparing feature-branch screenshots to a master baseline of 254 baseline states. Pipeline spins up 8 parallel VMs, posts results back to GitHub PRs via webhooks, and flags only two visual differences in the demo. Uses a hybrid DOM+pixel comparison to avoid noisy diffs, lets reviewers accept and update the baseline so merges proceed with fast visual validation.
AI-written summary · about
chapters (27)
- 0:00Introduction
- 0:34About Me
- 1:08Sauce Labs
- 1:35Frontend Code
- 2:48Manual Testing
- 3:09Selenium Tests
- 4:10Screener and Storybook
- 4:35Visual and Functional Regression
- 5:28Storybook
- 6:36Workflow
- 8:40Screener Configuration
- 10:05Opening a Pull Request
- 11:06Creating a Pull Request
- 11:44Demo Pull Request
- 15:50Other Visual Testing Tools
- 16:02Smart Hybrid
- 16:27Pure Image Diff
- 16:55Hybrid Comparison
- 18:13Natural Workflow
- 19:03Visually Perfect UI
- 19:45Questions
- 20:32Storybooks
- 21:05New Component
- 21:31UI States
- 22:05Component Testing
- 23:28Deleting a Build
- 29:37CI Integration
related talks
30mTesting presentation components visually
29mHow to set up a pipeline with visual unit tests for your app
26mVisually Testing Your Components
27mComponent-Driven Development & Visual Test Coverage
24mStorybook Vitest
39mRemove your Testing Bottleneck with CI/CD Pipelines
28mTestOps: A Journey to Story-Based Releases
28mUsing CI to Test the Frontend: the TeamCity Example