lecture 5 of 160 completed

Modern JavaScript apps and the elements that move under you

Single-page apps redraw constantly. Selenium sees the DOM as it is right now, which is why references go stale and clicks miss.

What you'll learn

  • Why modern apps make references go stale
  • How to wait for the thing that settles
  • Why a JavaScript click hides real bugs

Selenium was designed when a page load meant a new page. Modern apps redraw pieces of themselves constantly without loading anything, and that mismatch is where most Selenium pain in a React or Angular app comes from.

Three specific problems, each with a specific fix.

The element you found no longer exists.

You already met StaleElementReferenceException in the earlier lecture. In a single-page app it happens far more often, because a small state change can replace a whole section of the DOM.

The fix is a habit: find late, use immediately.

full course

Keep reading with the full course

The Foundations track and the first lessons in each framework are free. This lesson needs full course access. A course plan includes all lessons for Playwright, Cypress and Selenium.

See course plans →