PlaywrightJS Tutorial

PlaywrightJS Tutorial

  • Docs

›First Steps

Setup

  • PlaywrightJS Installation
  • Install Mocha and Chai
  • Installation Test

First Steps

  • Create a PlaywrightJS Test
  • Using Mocha and Chai

The Playwright Library

  • The Browser Object
  • The Context Object
  • The Page Object
  • Selectors
  • Navigation
  • Interactions
  • Auditing

Using PlayWright on web pages

  • A real world case

Code Generation

  • Code Generation

Cookbook

  • Timers
  • Using SQL
  • Database Connection
  • Email Setup

Create a PlaywrightJS Test

Create new test file

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

const pw = require('playwright');
const assert = require('assert');

(async () => {
    const browser = await pw.chromium.launch();
    const context = await browser.newContext();
    const page = await context.newPage();

    await page.goto('http://leafground.com/');
    
    let title = await page.title();
    try {
        await assert.strictEqual(title, 'TestLeaf - Selenium Playground', 'Title match!');
    }
    catch (e) {
        console.log(e);
    }
    await page.close();
    await context.close();
    await browser.close();
})();

First, we require the Playwright library and the assert library, which is part of NodeJS.

const pw = require('playwright');
const assert = require('assert');

Then, we create a self-invoking asynchronous function, that will allow us to “await” for certain events to happen. Since we are testing a web page, there a loading and processing operations that need to be waited for, in order to test its results.

const pw = require('playwright');
const assert = require('assert');

(async () => {
})();

Then, three objects are created:

  • A browser, which is an instance of a chromium, firefox of webkit browser. We also launch it using its launch() function.
  • Then, we create a new context, which is an individual anonymous session to navigate.
  • Finally, we create a single page, where we can load a URL, navigate and interact with its content.
const pw = require('playwright');
const assert = require('assert');

(async () => {
    const browser = await pw.chromium.launch();
    const context = await browser.newContext();
    const page = await context.newPage();

})();
← Create a PlaywrightJS TestUsing Mocha and Chai →
  • Create new test file