Automated Mobile H5 Performance Testing Using tcpdump and JavaScript Injection

Application Background A recent advertising app combines native and WebView modes to load H5 activity pages on mobile devices without requiring app updates, but testing revealed frequent white‑screen delays and slow page loads, prompting the need for front‑end performance testing.

Project Requirements The solution must be fully automated, run on mobile devices, support distributed execution across multiple phones, and produce visual reports comparable to Chrome DevTools.

Key Metrics Three critical performance indicators are identified: Start Render (time to first visible content), DOM Ready (time when DOMContentLoaded fires, excluding images and iframes), and Page Load (time when window.onload fires, including all resources).

Testing Approach The chosen method captures network traffic with tcpdump to generate a .pcap file, then extracts performance data via JavaScript injection using the W3C Performance API.

Implementation Steps

Submit H5 test parameters to the Mango platform.

The server receives parameters and queues a task in Redis.

Redis checks device status and starts tcpdump listening.

Redis launches MangoService on the device to access the H5 URL.

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

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

Redis converts the .pcap file to a HAR file.

The HAR data is displayed on a web page.

tcpdump Operations

Prepare rooted Android 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

JavaScript Injection A monitoring script is injected into the WebView to capture performance events; this is necessary to measure white‑screen time (responseStart – navigationStart), which tcpdump alone cannot provide.

pcap to HAR Conversion The .pcap file is transformed into a HAR file using tools such as HarViewer ( http://www.softwareishard.com/har/viewer/) and the open‑source HarViewer project ( https://github.com/janodvarko/harviewer), enabling timeline visualizations similar to Chrome DevTools.

Results Collected metrics are aggregated, statistical analysis (e.g., normal distribution intervals) is applied, and a simple dashboard displays white‑screen time and other performance figures.

Postscript The authors encountered challenges: root access requirements for tcpdump, the method of JS injection, HTTPS traffic parsing limitations, and the reliability of white‑screen time as a standard metric, which will be addressed in a future article.