Don’t (re)write code. Let AST do it
summary
Conference-scale React codebase with ~100 front-end developers and ~3,000 requests/sec uses AST transformations to auto-insert unique data- attributes on root JSX elements, generating stable CSS selectors and page-object helpers so QA avoids manual IDs. Implementation uses Babel parsing, traversal and codegen to find root JSX, add one attribute per component instance, and emit selector resolver functions; an open-source helper Reselector ties component identity to selectors. Claims: automation works across third‑party libs, speeds refactors, reduces brittle XPath/class tests.
AI-written summary · about
chapters (14)
- 0:00Introduction
- 1:59Legacy migration at Yandex Market
- 4:52React components and UI testing problems
- 8:47Data attributes best solution
- 11:16What is an AST
- 13:48Why AST is useful
- 16:22AST usage examples
- 19:58AST examples and Babel API
- 22:54Traversing AST with Babel Traverse
- 26:31Modifying AST nodes
- 28:20Generating code from AST
- 30:10Adding data attributes to React
- 31:58Simplifying UI tests with data attributes
- 33:02Conclusion and future recommendations
related talks
28mUnlocking the structure of your React applications with the AST
05mReact to Code
07mSpeeding up React SSR
12mCodecrumbs in React
28mWhat the v...DOM?
30mReact: Rethinking best practices
50mTips, tricks and tools for building accessible React web apps
49mSupporting accessibility in React: the difficulties and niceties