📎 😞 🔦 Autotests based on playwright and jest ♀️ 🛷 🖖🏽

For a long time, Selenium has been the main tool for test automation. However, there are several decent alternatives currently on the market such as Cypress, Puppeteer, and Playwright . Playwright we will consider in this article.

Playwright is a node js test automation library with a single API for different browsers (Chromium, Firefox and WebKit). Developed by Microsoft. In my opinion, the main advantage of Playwright is its close integration with browsers and the ability to interact with browsers at a level inaccessible to Selenium.

An open source product, Kanboard, is deployed as a testing object .

For testing, we will use node js, playwright, jest, jest-playwright-preset and jest-html-reporters. We use Playwright to interact with browsers. We use Jest as a test runner. Jest-html-reporters are needed to generate HTML report.

The first step is to create a node project and install all the necessary dependencies:

npm init

npm i -D playwright

npm install --save-dev jest

npm install -D jest-playwright-preset

npm install jest-html-reporters --save-dev

After executing these commands, we get package.json and node_modules with the required dependencies. In order to set up a report and a folder with tests, we make changes to the package.json for jest:

{
  "name": "kb-playwright-tests",
  "version": "1.0.0",
  "description": "An automation test framework which is based on playwright.",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "author": "",
  "license": "ISC",
  "jest": {
    "testMatch": [
      "**/tests/**/*.[jt]s?(x)",
      "**/?(*.)+(spec|test).[jt]s?(x)"
    ],
    "reporters": [
      "default",
      "jest-html-reporters"
    ]
  },
  "devDependencies": {
    "jest": "^26.6.3",
    "jest-html-reporters": "^2.1.0",
    "jest-playwright-preset": "^1.4.0",
    "playwright": "^1.6.1"
  }
}

The next step is to create page objects:

const { DashboardPage } = require("./DashboardPage");
var config = require('../config');

class SignInPage {
  constructor(page) {
    this.page = page;
  }

  async openSignInPage() {
    await this.page.goto(config.web.url);
  }

  async signInAs(user) {
    await this.page.fill("css=#form-username", user.username);
    await this.page.fill("css=#form-password", user.password);
    await this.page.click("css=button[type='submit']");
    return new DashboardPage(this.page);
  }
}
module.exports = { SignInPage };

 class DashboardPage {
  constructor(page) {
    this.page = page;
  }
}
module.exports = { DashboardPage };

The test will look like this:

const { chromium } = require("playwright");
const { SignInPage } = require("../pageobjectmodels/SignInPage");
const { roles } = require("../enums/roles");
const assert = require("assert");
var config = require("../config");
let browser;
let page;

beforeAll(async () => {
  console.log("headless : " + config.web.headless);
  console.log("sloMo : " + config.web.sloMo);
  browser = await chromium.launch({
    headless: config.web.headless == "true",
    slowMo: parseInt(config.web.sloMo, 10),
  });
});
afterAll(async () => {
  await browser.close();
});
beforeEach(async () => {
  page = await browser.newPage();
  if (config.web.networkSubscription) {
    page.on("request", (request) =>
      console.log(">>", request.method(), request.url())
    );
    page.on("response", (response) =>
      console.log("<<", response.status(), response.url())
    );
  }
});
afterEach(async () => {
  await page.close();
});

test("An admin is able to see a dashboard", async () => {
  const signInPage = new SignInPage(page);
  await signInPage.openSignInPage();
  const dashboardPage = await signInPage.signInAs(roles.ADMIN);
  const dashboard = await dashboardPage.page.$("#dashboard");
  assert(dashboard);
});

The line browser = await chromium.launch({headless: config.web.headless == "true",slowMo: parseInt(config.web.sloMo, 10),});allows you to configure the headless mode and delay.

The code block beforeEachlets you set up a network entry that looks like this:

>> GET http://localhost/kanboard/
<< 302 http://localhost/kanboard/
>> GET http://localhost/kanboard/?controller=AuthController&action=login
<< 200 http://localhost/kanboard/?controller=AuthController&action=login
>> GET http://localhost/kanboard/assets/css/vendor.min.css?1576454976
>> GET http://localhost/kanboard/assets/css/app.min.css?1576454976
>> GET http://localhost/kanboard/assets/js/vendor.min.js?1576454976
....

In order to be able to control these parameters, add config.js

var config = {};
config.web = {};

config.web.url = process.env.URL || "http://localhost/kanboard/";
config.web.headless = process.env.HEADLESS || false;
config.web.sloMo = process.env.SLOMO || 50;
config.web.networkSubscription = process.env.NETWORK;

module.exports = config;

You can now use the following commands to run tests:

npm run test test run with default values (Headless false, sloMo 50, networking off)

NETWORK = 'on' npm run test test run with values Headless false, sloMo 50, networking on

HEADLESS = 'true' npm run test test run with values Headless true, sloMo 50, networking off

After running the tests, a report will be generated - jest_html_reporters.html

Thank you for your attention and I hope this article was helpful to you.

Autotests based on playwright and jest

More articles: