> Markdown version of [/videos/834-fighting-test-flakiness-with-time-machines?t=128](https://www.wearedevelopers.com/videos/834-fighting-test-flakiness-with-time-machines?t=128). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Fighting test flakiness with time machines

Stop patching flaky tests with arbitrary wait commands. Start using time-travel debuggers to step backward through execution states. Eliminate end-to-end instability for good.

- **Speakers:** Filip Hric
- **Event:** WeAreDevelopers LIVE
- **Published:** December 1, 2023
- **Duration:** 50:28
- **URL:** https://www.wearedevelopers.com/videos/834-fighting-test-flakiness-with-time-machines

## Summary

Modern web development is heavily plagued by flaky end-to-end tests driven by unpredictable application state and rendering delays. With over 60% of testers spending more time debugging than writing test scripts, resolving timing issues efficiently is an industry-wide challenge. When confronted with test failures, teams routinely default to patching the automated checks—often relying on arbitrary wait commands or test-level network intercepts—instead of investigating the application's underlying logic.

To effectively capture the root cause of automation instability, adopting "time machine" debuggers transforms how teams investigate failing runs. Built-in observability features like the Cypress timeline and Playwright trace viewer empower engineers to step backwards through execution states to verify exactly what the browser rendered at the moment of failure. Leveraging these visual timelines shifts the testing focus toward writing robust guard assertions that explicitly verify component availability before performing DOM interactions.

For deeper application observability, integrating a full-runtime recorder like Replay.io directly into the CI pipeline bridges the gap between test execution and application state. By capturing network calls, virtual DOM updates, and React component behaviors, retroactive debugging allows developers to inject post-run print statements and step backwards through code execution without recreating localized failures. Ultimately, permanently eliminating flaky tests requires engineers to adopt a white-box testing approach—analyzing internal application timing to ensure responsive functional stability rather than simply hardening the test script.

**Keywords:** time-travel debugging, test flakiness, end-to-end testing, cypress timeline, playwright trace viewer, replay.io, retroactive debugging, guard assertions, dom rendering delays, ci integration, white-box testing, react component state, network intercepts, flaky test resolution, automated test stability

## Chapters

1. **Introduction to time travel for debugging flaky tests** (00:02) — The concept of observing previous state helps diagnose unstable test automation scripts.
1. **Analyzing test automation challenges and the Cypress timeline** (02:08) — Using built-in timeline features to observe unpredictable state variations during test execution.
1. **Fixing timing issues in Cypress with guarding assertions** (05:56) — Adding explicit state expectations prevents failures caused by unpredictable application load speeds.
1. **Using Playwright Trace Viewer to debug unstable scripts** (09:28) — Generating and inspecting execution traces reveals hidden transitions and interaction failures.
1. **Uncovering application errors with the Replay browser** (15:32) — Capturing full runtime environments allows reverse debugging without modifying underlying source code.
1. **Integrating automated recordings to fix asynchronous state bugs** (24:01) — Examining network payloads within recorded tests reveals root causes of automation flakiness.
1. **Underlying architecture and adoption challenges of runtime capture** (37:53) — Forking the Chromium engine enables deep runtime visibility despite a steep usability learning curve.
1. **Managing continuous integration setups and white box strategies** (42:58) — Automated recording in pipelines securely captures runtime data while encouraging deeper code exploration.

## Related Moments

- [Advantages of using Cypress for testing workflows](https://www.wearedevelopers.com/videos/282-watch-tests-go-brrrr-getting-started-with-cypress-in-reactjs) (from "Watch Tests Go Brrrr! : Getting Started with Cypress in ReactJS")
- [Keeping up with Web3 testing tools](https://www.wearedevelopers.com/videos/878-testing-web3-applications) (from "Testing web3 applications")
- [Introduction to end-to-end testing with Cypress](https://www.wearedevelopers.com/videos/878-testing-web3-applications) (from "Testing web3 applications")
- [The software testing timeline and regression checking pitfalls](https://www.wearedevelopers.com/videos/87-excellent-software-testing) (from "Excellent Software Testing")
- [Identifying root causes of flaky testing and false negatives](https://www.wearedevelopers.com/videos/540-let-s-get-visual-visual-testing-in-your-project) (from "Let's get visual - Visual testing in your project")
- [Exploring the expansion of end-to-end testing utility suites](https://www.wearedevelopers.com/videos/1678-the-2025-state-of-javascript-testing) (from "The 2025 State of JavaScript Testing")

## Related Articles

- [Dev Digest 106 - DHH in HD](https://www.wearedevelopers.com/magazine/394-dev-digest-106-dhh-in-hd)
- [Devs vs. Marketers, COBOL and Copilot, Make Live Coding Easy and more - The Best of LIVE 2025 - Part 3](https://www.wearedevelopers.com/magazine/663-devs-vs-marketers-cobol-and-copilot-make-live-coding-easy-and-more-the-best-of-live-2025-part-3)
- [All the videos of Halfstack London 2024!](https://www.wearedevelopers.com/magazine/521-all-the-videos-of-halfstack-london-2024)
- [Dev Digest 138 - Are you secure about this?](https://www.wearedevelopers.com/magazine/486-dev-digest-138-are-you-secure-about-this)

## Related Jobs

- [Engineer, Offensive Security Organization](https://www.wearedevelopers.com/jobs/ext/1992296-engineer-offensive-security-organization) at **Twilio**
- [Senior Software Engineer, Fraud](https://www.wearedevelopers.com/jobs/ext/1280398-senior-software-engineer-fraud) at **Twilio**
- [Staff, Analytics Engineer](https://www.wearedevelopers.com/jobs/ext/569504-staff-analytics-engineer) at **Twilio**
- [Staff Engineer - Offensive Security](https://www.wearedevelopers.com/jobs/ext/1226927-staff-engineer-offensive-security) at **Twilio**
- [Staff Software Engineer, Copilot Experiences](https://www.wearedevelopers.com/jobs/ext/164361-staff-software-engineer-copilot-experiences) at **GitHub**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**