Awesome Web Testing with Playwright

This repository contains the Automation Panda's official Playwright tutorial!

In this tutorial, you will progressively create and build a new test automation project using Playwright in TypeScript. This GitHub repository provides all instructions for the tutorial. It also provides example code for each chapter, so you can compare your code to the example if you get stuck.

Prerequisites

You will need the following tools:

1. A recent version of Node.js.
2. A good editor like Visual Studio Code with the Playwright extension.
3. A GitHub account with a Git client.

Tutorial setup

Before starting this tutorial, create the new project using the following commands:

mkdir awesome-playwright-tests
cd awesome-playwright-tests
npm init playwright@latest

Choose the default options for each prompt. Choose YES to install the Playwright browsers. This tutorial was created with Playwright 1.36.1, but later versions of Playwright should be okay to use.

This tutorial also uses a local web app for testing. This web app is located in a separate project. Put this project in a separate directory from awesome-playwright-tests. Clone it from GitHub and install its dependencies using the following commands.

cd ..
git clone https://github.com/filiphric/trelloapp-vue-vite-ts.git
cd trelloapp-vue-vite-ts
npm install

Warning: Complete these steps before taking this tutorial as part of a live session (like at a conference or a webinar). The Playwright browsers are a few hundred MBs large, and you could fall behind if you are stuck waiting for slow downloads over WiFi.

Tutorial instructions

There are eight chapters in total:

1. Setting modern web testing goals
2. Exploring Playwright's features
3. Writing our first test
4. Refactoring interactions with page objects
5. Breaking down tests by behaviors
6. Scaling tests with parallel execution
7. Running tests with GitHub Actions
8. Learning and practicing more

Chapter-by-chapter tutorial instructions are provided under the tutorial folder. This repository also contains a branch for each chapter's example code.

Ready to get started?

Go to Chapter 1 to start the tutorial!