Componentizing end-to-end tests
summary
Claim: component libraries export component helpers that hide DOM selectors so end-to-end tests become easier, faster and more reliable. Concrete tools and patterns: adapter for Cypress testing library adapter, a scroll helper for virtual lists (demo selects across 8,000 items), a small pipe utility and publishing helpers to a local NPM repo with CI. Implementation composes across library layers, CI validates helpers, and two years of use show failures come from app bugs not selector drift.
AI-written summary · about
chapters (11)
- 0:00Intro
- 0:20icebreaker questions
- 0:53writing tests is hard
- 1:59building complex applications
- 3:02selector options
- 4:05collocated selectors
- 7:11complex app interactions
- 7:59React Testing Library
- 9:36ComponentHelper Functions
- 11:14Portal Content
- 13:46Demo
related talks
30mIntroducing Component Testing with Cypress
24mStrategy & Success with Adopting Cypress Component Testing
28mTesting with Component Harnesses for the Win
26mEffective DOM selector patterns. Interact like a user
24mWriting Good Tests for Vue Applications
15mCypress Component Testing - Lightning talk
40mCypress Component Testing - The Disappearance of Mr. Button
38mFrontend Tests: what nobody said to you