Model-Based E2E Testing With State Machines
summary
A working model-based test suite for an autocomplete UI that replaces many repetitive Playwright specs with a state machine that enumerates paths and runs them in Chromium/WebKit/Firefox. It uses xstate test to declare UI states, event cases to inject typed query payloads, and assign to context for saving the current query; guards check expected-results maps so branches only appear when data allows. Running the model generates dozens to hundreds of paths automatically and the demo tests pass locally and on CI.
AI-written summary · about
chapters (11)
- 0:00Introduction to talk
- 4:32Problems with manual tests
- 7:03What is model-based testing
- 9:52Setting up XState test model
- 14:11Running first generated test
- 15:58Expanding state transitions
- 21:22Implementing actions and guards
- 25:51Debugging generated paths
- 27:18Benefits of model-based testing
- 29:30Demoing Playwright headed mode
- 30:11Conclusion and call to action
related talks
27mWrite Fewer Tests! From Automation to Autogeneration
45mWrite fewer tests! Model-based testing in React
38mState of the Art Web User Interfaces with State Machines
16me2e testing with Playwright
35mState of end-to-end testing for modern web applications
25mMastering UIs with Finite State Machines
27mFullstack testing
29mReactive State Machines and Statecharts