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:

1. an app directory with the web app to test
2. a tutorial directory with all instructions by chapter
3. a chapter-code directory with example code for each chapter

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.
4. An AI coding agent like Claude, Cursor, or Copilot (if you want to try Playwright's AI capabilities).

Tutorial setup

Tip

If you have a GitHub account, you should fork this repository so that you have your own copy of it. Then, you can make your own commits and pushes to better record your progress.

Before starting this tutorial, clone this repository to your machine and set up the project:

# Clone the repository
# If you forked it, change the username in the repository path
git clone https://github.com/AutomationPanda/awesome-web-testing-playwright.git

# Change directory into the web app directory
cd awesome-web-testing-playwright/app

# Install the dependencies
npm install

# Initialize Playwright
npm init playwright@latest

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

Important

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 core chapters:

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

An optional bonus chapter teaches how to use Playwright’s CLI and MCP with AI coding assistants to generate tests.

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

Ready to get started?

Go to Chapter 1 to start the tutorial!