DEV Community

Haris Irfan
Haris Irfan

Posted on

๐—ง๐—ถ๐—ฟ๐—ฒ๐—ฑ ๐—ผ๐—ณ ๐—ง๐—ฒ๐˜€๐˜ ๐—”๐˜‚๐˜๐—ผ๐—บ๐—ฎ๐˜๐—ถ๐—ผ๐—ป ๐—™๐—น๐—ฎ๐—ธ๐—ถ๐—ป๐—ฒ๐˜€๐˜€? ๐—Ÿ๐—ฒ๐˜โ€™๐˜€ ๐—ง๐—ฎ๐—น๐—ธ ๐—ฆ๐—ฒ๐—น๐—ณ-๐—›๐—ฒ๐—ฎ๐—น๐—ถ๐—ป๐—ด ๐˜„๐—ถ๐˜๐—ต ๐—ฃ๐—น๐—ฎ๐˜†๐˜„๐—ฟ๐—ถ๐—ด๐—ต๐˜ & ๐—–๐—น๐—ฎ๐˜‚๐—ฑ๐—ฒ ๐—ฆ๐—ผ๐—ป๐—ป๐—ฒ๐˜ ๐˜ƒ๐—ถ๐—ฎ ๐— ๐—–๐—ฃ! ๐Ÿค–

UI changes shouldn't break your entire ๐—–๐—œ/๐—–๐—— ๐—ฝ๐—ถ๐—ฝ๐—ฒ๐—น๐—ถ๐—ป๐—ฒ.
Traditional test automation can fail instantly when an element ID changes, for example:
submit-btn-v1 โžก๏ธ submit-btn-v2
But with ๐—”๐—œ-๐—ฃ๐—ผ๐˜„๐—ฒ๐—ฟ๐—ฒ๐—ฑ ๐—ฆ๐—ฒ๐—น๐—ณ-๐—›๐—ฒ๐—ฎ๐—น๐—ถ๐—ป๐—ด, your test automation can dynamically adapt, identify alternative properties, and use ๐—Ÿ๐—Ÿ๐— -๐—ฝ๐—ผ๐˜„๐—ฒ๐—ฟ๐—ฒ๐—ฑ ๐˜€๐—ฒ๐—บ๐—ฎ๐—ป๐˜๐—ถ๐—ฐ ๐—ฎ๐—ป๐—ฎ๐—น๐˜†๐˜€๐—ถ๐˜€ to keep execution moving. ๐Ÿš€
Hereโ€™s how modern ๐—”๐—œ-๐——๐—ฟ๐—ถ๐˜ƒ๐—ฒ๐—ป ๐—ง๐—ฒ๐˜€๐˜ ๐—”๐˜‚๐˜๐—ผ๐—บ๐—ฎ๐˜๐—ถ๐—ผ๐—ป can work using the ๐— ๐—ผ๐—ฑ๐—ฒ๐—น ๐—–๐—ผ๐—ป๐˜๐—ฒ๐˜…๐˜ ๐—ฃ๐—ฟ๐—ผ๐˜๐—ผ๐—ฐ๐—ผ๐—น (๐— ๐—–๐—ฃ):
1๏ธโƒฃ ๐—˜๐˜…๐—ฒ๐—ฐ๐˜‚๐˜๐—ถ๐—ผ๐—ป ๐—œ๐—ป๐—ถ๐˜๐—ถ๐—ฎ๐˜๐—ฒ๐—ฑ
Your test runner starts executing a command such as:
page.click("hashtag#submit-btn-v1")
2๏ธโƒฃ ๐—ง๐—ต๐—ฒ ๐—จ๐—œ ๐—–๐—ต๐—ฎ๐—ป๐—ด๐—ฒ
The application changes, causing the original locator to fail.
3๏ธโƒฃ ๐—›๐—ฒ๐—ฎ๐—น๐—ถ๐—ป๐—ด ๐—ง๐—ฟ๐—ถ๐—ด๐—ด๐—ฒ๐—ฟ๐—ฒ๐—ฑ
Instead of immediately failing, the automation layer detects the error and provides the current ๐——๐—ข๐—  ๐˜€๐˜๐—ฎ๐˜๐—ฒ to the AI model.
4๏ธโƒฃ ๐—ฆ๐—ฒ๐—บ๐—ฎ๐—ป๐˜๐—ถ๐—ฐ ๐—”๐—ป๐—ฎ๐—น๐˜†๐˜€๐—ถ๐˜€
Claude Sonnet analyzes the page structure and determines the most appropriate fallback element, such as:
id="submit-btn-v2"
or another valid CSS/XPath locator.
5๏ธโƒฃ ๐—ฆ๐—ฒ๐—ฎ๐—บ๐—น๐—ฒ๐˜€๐˜€ ๐—–๐—ผ๐—ป๐˜๐—ถ๐—ป๐˜‚๐—ฎ๐˜๐—ถ๐—ผ๐—ป
The test runner receives the updated locator, executes the step successfully, logs the healing action, and continues the test execution. โœ…
This is where ๐—”๐—œ ๐—”๐—ด๐—ฒ๐—ป๐˜๐˜€ + Model Context Protocol+ Playwright can bring a new dimension to modern QA automation.
Check out the workflow diagram below to see how AI integration layers can help reduce automation maintenance and flaky test failures. ๐Ÿ‘‡
๐Ÿ’ฌ Has your team started integrating AI agents or MCP servers into your QA workflow yet?

Top comments (0)