Automated Regression Testing Framework for Activity Pages Using Selenium and ImageDiff

Preface

The ZuanZuan operation system supports a variety of promotional activities and flashy activity pages, but frequent feature iterations risk affecting user experience. The challenge is to ensure that the "Magic Cube" page‑generation system can be updated without disrupting ongoing activities.

Thought

Three testing dimensions are proposed: business‑logic testing, functional regression testing, and compatibility testing. Functional regression testing is highlighted as the most time‑consuming, traditionally relying on manual click‑through of each page.

Testing Method

Page data correctness verification

Page style correctness verification

Each minor change in the Magic Cube system triggers testing of roughly 20 pages, equivalent to about three person‑hours of continuous manual work.

Solution

The author proposes an automated regression testing scheme named “Monitor Dog,” built on the mainstream UI automation framework Selenium with headless Chrome to achieve fast, low‑cost regression testing.

Operational Flow

Configure the URL to be regression‑tested.

Audit the baseline image (required for new URLs).

View the test report (generated only when issues are detected).

Process Description

New URL detection: A URL is considered new if it does not exist in the relevant database table or its element‑count metadata differs.

Baseline data collection: Capture the homepage image, all clickable elements (deduplicated by position), their text, post‑click screenshots, and element coordinates.

Regression testing steps: Retrieve all clickable elements for the URL from the database. Click each element sequentially, capturing a screenshot after each click. Diff each captured screenshot against the stored baseline image.

Difference analysis: If the diff percentage exceeds 10%, the element is added to the test report.

Technical Tips

The author shares several implementation details:

Element count acquisition: Use Selenium to fetch all elements via driver.findElementsByTagName("*") and store a stable identifier for each.

Full‑page screenshot: A custom getFullScreenshotAs method captures the entire page, not just the viewport.

Image diff with ImageMagick: Java bindings create an IMOperation , add baseline and monitor images, and execute the diff command, setting the search path for ImageMagick on Windows.

Pixel‑level analysis: Iterate over each pixel, classify it into white or red buckets based on RGB thresholds, and compute the proportion of differing pixels to derive the diff percentage.

driver.findElementsByTagName("*"); //获取页面元素总数

Object metrics = sendEvaluate(...); //获取页面全网页完整图片

IMOperation imageOperator = new IMOperation();
imageOperator.addImage(StdFile); //基准图片
imageOperator.addImage(monitorFile); //监控图片
CompareCmd cmd = new CompareCmd();
cmd.setSearchPath("C:\\Program Files\\ImageMagick-7.0.8-Q16");
cmd.run(imageOperator); //生成diff图片

The article also provides links to related past posts and includes illustrative screenshots of the workflow.