Paavo's Playwright lesson

Hi everyone and welcome to the Playwright lesson!

We will start the lesson with a brief introduction to Playwright. What Playwright is, what does it do, what are it's features and how does it differ to other end-to-end testing tools.

Secondly we are going to go through some examples together. First we are going to take a look at a test code. Then we're going to install Playwright using VSCode extension. With the Playwright installed we will try to run some tests in headless, browser and UI mode.

Finally you are given the exercise for which you will have few hours time to do. Afterwards we're go through teachers solutions and some discussion, and finally resources for further studies are given.

If you are the type who prefers to read and study things by your own, see the self-study page for resources. You don't need to follow the lesson if you don't want to.

This is not a lesson how to write great tests, but rather an introduction for using Playwright as a tool.

Playwright

Playwright is an automated end-to-end acceptance-testing tool developed by Microsoft. Acceptance testing is the last phase of testing where the business and end user requirements are tested. Usually this test phase is automated in the CI/CD pipeline.

Some of it's core features are:

Cross-browser, cross-platform, cross-language
Auto-wait
- Playwright automatically waits for elements to be ready. No more artificial delay-times!
Auto-retry
Test tracing
Multiple everything
- Tabs, origin, users
- Run the same tests with varying users
Tests are indisinquishable from a real end-user
Full isolation for tests
- Always a brand new browser profile for every test
Great VSCode integrations!

Read more:
Playwright
Playwright Docs

Test examples

Playwright test in Typescript

Usually Typescript tests are written in Typescript. Typescript is a Javascript based multipurpose/paradigm programming language which basically adds static typing and tooling on top of Javascript.

If you are not that familiar with TS/JS do not worry! We do not need a deep level of knowledge on them for us to write tests. We can do so much with just modifying and extending examples Playwright provides. Let's take a look at a simple test.

test.spec.ts

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

test('has title', async ({ page }) => {
  await page.goto('https://www.jamk.fi/fi');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Jyväskylän ammattikorkeakoulu | Jamk/);
});

So a few simple things happens here:

We import the test() and expect() function from @playwright/test
We use the test() function by passing it a few parameters
- Name of the test as a string
- An asynchronoys anonymous function with the page object
In the function itself we direct the test to...
- navigate to JAMK web page
- expect the page to have title "Jyväskylän ammattikorkeakoulu | Jamk"
With the expect assertion this test will return pass or fail

The tests are usually really simple syntax-wise and only a basic level of programming knowledge is needed. You might want to go through a basic Javascript/Typescript course if the syntax looks too weird for you.

Read more:
Typescript
Writing tests

Installing Playwright on Ubuntu and VSCode

In our case we are going to run our tests in linux desktop environment. Playwright requires some tools to be pre-installed so that we can install Playwright itself.

To install Playwright you should first install NodeJS and npm. At the time of writing this lesson, Playwright runs great on Node version 20. Also, Playwright couldn't be properly installed on Ubuntu Desktop 24.04 yet.

We are going to run our tests in VSCode in this lesson. We can install the Playwright straigh in the VSCode through the Playwright extension. This makes getting started really fast.

When all the preconditions are met we can continue by simply installing the extension called Playwright Test for VSCode. Then we can press shift+ctrl+p and write Test: Install Playwright.

Exercise

Exercise can be found from the exercise page.