Introduction to Playwright – E2E Test Script Tutorial

/ Playwright Guide

As we have already seen in our Introduction to Automated Testing article, in the world of software development, product quality is very important. With the increasing complexity of web applications, it has become essential to have testing tools that are both powerful and easy to use. In this scenario, Playwright has emerged as one of the best frameworks for implementing End to End (E2E) tests on web applications.

In this article, we will explore what Playwright is, its key features, and how it can improve your testing workflow. We will also see a simple practical example on how to implement a script, run it, and analyze the results.

What is Playwright?

Playwright is an open-source framework developed by Microsoft that allows you to automate tests for web applications. Moreover it supports various browsers, including Chrome, Firefox and Safari, and allows you to write tests in languages ​​such as JavaScript or TypeScript, Python, Java and .NET. Its ability to interact with web pages in a way that is similar to a real user makes Playwright a powerful tool to ensure that your applications work as expected.

With Playwright you can simulate any user action such as clicking, typing, and navigation. You can also handle complex interactions (such as file uploads) or run tests in parallel, significantly reducing the time needed to run tests.

How to install Playwright?

Getting started with Playwright is easy. You can install it via classic package managers such as npm:

npm init playwright@latest

After launching the command in the console, you will be asked for some preliminary information such as the preferred language or the name of the folder where to save the tests. Below are the values ​​I used for the tutorial:

To use Playwright with languages ​​other than TypeScript or JavaScript, you need to download the relevant versions: Python; Java; .NET.

After the setup, inside the workspace we will find the following files:

• package.json: Node configuration file containing the project metadata and the list of dependencies.
• package-lock.json: completes the functionality of package.json and is used to lock the exact versions of the installed dependencies.
• playwright.config.ts: main Playwright configuration file that is used to customize the test settings, such as browsers to use, timeout options, output folder paths and more.
• tests-examples/demo-todo-app.spec.ts: contains some complete test examples (can be deleted).
• tests/example.spec.ts: file with starting structure for a generic test (can be deleted or used as a base to start with).

How to implement the first test?

For our first test we will try to implement an automatic navigation on Wikipedia. Let’s start by creating a wikitest.spec.ts file in the tests folder. When Playwright starts, it runs all the tests present under this directory by default. It is however possible to redefine the folder using the configuration file playwright.config.ts.

import { test, expect } from '@playwright/test';

test('check title', async ({ page }) => {
  await page.goto('https://en.wikipedia.org/wiki/Main_Page');
  await page.waitForSelector('#searchInput', {state:'visible'});
  await page.fill('#searchInput', 'This is a test');
  await page.click('#searchform button')
  await page.waitForURL('**\/This_is_a_test')
  expect(await page.title()).toContain('This is a test');
});

Below is an explanation of the steps performed by the test:

• Opens the URL for the Wikipedia home page;
• Waits for the page to load and for the search bar to be visible: the bar is identified by a CSS selector that refers to the searchInput id;
• Types “This is a test” in the search bar;
• Clicks on the “Search” button that is identified by a CSS selector;
• Waits for the page to load with the search result that should be https://en.wikipedia.org/wiki/This_is_a_test (the two * in the URL indicate that the first part can be ignored);
• Once landed on the page, it is checked that the title is “This is a test”.

With this simple example we have already learned to use some of the main functions of Playwright:

• test: used to define a test case using a descriptive name and a function that specifies what must be tested.
• goto: navigates a URL by opening it in the browser.
• waitForSelector: waits for an element to be active on the page by identifying it using a CSS selector. It is also possible to specify a list of state options to check such as whether the element is visible.
• fill: writes inside an input identified using a CSS selector.
• click: simulates a mouse click on an element of the page identified using a CSS selector.
• waitForURL: waits for a URL to be loaded.
• expect: indicates what the expected result of the test should be.
• title: returns the content of the title tag in the html page.
• toContain: indicates that the result of what is evaluated by expect is expected to contain a certain value.

Test execution and analysis of results

The test can be executed by launching the command in the terminal:

npx playwright test

At the end of the execution we will find a new file test-results/.last-run.json containing the result (passed or failed). A detailed report of the execution will also be generated: playwright-report/index.html. This report can be analyzed by running the command:

npx playwright show-report

As you can see from the image, the test is run multiple times, checking the outcome with multiple browser versions. You can add or remove browsers from the configuration file.

Web-UI

By default, Playwright runs tests simulating the browser’s operation but without providing evidence of navigation. In order to debug, it is very useful to have a graphical recording of the execution so you can easily understand where it gets stuck.

For this purpose, Playwright provides the ability to activate a Web-UI by adding –ui to the command to run the test:

npx playwright test --ui

By running the test using the “play” button in the left bar, you can analyze the timeline of the operations by viewing the image corresponding to the step and the point in the code where the execution has reached.

Playwright is a powerful and versatile tool for testing web applications. In conclusion, with its cross-browser support, the ability to run tests in parallel, and its full automation capabilities, it is an excellent choice for developers who want to ensure the quality of their applications.