(Playwright) SyncMaster

Inspiration

In modern frontend systems, UI changes are constant – but test automation is still brittle.

A minor change like renaming a class or restructuring a component can break hundreds of tests. Not because functionality failed, but because selectors no longer match.

This creates a disproportionate cost: Industry estimates suggest 60–70% of automation effort is spent on maintenance rather than new test creation.

We asked a simple question: Why are tests breaking for changes they should be able to understand?

(Playwright) SyncMaster was built to make test automation adaptive instead of fragile.

What it does

(Playwright) SyncMaster is an intelligent synchronization layer that keeps test scripts aligned with evolving UIs.

It detects DOM-level changes and automatically updates selectors in test scripts while preserving test intent.

Core capabilities:

🔍 DOM change detection from code changes
🔄 Automatic selector refactoring in test scripts
⚡ Reduction in flaky failures and CI noise
🔌 Seamless integration into existing workflows

Instead of reacting to broken tests, teams move toward self-healing automation.

How we built it

Understood the capabilities of GitLab Duo Flows and Agents, crafted AI prompts for selector detection, iterated YAML via test MRs, and refined for Playwright patterns.

Architecture overview:

Sequential two-agent pipeline

analyze_ui_changes agent parses MR diffs to extract selector mappings (old -> new classNames/data-testids)
locate_and_update_specs agent scans *.spec.ts files, replaces locators via read_file/update_file tools, and commits updates.

Challenges we ran into

Iterating on LLM prompts to handle diverse selector patterns (e.g., CSS, testid, XPath) without over-generalization
Understanding the data available in the "context" namespace used in the inputs.

Accomplishments that we're proud of

🚀 Built a functional prototype that auto-updates broken selectors
📉 Reduced manual debugging effort in test failures
🔌 Kept it compatible with a popular testing framework – Playwright (low adoption friction)
💡 Tackled a real, high-frequency developer pain point often ignored