Introduction

Automated browser testing is essential for asserting the quality of the code you deliver when developing web applications. Some defects only become visible at the point when you tie everything together in your application. You want to catch these defects as early as possible to minimize the cost of fixing them. There are a lot of great tools out there to help you with this and I would like to highlight a tool named Playwright.

Microsoft released Playwright on 31 January 2020 and has an active community that keeps adding features. In this blog post, I will explain what Playwright is and how it can help you to improve the quality of your web application when you target various devices.
Playwright is a Node library that enables cross-browser web automation. You can also hook up existing test runners and target emulated devices.

You can find the complete repository on Github.

Prerequisites

In the next sections, I will explain how you can set up Playwright for an existing Angular application. Nevertheless, you can apply this to any front-end framework/library. In fact, there is zero Angular code in this blog post.

The basic requirements are:

You have a web application that you can run locally in your browser window.
You are using one of the supported test runners (Jest, Jasmine, AVA, or Mocha)

A default Angular project

When you create an angular project with the CLI, it creates an e2e folder with a protractor configuration by default. We will reuse this configuration to add Playwright.

Installation

Let’s start by installing playwright:

npm i --save-dev playwright

Now we create a new spec file, say “app-playwright.e2e-spec.ts”:

In the protractor.conf.js file we change specs to only include the Playwright file:

exports.config = { allScriptsTimeout: 11000, specs: [ './src/**/*playwright.e2e-spec.ts' ],

Next, let’s run Chrome in headless mode since Playwright runs its own instance of Chrome:

Your first test

We can write a first test in the app-playwright.e2e-spec.ts as follows:

import { chromium, Browser, Page } from 'playwright';

describe('Angular app homepage', () => {
  let browser: Browser;
  let page: Page;

  beforeAll(async () => {
    browser = await chromium.launch({ headless: false });
    page = await browser.newPage();
  });

  it('Should display the correct page title', async () => {
    await page.goto('https://localhost:4200');
    expect(await page.title()).toBe('MyAngular9AppPlaywright');
  });

  afterAll(async () => {
    await browser.close();
  });
});

The browser platform can be specified by importing chromium, Firefox, and/or Webkit. With the launch command, the browser will launch by default in headless mode.

We need a page object to start navigation and load the DOM. In the first test, Jasmine checks and asserts the page title.
A second example to check a DOM element can be specified as follows:

it('should display welcome message', async () => {
    await page.goto('https://localhost:4200');
    const titleBannerContents = await page.$eval(
      'app-root .content span',
      (el: HTMLElement) => el.innerText
    );
    expect(titleBannerContents).toBe(
      'my-angular9-app-playwright app is running!'
    );
  });

With the $eval function you can use a query selector syntax. Here it will search for the first occurrence of the <app-root> element, a descendant with the “content” class and finally a descendant with a <span> element. This corresponds to the following visual representation of the element:

We use the span element’s inner text to match it to the expected value. After the tests finish we clean up the browser object.
We run the test with the command “ng e2e” and the result will be the following:

The tests run too fast for the eye to follow. You can slow this down by the slowMo option:

<span class="pl-s1">browser</span><span> </span><span class="pl-c1">=</span><span> </span><span class="pl-k">await</span><span> </span><span class="pl-s1">chromium</span><span class="pl-kos">.</span><span class="pl-en">launch</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span> </span><span class="pl-c1">headless</span><span>: </span><span class="pl-c1">false</span><span class="pl-kos">,</span><span> </span><span class="pl-c1">slowMo</span><span>: </span><span class="pl-c1">100</span><span> </span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

Device emulation

With Playwright you can easily emulate a large variety of devices. Suppose you want to check how responsive your web application is. You can do this by targeting different viewport sizes. In Playwright you can specify this by the name of the device. You can find the full list of supported devices on Github Playwright.

Automated cross-browser testing with Playwright