The New Kid On The Block: Microsoft Playwright

Testing web applications is unpopular with many developers because it is tedious. Test automation is a prerequisite for efficient development of a high quality web application. Features can be delivered to customers faster, because changes can be delivered within minutes instead of days. Microsoft has launched Playwright, a new end-to-end testing tool that makes a lot of things easier.

Playwright is designed to support 'every' web browser on 'any' operating system. In fact, web applications can be tested with modern browsers such as Chrome, Firefox, Safari, Edge under the operating systems of Apple, Linux and Windows. In each case, the Chromium, WebKit and Firefox rendering engines, which are available as open source, are used. The tool also supports tests with mobile browser versions.

Polyglot🔗🔗

Tests can be written in the most used programming languages:

• Typescript, JavaScript
• Python
• .NET
• Java

This breadth browser and platform support is made possible by the approach of relying on the Chrome Debugger Protokoll protocol.

Tests are processed in parallel. They wait until the browser has loaded the page. Developers have a test inspector and a test generator at hand as support.

Playwright can also very easily take images of the web page and use them as a basis for test cases. Videos of the test process can also be generated.

An example can illustrate how to write non-blocking tests with async and await, here in JavaScript:

	const { test, expect } = require('@playwright/test');
	
	test('basic test', async ({ page }) => {  
	
	  await page.goto('https://github.com/login');
	
	  await page.fill('input[name="login"]', 'USER NAME');
	
	  await page.fill('input[name="password"]', 'PASSWORD');
	
	  await page.click('text=Sign in');
	
	});

Developers write the tests locally in their development environment and then run them integrated in the Continuous Integration pipelines.

Conclusion🔗🔗

By relying on locator functions, Playwright reduces the brittleness of tests we have experienced in the past with other testing tools.

test('display image', async ({ page }) => {
  const url = 'about/';
  await page.goto(baseURL + url);
  await expect(page).toHaveURL(baseURL + url);
  console.log(page.url)
  expect(await page.locator('img[alt="Andreas Kapp"]').screenshot()).toMatchSnapshot('about.png');

});

One of the major obstacles to test automation so far has been the cost and effort of maintaining the tests in the long run.

Today seems to be the day when we see Selenium and Cypress disappearing in the rearview mirror.