Implementing End-to-End Testing with Puppeteer for the Tongtian Tower Build System

The Tongtian Tower building system offers limitless possibilities for merchants and operators to create marketing pages, but its complexity makes manual self‑testing time‑consuming, often requiring 20‑30 minutes per run and prone to human error.

In Q1 2020 the team introduced an end‑to‑end (E2E) testing workflow using Puppeteer, automating core build processes on the wireless platform and dramatically reducing manual effort.

Technology selection : After evaluating frameworks such as Playwright, Selenium, Cypress, and others, Puppeteer was chosen because it aligns with the JavaScript/Node stack, is maintained by the Chrome team, offers deep browser control via the Chrome DevTools Protocol, and is free, stable, and actively maintained.

Prerequisite concepts : Understanding the Chrome DevTools Protocol (CDP) – a WebSocket‑based, language‑agnostic interface for controlling Chrome – and Chrome Headless mode, which runs Chrome without a UI for stable, platform‑independent execution.

Quick overview of Puppeteer : Puppeteer is a Node library that wraps CDP, providing high‑level APIs for actions such as screenshots, user interaction simulation, and network interception. It can be installed via npm install puppeteer (or puppeteer‑core for a Chromium‑less version) and has specific Node version requirements.

Puppeteer in the Tongtian Tower project : The goal is to enforce code quality by automating regression tests in a gray‑environment; only passing tests allow deployment. Test scope follows the 80/20 principle, focusing on high‑impact, stable core flows. The project architecture consists of four layers: Node (orchestrating Jest and Puppeteer), base classes & utilities, instantiated instances exposing actions like edit/save/publish, and business test cases (both composite and single‑function).

Jest is integrated manually rather than using the community jest‑puppeteer package to suit the system’s complexity.

Core Puppeteer capabilities used include JavaScript injection (via adding <script> tags or page.evaluate ), network throttling (sending CDP commands to simulate speeds), and request/response interception (centralized listeners added at page creation, with caching for data exchange). Sample code snippets are wrapped in ... tags.

Practical issues encountered and solutions: page.click failures resolved with page.$eval('selector', el => el.click()) ; file upload bugs fixed by using a polyfill after version v3.0.0 ; dialog handling via page.on('dialog', ...) ; and custom drag‑and‑drop implementation using mouse events.

Test reports generated by Jest provide both console output and persistent HTML reports.

Results : Manual regression took 20‑30 minutes, while the automated script completed in about 240 seconds, demonstrating significant time savings, reduced error rates, and increased testing frequency, allowing developers to focus on feature work.

Conclusion and outlook : The E2E solution has solved long testing cycles and improved code quality and user experience. The team plans to extend coverage to all core templates, deepen CI/CD integration, and build a standardized, continuous front‑end engineering system to further boost productivity and quality.