Boost UI Test Stability: Practical Puppeteer & Mocha Strategies

Introduction

UI automation is a crucial part of quality assurance, but it usually accounts for a small portion of the testing pyramid because of its instability and high cost. After more than a year of practice, our team found that well‑chosen UI automation can deliver the highest cost‑performance, with a false‑positive rate around 1% and reliable coverage of core business flows before each release.

Choosing Suitable Business Scenarios

We focus on the core ordering process of the Youzan commercial platform, which is a standard e‑commerce flow used by merchants on PC web and H5 pages. This P0 business must be absolutely stable, so it is ideal for UI automation. The criteria for selecting scenarios are:

Business processes change infrequently.

UI elements remain stable.

Frequent regression is required.

Core user journeys.

Only a limited set of stable, high‑impact flows should be covered to keep the test suite lightweight and cost‑effective.

Selecting an Appropriate Framework

We use Puppeteer combined with Mocha . Puppeteer allows us to intercept network requests, retrieve API responses, and manipulate both UI and backend data, which improves script stability and execution speed.

Enhancing Script Stability and Execution Efficiency

4.1 Element Locating

Unstable selectors, such as dynamically generated class names, cause flaky tests. The most reliable approach is to ask developers to add a custom attribute (e.g., testId='test-submit') for stable identification, using selectors like [testId='test-submit']. If adding attributes is not feasible, locate elements by their stable parent components or use sibling selectors.

4.2 Validating Dynamic Elements

When UI content changes based on backend data (e.g., daily‑varying subscription periods), fetch the expected value from the API response via response.json() and compare it with the actual page content. This method reduces reliance on unstable UI text.

4.3 Wait Mechanisms

Instead of a fixed page.waitFor(time), wait for the specific network response using page.waitForResponse(url). After the response succeeds, add a short ( 0.1s) wait for rendering before asserting values.

4.4 Replacing UI Steps with API Calls

For long‑running non‑validation steps (e.g., closing pending orders), invoke the corresponding backend API directly. We encapsulated HTTP requests with Axios , automatically injecting cookies from page.cookies() into request headers.

Axios is a promise‑based HTTP library usable in both browsers and Node.js.

The request wrapper provides get and post methods; the test script calls these APIs before or after UI actions to set up or clean up data.

4.5 Test Retry Mechanism

Network glitches can cause occasional failures. Mocha’s built‑in retry feature allows specifying a retry count (e.g., this.retries(2)) so that a failing test is automatically re‑executed up to two times.

4.6 Screenshots and Logging

In the afterEach hook, capture a screenshot only when a test fails. Additionally, log important API responses using Puppeteer’s Response class to help pinpoint whether an issue originates from the frontend or backend.

4.7 Continuous Integration

UI automation runs in two contexts: pre‑release on a staging environment to catch bugs early, and scheduled runs on production to verify core functionality. Tests are executed on Jenkins, and results are pushed to an enterprise WeChat group for immediate visibility. Execution time is kept under 5‑7 minutes to avoid instability and to accommodate urgent releases.

Conclusion

Before investing in UI automation, clearly define the goals, ensure the selected business flows are stable, and focus on high‑frequency regression scenarios. Understand the sources of flakiness—such as UI changes, network latency, and dynamic data—and mitigate them with stable selectors, API interception, explicit waits, retries, and CI integration. Properly scoped UI automation delivers high cost‑performance while maintaining test reliability.