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.

members only

Keep reading with the full course

The Foundations track and the first 5 lectures of each framework are free. This lecture is part of the paid course, which unlocks every lecture, all three frameworks, and downloads.

See the options →