SnapDiff: An Automated Frontend Visual and Message Diff Testing Platform

Author Bio Liang Chen, senior test manager at Ctrip Ticket BU, has extensive experience in software quality for both front‑end and back‑end services and focuses on introducing new technologies to improve team efficiency.

Introduction Front‑end development’s rapid iteration creates high maintenance costs for test code, often lagging behind product releases. Traditional testing adds validation points manually, leading to growing test‑code bloat, low ROI, and incomplete coverage, especially for complex domains like Ctrip’s ticketing system where a single page may require thousands of test cases.

Platform Overview SnapDiff replaces manual checkpoint maintenance with an automated solution that lowers test‑code upkeep, expands coverage, and boosts testing efficiency.

Design Considerations

Usability: Built with JavaScript, the language most front‑end engineers know, supporting both manual and CI‑triggered execution.

Stability: Provides two comparison layers – front‑end visual diff and message‑listener diff – ensuring reliable image capture, event listening, and comparison algorithms.

Efficiency: Reduces long‑running front‑end tests by employing distributed, concurrent execution.

Extensibility: Allows rapid expansion of test data, test cases, and low‑cost page integration.

Universality: Supports H5, online, offline web and crn‑web pages.

How It Works

1. Test case design & data preparation : Users create tasks, configure test cases and data, with data supplied via a data‑center API and restored to a known state before each run.

2. Task execution mode : Tasks can run continuously in CI for regression or be triggered manually for daily testing.

3. Test execution : The platform performs visual comparison (pixel‑level screenshot diff with highlighted differences) and message‑listener comparison (recording and diffing network requests/responses).

4. Report analysis : Results are emailed; a passing diff shows “OK”, while differences provide a link to a detailed report for further analysis.

Use Cases A developer modifies a UI element, configures the corresponding test case and data, and lets SnapDiff automatically execute the test and deliver a diff report, eliminating manual verification.

Challenges & Solutions

Improving report accuracy : Integrated OCR to extract text differences, ignore irrelevant layout changes, auto‑ignore known variations (e.g., ads), and intelligently group similar issues.

Boosting execution efficiency : Utilized headless Chrome via Puppeteer (a Node.js library maintained by the Chrome team) and distributed concurrent workers to dramatically cut runtime.

Reducing onboarding cost : Provided self‑service task creation and job launch, allowing users to configure URLs, DOM selectors, rules, and recipients without custom development.

Ensuring data stability : Employed mock services and data‑mirroring with automatic restoration before each test run.

Impact The platform has uncovered dozens of bugs within a month, supporting developers, testers, and regression cycles, and establishing a feedback loop: test design → automated execution → report analysis → refined test design.

Limitations

Currently supports only H5/Web/Crn‑web pages; native and React‑Native support is planned.

Report readability can be further improved.

Stability and performance need ongoing enhancements.

Recommended Reading

Quick Troubleshooting: What VI Can Do for You

Light Merge: Accelerating Branch Integration at Ctrip

Ctrip’s Real‑Time Risk Control System Based on Big Data

Design of Android Modular Platform

Document OCR Technology Overview