Mocha & Playwright


Mocha is a popular Javascript/NodeJS test runner, which is great for E2E testing.
It works very well in combination with Playwright.
You can bring structure in your tests, use assertions and create test reports.


To get started, please install these packages:

npm i mocha chai playwright-core

Now you can create a basic test script. Usually, you'll create these in a test folder, with a filename ending in .spec.js:

const pw = require('playwright-core')
const chai = require('chai')
const expect = chai.expect

let page, browser, context

describe('Sample Headless Test', () => {
    beforeEach(async function() {
        this.timeout(35000)
        browser = await pw.chromium.connect({
            wsEndpoint: 'wss://chrome.headlesstesting.com?token=[YOUR-TOKEN]&browserVersion=dev',
        })
        context = await browser.newContext()
        page = await context.newPage('https://headlesstesting.com')
    })

    afterEach(async function() {
        await page.screenshot({ path: `${this.currentTest.title.replace(/ +/g, '_')}.png` })
        await browser.close()
    })

    it('Checks the title of the page', async() => {
        await page.goto('https://headlesstesting.com/');
        const title = await page.title()
        expect(title).to.equal('Headless Testing with Puppeteer and Playwright in the Cloud.')
    })
})

This example will use Playwright to connect to a Chrome browser in our cloud.
It will open our website, retrieve the title of the page and verify with expect if the title is correct.


Chai is used to do assertions, this is a popular assertion library, allowing you to use either expect, should and assert, depending on your preferences.


After each test, we'll take a screenshot (see the afterEach part of the example code).

Parallel Testing with Mocha


One of the great advantages of our service is that you can run multiple tests simultaneously (in parallel).
This drastically shortens the total duration of your test suite, as multiple tests will run concurrently.


Mocha by default does not run multiple test files in parallel.
To achieve this, you can use mocha-parallel-tests, which is a NPM package that will run each of your test files in a separate process.

npm i mocha-parallel-tests

Now create multiple test/*.spec.js files with different tests:


test/test-one.spec.js:
const pw = require('playwright-core')
const chai = require('chai')
const expect = chai.expect

let page, browser, context

describe('Sample Headless Test', () => {
    beforeEach(async function() {
        this.timeout(35000)
        browser = await pw.chromium.connect({
            wsEndpoint: 'wss://chrome.headlesstesting.com?token=[YOUR-TOKEN]&browserVersion=dev',
        })
        context = await browser.newContext()
        page = await context.newPage('https://headlesstesting.com')
    })

    afterEach(async function() {
        await page.screenshot({ path: `${this.currentTest.title.replace(/ +/g, '_')}.png` })
        await browser.close()
    })

    it('Checks the title of the page', async() => {
        await page.goto('https://headlesstesting.com/');
        const title = await page.title()
        expect(title).to.equal('Headless Testing with Puppeteer and Playwright in the Cloud.')
    })
})

test/test-two.spec.js:
const pw = require('playwright-core')
const chai = require('chai')
const expect = chai.expect

let page, browser, context

describe('Sample Headless Test', () => {
    beforeEach(async function() {
        this.timeout(35000)
        browser = await pw.chromium.connect({
            wsEndpoint: 'wss://chrome.headlesstesting.com?token=[YOUR-TOKEN]&browserVersion=dev',
        })
        context = await browser.newContext()
        page = await context.newPage('https://headlesstesting.com')
    })

    afterEach(async function() {
        await page.screenshot({ path: `${this.currentTest.title.replace(/ +/g, '_')}.png` })
        await browser.close()
    })

    it('Checks the title of the page', async() => {
        await page.goto('https://headlesstesting.com/pricing');
        const title = await page.title()
        expect(title).to.equal('Pricing for Headless Testing.')
    })
})

To run these 2 test files simultaneously, please run this command:

mocha-parallel-tests test/*.spec.js

You should see output similar to:

Sample Headless Test
      ✓ Checks the title of the page (798ms)


    Sample Headless Test
      ✓ Checks the title of the page (921ms)


  2 passing (26s)

Depending on how many tests you run in parallel, you can drastically shorten your total test duration, and get faster feedback from your tests.