Playwright UI Suite with Self-Healing Locators

End-to-end UI tests for the Sauce Labs demo store in Playwright + TypeScript, with locators that heal themselves — and hand off to Claude to propose a fix when they can't.

Overview

A UI automation suite for the Sauce Labs demo shopping site, covering login, logout, the product pages and the shopping cart. It’s built on the Page Object Model, with custom Playwright fixtures that supply page objects and a pre-authenticated session to every spec.

Self-healing locators

Brittle selectors are the most common reason UI suites break. This project handles them at two levels:

Deterministic fallback. Instead of one hardcoded selector, a step tries a prioritized list of candidates. If the primary selector has gone stale (say a data-test attribute was renamed) but a fallback still matches, the test keeps running and logs the recovery to a healing report.
AI-driven repair. If every candidate fails, the failure is logged as a healing request. A script hands those requests to Claude through the Claude Agent SDK. Claude drives a real browser via the Playwright MCP server to find the element, reads the repo to locate the broken locator, and writes a proposed fix as a unified diff. It only ever suggests the change; nothing is edited or committed automatically.

const loginButton = await heal(
  ['#login-button-v1', '#login-button'], // stale selector, then the real one
  'the primary Login submit button on the login page'
)

Engineering details

Log in once: a Playwright setup project logs in once per run and saves storage state, so specs start already authenticated. The login specs still drive the real form.
Environment config: handled through dotenv, with ESLint and tsc --noEmit type-checking.
Merge request pipelines: GitLab CI runs the full suite and publishes the HTML report and JUnit results. It also runs lint, type-check, SAST and secret detection.
Manual CI jobs: the deterministic healing demo and the AI-healing flow can each be run on demand, and their reports and proposed diffs are published as merge request artifacts.