Self-study Playwright

For those of you who prefer getting their hand dirty asap, this is a guide how to get started studying Playwright by yourself. It is for people with some previous experience on linux, js/ts and VSCode, and if you are not that familiar with some of these technologies, I suggest you to follow along with the lesson.

I recommend the videos by Playwright. They are quick and straight-forward. Debbie has some longer videos as well where she dwells a bit deeper in the technology and writing tests.

Introduction to Playwright

Get familiar what Playwright is, what it does and what are it's main features.

Playwright
Video: Playwright | Episode 1 - Introduction
Playwright vs Selenium vs Cypress: A Detailed Comparison

Installation

Pre-requirements

You should have a Node installed. At the time of writing this guide, Node version 20 is working well. You need to have npm installed as well.

Ubuntu 24.04 was not yet supported. I strongly prefer a desktop environment for testing with Playwright, since it has some powerful GUI tools. I was personally able to run tests on Windows WSL environment as well, but if you do have a virtual machine with Ubuntu Desktop 22.04, for example, I sugest using it in this lesson.

Install Microsoft VSCode. Even if your favourite text editor is VIM I recommend you to check out the VSCode integrations in this lesson.

VSCode installation

Install the Playwright VSCode extension and install Playwright within the VSCode.

Getting started - VS Code
Video: Playwright | Episode 2 - Getting Started

Running tests

Run the provided example tests in headless, browser and in the UI mode.

Video: Playwright | Episode 3 - Running Tests
Video: Playwright | Episode 4 - Writing Tests
Video: Playwright | Episode 5 - Debugging Tests

Extra resources

Video: Playwright | Episode 6 - Running Tests on CI
Video: Introduction to Playwright for End-to-End Testing with Debbie O'Brien | JS Drops

Exercise

See the exercise page for the exercise.