Artificial Intelligence 10 min read

Implementing Visual UI Automation Testing with Watcher: Architecture, Workflow, and Algorithms

The article explains how to reduce the impact of frequent UI changes on automated testing by using visual testing techniques, introduces the Watcher platform’s SDK, image‑comparison services, real‑time comparison, and various algorithms—including pixel, template, content, and AI‑based matching—to improve test stability and efficiency.

Ctrip Technology
Ctrip Technology
Ctrip Technology
Implementing Visual UI Automation Testing with Watcher: Architecture, Workflow, and Algorithms

Since the birth of automated testing, frequent business requirement changes have made maintenance costly, especially in agile and DevOps environments where rapid iteration increases UI volatility. The article discusses strategies to mitigate these challenges through visual testing.

1. Automation testing is not a silver bullet – while full automation is unrealistic, appropriate use in suitable scenarios can yield significant benefits, particularly by decoupling test logic from UI element dependencies.

2. Visual testing – validates UI appearance (fonts, layout, etc.) using image comparison, which can uncover visual defects that traditional keyword‑based checks miss.

3. Watcher platform – a visual testing solution composed of three parts: SDK, image‑comparison service, and comparison platform. The SDK integrates with frameworks such as Selenium, Appium, and Airtest to capture screenshots and upload them for analysis.

Typical workflow:

Introduce the Watcher SDK into the test project and call watcher.watcher_check() at verification points.

The platform receives the screenshot, checks for an existing baseline image, and either compares against it or creates a new baseline.

Results are reviewed; if differences stem from functional changes, the new image becomes the baseline; otherwise, defects are logged.

Code example (Airtest SDK):

watcher = Watcher_util()
watcher.watcher_open("测试用例名称")
watcher.watcher_check("验证点1")
....测试代码
watcher.watcher_check("验证点2")

4. Real‑time comparison – unlike baseline comparison, it matches screenshots from concurrent versions to avoid false failures caused by time‑sensitive data.

5. Image‑comparison algorithms – Watcher supports multiple modes:

Pixel‑perfect (precise) comparison using OpenCV.

Template matching, where a region of interest is defined in the baseline and matched in new screenshots.

Content comparison, leveraging OCR to focus on textual differences.

AI comparison, currently experimental, employing YOLOv3 to ignore benign changes (e.g., dates) and detect anomalies such as missing images or text overlap.

6. Conclusion – Deploying Watcher reduces UI test case volume by over 50%, improves stability, shortens execution time by 30%, and enhances debugging efficiency, though challenges like false‑positive rates and cross‑platform support remain areas for future improvement.

AIUI AutomationappiumSeleniumWatcherimage comparisonvisual testing
Ctrip Technology
Written by

Ctrip Technology

Official Ctrip Technology account, sharing and discussing growth.

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.