Using Mocha and Chai

Mocha and Chai are two libraries that gives detailed reports, including execution time, item descriptions, and better test documentation. It is usually used with Chai, an assertion library, which enhances the basic NodeJS assert library.

Create new test file

Create and save test3.js in an editor with the following code:

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

let page, browser, context;

describe('Selenium Playground Test', function() {
    this.timeout(30000);
   
    before(async function() {
        browser = await pw.chromium.launch();
        context = await browser.newContext();
     page = await context.newPage('http://leafground.com/')
    })

    after(async function() {
        await page.close();
        await context.close();
        await browser.close();
    })

    it('Checks the title of the page', async() => {
        await page.goto('http://leafground.com/');
        const title = await page.title();
        expect(title).to.equal('TestLeaf - Selenium Playground')
    })
    it('Checks the html title of the page', async() => {
        const title = await page.$('.wp-heading')
        let titleText = await title.textContent()
        expect(titleText).to.match(/Locators and Selenium Interactions/g)
    })
})

This code uses Mocha and Chai libraries, and its usage is explained

• Mocha expects a describe function that encapsulates each test suite.
• Describe has a timeout property, which defines the maximum time for each test to finish. If exceeded, the test will fail with a timeout assertion error.
• There are a before and after callbacks, which are special functions that called before and after all tests are processed, The before callback is used to initialize variables, start process, connect to databases; and the after callback is used to end the browser, context and page instances.
• “It” functions, which test an individual functionality of the suite, and the Chai assertion, which gives additional assertion functions such as regular expression matching

This test also introduces the concept of selectors: this are functions that select one or many elements from the DOM, according to a filter function (in this case, a CSS). Playwright works by selecting DOM elements and then interacting with them. For this case, it gets the containing text from an HTML header, and getting its text content to compare with an expected value.

The test can be tried by executing the mocha command

playwright_test > mocha filename.js

Once executed, the test shows a formatted result:

Selenium Playground Test
    √ Checks the title of the page (3535ms)
    √ Checks the html title of the page

2 passing (4s)