AGENT-03EXPERIMENTAL•12 min read•Advanced

AI Playwright Test Healer Agent: Diagnosing DOM Drift & Self-Healing Selectors

How AST analysis and semantic visual diffing can heal broken Playwright locators without human intervention.

#Self-Healing#AST Analysis#Locator Drift#Maintenance Automation

01. The Problem

When frontend developers refactor UI layouts or update Tailwind classes, brittle selectors break CI pipelines despite the underlying business flow remaining perfectly functional, wasting hours of SDET time.

02. The Concrete Engineering Scenario

A redesign of the WrightPay dashboard renames the transfer CTA from 'Send Money' to 'New Payout' and moves it inside an action dropdown. The nightly regression suite fails on locator.click().

Agent Role Definition:

Acts as an automated triage and repair agent that intercepts test failures, compares historical DOM snapshots with current failure traces, and generates a Git diff proposing updated locators.

03. Context & Inputs Provided to Agent

•Playwright failure trace (trace.zip) with screenshot, error message, and DOM snapshot.
•The failing test source code and line number.
•Previous passing DOM snapshot from yesterday's CI run.

04. Agent Reasoning & Planning Steps

Step 1: Failure Classification — Distinguishes between functional failures (assertion failed on data) vs locator resolution failures (element not found).

Step 2: Semantic Element Matching — Uses text embeddings and tree-distance algorithms to identify the new element performing the same semantic intent.

Step 3: Verification Sandbox — Spawns headless Playwright to execute the candidate locator against the live page.

Step 4: Diff Generation — Modifies the Page Object file using TypeScript AST transformation (ts-morph).

Playwright Interaction

Replays the test in a containerized environment with Playwright's tracing enabled, confirming that the new locator resolves within 50ms.

Evidence Collection

Produces a side-by-side screenshot diff highlighting the old button location vs the new dropdown action, attached to the PR description.

05. Concrete Code Excerpt

Healer Proposed AST Patch

// Proposed Git Diff from Test Healer Agent
diff --git a/pages/DashboardPage.ts b/pages/DashboardPage.ts
--- a/pages/DashboardPage.ts
+++ b/pages/DashboardPage.ts
@@ -14,3 +14,3 @@ export class DashboardPage {
-    this.sendMoneyBtn = page.getByRole('button', { name: 'Send Money' });
+    // Healed: Refactored in UI commit 8a4c1e — element moved to Payout action
+    this.sendMoneyBtn = page.getByRole('button', { name: 'New Payout' });

Failure & Edge Case Handling

If multiple candidate elements match or if the flow was intentionally removed, the agent refrains from auto-fixing and labels the issue as 'Suspected Breaking Change — Manual Confirmation Required'.

Measurable Result

Generates a surgical Git patch updating page.getByRole('button', { name: 'Send Money' }) to page.getByRole('button', { name: 'New Payout' }), resolving the failure without human coding.

Human Review & Approval Gate

The SDET approves the pull request via GitHub Actions workflow after checking the visual diff.

Key Engineering Lessons Learned

Lesson 01

Self-healing must never automatically commit to production branches without an approval gate.

Lesson 02

Healing selectors is only safe when the underlying business invariant has not changed.

Lesson 03

Using ARIA accessible names as the primary locator strategy reduces selector breakage by over 70% before healing is even needed.

All Articles Inspect WrightPay Case Study →