Low‑Cost H5 Page Automated Testing on Real Mobile Devices Using Appium

In previous sharing on image‑based UI automation for H5 pages, Selenium + Chrome (headless) was used for lightweight regression testing, but Chrome does not reflect real device environments, leading to undetected style and layout issues across different phones and apps.

To address these gaps, the goal is to perform H5 testing on actual devices, achieving rapid regression, fast external compatibility checks, and real‑time online monitoring for more precise and efficient automation.

The proposed solution emphasizes high efficiency, low operational and maintenance costs, and leverages the widely adopted mobile automation framework Appium to run H5 tests on various devices and apps.

Functional Framework Design

The framework supports simultaneous testing of H5 pages on multiple devices and terminals, split‑screen testing for long pages, online timed monitoring, and real‑time email reporting of anomalies.

The architecture consists of several modules (see image below):

Module Implementation Details

1. Test Task Initialization : Testers create tasks on the platform, specifying parameters such as URL, target devices, click density, click areas, and screen sections; these are written to a config file and read by the test script.

2. H5 Page Initialization : The target URL is opened on the selected app (e.g., NetEase News) via QR‑code scanning or in‑app feedback, mimicking real user behavior.

3. Pre‑set Position Click and Image Capture : The page is divided into regions based on click density; each region is clicked, and a screenshot is captured. This method avoids element‑specific logic but cannot test business flows and may generate many invalid clicks.

4. Platform Visual Data Management : Integrated into the UI automation platform with custom front‑end interaction, offering task creation, baseline image review, and test result reporting.

5. Test Reporting : After each phase, the platform generates detailed reports (device info, app info, URL, problem screenshots) and sends email notifications, including alerts for regression or monitoring failures.

6. Regression Test Diff : Baseline images from compatibility testing are filtered for valid clicks; during regression, new screenshots are compared with baselines, and diffs exceeding a threshold trigger email alerts and are included in the final report.

Future Plans

Machine Learning: Automate the manual review of compatibility results by training models to detect anomalies such as overlapping text, style distortion, or occlusion.

Test Case Gallery: Capture screenshots of click positions to build a gallery; the platform will use template matching to identify effective click locations, reducing invalid clicks and improving automation efficiency.