Flaky Test

Stale DOM Reference

The results section is removed and re-created during processing, causing stale element references in automated tests.

Data Processor

Click "Process Data" to start. The results section is immediately removed from the DOM, then a completely new results section is rendered after 500ms. Any reference to the old element becomes stale.

Processed 0 times
Results Original DOM
Status Idle - waiting for processing
Data No data processed yet
DOM Node ID --

Processing Timeline

This timeline shows the sequence of DOM operations during processing.

Waiting for action
Click "Process Data" to see the DOM lifecycle

Why This Causes Flaky Tests

When a test grabs a reference to the results element and then the processing removes and re-creates it, the old reference points to a detached DOM node. Any assertion on that reference will fail or return stale data.

  • Clicking "Process Data" immediately removes the results section from the DOM
  • After 500ms, a brand new results section is inserted
  • Old document.querySelector('#results-section') references become stale
  • Fix: Re-query elements after actions that cause DOM re-renders