Self-Healing Selectors Demo

Toggle between Mode X (stable IDs) and Mode Y (renamed IDs) to simulate a DOM refactor

Mode X — Stable IDs → Mode Y — Renamed IDs

Login Form

Selector Diff

Your automation script targets Mode X selectors. When the DOM switches to Mode Y, BrowserStack Self-Healing detects the change and repairs the locators automatically.

login.spec.js
// Mode X — works
page.locator('#username')
page.locator('#password')
page.locator('#login-btn')