Getting Started with UI Automation Testing Using Puppeteer and Mocha

This tutorial explains how to set up and use Puppeteer together with the Mocha test framework to create, run, and report UI automation test cases for web and H5 applications, covering installation, a demo script, selector handling, and visual test reporting.

转转QA
转转QA
转转QA
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.

Original Source

Signed-in readers can open the original source through BestHub's protected redirect.

Sign in to view source
Republication Notice

This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactadmin@besthub.devand we will review it promptly.

JavaScriptfrontend developmentPuppeteerUI automationNode.jsweb testingmocha
转转QA
Written by

转转QA

In the era of knowledge sharing, discover 转转QA from a new perspective.

0 followers
Reader feedback

How this landed with the community

Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.