Automated Performance Testing for Mobile H5 Ads Using Tcpdump and JS Injection

As H5 pages become increasingly common in mobile applications, testing the performance of mobile H5 advertisements is crucial, especially to address slow loading and frequent white‑screen issues.

Application Background

A recent ad application uses a hybrid Native/WebView mode to load H5 activity pages (e.g., World Cup specials) without requiring an app upgrade. During testing, the page load speed was very slow and white screens occurred frequently, prompting the need for front‑end performance testing.

Performance perception thresholds (2‑5‑8 principle): response within 2 seconds feels fast, 2‑5 seconds is acceptable, and 5‑8 seconds feels slow.

Project Requirements

The entire testing solution must be automated.

Testing must run on mobile devices.

Tests should be distributed across multiple phones.

Test reports need to be visualized, ideally as intuitively as Chrome DevTools.

Clear Metrics

The three key front‑end performance indicators are:

Start Render : time when the browser begins rendering the first visible content.

DOM Ready : time when the DOMContentLoaded event fires (HTML parsed, excluding images, iframes, etc.).

Page Load : time when the window.onload event fires, covering all resources.

These metrics must be captured during real user interactions.

Test Scheme Exploration

The chosen approach captures network traffic with tcpdump to generate a .pcap file, then extracts performance data via injected JavaScript.

Implementation Steps

Submit H5 test parameters on the Mango mobile‑management platform.

The server receives the parameters and enqueues a task in Redis.

Redis checks the status of the target phone and starts tcpdump listening.

Redis launches MangoService on the phone to visit the H5 URL.

MangoService injects a JavaScript snippet that uses the W3C Performance API to collect metrics and stores them in the database.

After the test, MangoService notifies the server, and Redis stops listening.

Redis converts the .pcap file to a .har file.

The resulting data is displayed on a web page.

Tcpdump Operation Flow

Prepare several root‑privileged phones.

Obtain the tcpdump binary (download from http://www.tcpdump.org/).

adb push /Users/simple/tcpdump /data/local/tcpdump

adb shell chmod 777 /data/local/tcpdump

adb shell su

/data/local/tcpdump -i any -p -s 0 -w /sdcard/capture.pcap

adb pull /sdcard/capture.pcap /Users/simple/report

JS Injection for Performance Data

The WebView injects a monitoring script that listens to performance events and records metrics such as responseStart and navigationStart to calculate white‑screen time, which tcpdump alone cannot provide.

pcap to HAR Conversion

Convert the .pcap file to a .har file to visualize a timeline similar to Chrome DevTools using tools like HarViewer (open‑source at GitHub ).

After injecting the JS and retrieving the performance data, the metrics are aggregated, statistical analysis (e.g., normal distribution) is applied, and the results are displayed on a simple dashboard.

Postscript

During implementation, several challenges were encountered:

Tcpdump requires root access, which is difficult to maintain on distributed high‑version devices.

Choosing a reliable method for JS injection.

Parsing HTTPS traffic from pcap files.

Validating whether the calculated white‑screen time is a standard metric.

Future work will address these issues in a follow‑up article titled “Goodbye Tcpdump: An Alternative H5 Performance Testing Solution”.