Features
Start a free trial

Playwright & Mocha

Mocha is a popular Javascript/NodeJS test runner, which is great for E2E testing.
See the example below on how to use Mocha and Playwright to run tests on the TestingBot browser grid.

Installation

To get started, please install these packages:

Copy code
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:

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

let page, browser, context

describe('Sample Test', () => {
    beforeEach(async function() {
        this.timeout(35000)
        const capabilities = {
          'tb:options': {
            key: process.env.TB_KEY,
            secret: process.env.TB_SECRET
          },
          browserName: 'chrome',
          browserVersion: 'latest'
        }
        browser = await pw.chromium.connect({
          wsEndpoint: `wss://cloud.testingbot.com/playwright?capabilities=${encodeURIComponent(JSON.stringify(capabilities))}`
        })
        context = await browser.newContext()
        page = await context.newPage('https://testingbot.com')
    })

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

    it('Checks the title of the page', async() => {
        await page.goto('https://testingbot.com/');
        const title = await page.title()
        expect(title).to.equal('Cross Browser Testing and Mobile App Testing | TestingBot')
    })
})

This example will use Playwright to connect to a Chrome browser in the TestingBot cloud.
It will open the TestingBot 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 and close the browser (see the afterEach part of the example code).

Parallel Testing with Mocha

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

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

Copy code
npm i mocha-parallel-tests

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

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

let page, browser, context

describe('Sample Test', () => {
    beforeEach(async function() {
        this.timeout(35000)
        const capabilities = {
          'tb:options': {
            key: process.env.TB_KEY,
            secret: process.env.TB_SECRET
          },
          browserName: 'chrome',
          browserVersion: 'latest'
        }
        browser = await pw.chromium.connect({
          wsEndpoint: `wss://cloud.testingbot.com/playwright?capabilities=${encodeURIComponent(JSON.stringify(capabilities))}`
        })
        context = await browser.newContext()
        page = await context.newPage('https://testingbot.com')
    })

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

    it('Checks the title of the page', async() => {
        await page.goto('https://testingbot.com/');
        const title = await page.title()
        expect(title).to.equal('Cross Browser Testing and Mobile App Testing | TestingBot')
    })
})
test/test-two.spec.js:
Copy code
const pw = require('playwright-core')
const chai = require('chai')
const expect = chai.expect

let page, browser, context

describe('Sample Test', () => {
    beforeEach(async function() {
        this.timeout(35000)
        const capabilities = {
          'tb:options': {
            key: process.env.TB_KEY,
            secret: process.env.TB_SECRET
          },
          browserName: 'chrome',
          browserVersion: 'latest'
        }
        browser = await pw.chromium.connect({
          wsEndpoint: `wss://cloud.testingbot.com/playwright?capabilities=${encodeURIComponent(JSON.stringify(capabilities))}`
        })
        context = await browser.newContext()
        page = await context.newPage('https://testingbot.com')
    })

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

    it('Checks the title of the page', async() => {
        await page.goto('https://testingbot.com/pricing');
        const title = await page.title()
        expect(title).to.equal('Cross Browser Testing - Prices and plans available for test online.')
    })
})

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

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

You should see output similar to:

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


    Sample 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.