Shifting-left and Right to Test a web app with CI
summary
Creates a Create React app in under five minutes, adds component tests with React Testing Library (data-test-id to avoid brittle text checks), adds visual end-to-end snapshots with WebdriverIO + Screener running on two browser/viewports, and wires everything into GitHub Actions using npm ci, build, start, wait, and a visual test step. CI runs on push/pull, visual diffs flag two changed elements after swapping the logo, baselines are accepted and the pipeline passes.
AI-written summary · about
chapters (7)
- 0:00Intro
- 0:35Creating a React App
- 2:27Running First Test
- 4:20Creating a CI Pipeline
- 12:18Add a Link Test
- 17:25Add Visual Testing
- 25:18Making an Image Change
related talks
26mVisually Testing Your Components
29mHow to set up a pipeline with visual unit tests for your app
32mCrafting a Bulletproof testing pipeline for React Apps
51mAutomation Testing for React
01h 00mTest Driving React Applications
34mI See What is Going on: Visual Testing for Your Components
31mEnd to end testing a world of web, mobile & desktop apps
34mEnd to end testing a world of web, mobile & desktop apps