I See What is Going on: Visual Testing for Your Components
summary
Shows a concrete workflow: mount React components with Cypress component testing and cypress-react-unit-test, add cypress-image-snapshot to save baseline screenshots, and control nondeterminism by freezing and fast-forwarding the clock and stubbing the module that generates the Sudoku board so snapshots are repeatable. Notes headless vs interactive pixel-density differences and cross-OS font drift, so CI runs inside a Docker-based baseline image to get stable pixel-perfect comparisons.
AI-written summary · about
chapters (14)
- 0:00Start
- 1:05React Application
- 2:03Source Code
- 4:27Component Tests
- 10:49Match Image Snapshot
- 19:58Summary
- 23:21Microsoft Edge Browser Is Built on Chromium
- 24:16What Can We Do To Avoid Flakiness and How Can We Detect that Automatically
- 25:39Complementary Test Retries
- 26:34What Roadmap Do You Have for the Next Releases
- 27:46What Is Your Favorite Comfort Food
- 29:20Will There Be Support for React Native in the Future
- 30:00How Do You See the Difference between Cyprus and Puppeteer plus Jest
- 31:34Why You Use Jquery
related talks
19mWhy you should Jest use Cypress for React component testing
21mLet's get visual - Visual testing in your Vue application
42mFunctional and Visual Testing for Web Applications
23mI see your point, but… (Part 2)
30mIntroducing Component Testing with Cypress
15mCypress Component Testing - Lightning talk
40mCypress Component Testing - The Disappearance of Mr. Button
23mGaining Confidence with Cypress Tests