Getting Started with UI Automation Testing Using Puppeteer and Mocha

This article introduces a UI automation testing solution used internally at Zhuanzhuan, combining Puppeteer and Mocha to monitor web/H5 business flows.

It first explains the two tools: Mocha is a JavaScript test framework, and Puppeteer is a Node library that controls Chromium via the DevTools protocol, offering an alternative to Appium for browser‑based UI automation.

Next, it walks through environment setup: install Node.js, npm (or cnpm), create a Node project, add mocha and puppeteer to package.json , and install dependencies with npm install .

A simple demo script is provided that launches Chromium, opens a page, takes a screenshot, and closes the browser. The full source code is shown below:

const puppeteer = require('puppeteer');
async function test() {
  // Create a browser instance
  const browser = await puppeteer.launch({
    args: ['--no-sandbox', '--disable-setuid-sandbox'],
    headless: false,
    ignoreHTTPSErrors: true,
  });
  // Create a page
  const page = await browser.newPage();
  // Open target URL
  await page.goto('https://m.zhuanzhuan.com/open/ZZBook/index.html?needHideHead=3#/book-home');
  // Screenshot
  await page.screenshot({path: 'homePage.png'});
  // Close browser
  await browser.close();
};
module.exports = test;
test();

After the demo, the guide explains how to expand the script into reusable test cases, locate element selectors via browser dev tools, and use Puppeteer APIs such as page.goto , page.click , page.waitForSelector , etc.

It also recommends the Chrome extension “Puppeteer Recorder” for automatically generating Puppeteer code from recorded interactions, with download and usage instructions.

Finally, the article shows how to integrate the cases into Mocha: create a test/caseList.js file, use describe , it , and hooks ( before , after ), and run tests via mocha test/caseList . It demonstrates generating a simple console report and a richer HTML report using the mochawesome reporter.

The conclusion encourages readers to build more complex scenarios, utilities, and remote monitoring with Puppeteer and Mocha.