REACTive Automation: How to Avoid Shooting Yourself in the Foot
summary
Covers practical techniques for more reliable React UI test automation: add data-test attributes to encapsulated components to make locators stable; inject React TestUtils into window so synthesized events update component state; handle data grids by mapping column types to parsers and using a small DSL for sort/filter assertions; and test charts by preferring SVG and scanning SVG candle widths to read tooltips and assert colors. These fixes produce reproducible tests and reduce fragile DOM hacks.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 3:25React and Virtual DOM
- 7:46Automation challenges
- 11:46Collaborating with devs
- 15:58Testing datepicker
- 17:21Automating grids
- 25:49Grid bugs
- 31:13Canvas vs SVG charts
- 34:06Chart automation example
- 41:44Chart testing tips
- 43:08Summary
- 44:14Q&A
related talks
24mUsing React Testing Library to Write Stronger Tests
19mImportance of testing & the right way to test React components
14mTestable React Components
32mEstablishing testing patterns with software design principles
51mAutomation Testing for React
49mSupporting accessibility in React: the difficulties and niceties
30mTesting React Applications
18mTesting React in a Right Way