Playwright e2e testing - from cowboy to confidence

Maybe you’re a bit of a cowboy.

Maybe you already have unit and integration tests, but you still keep running through user flows manually in your browser.

Or you’re a more seasoned Playwright tester, but you’re looking to brush up on the latest and greatest, and improve your setup.

In this tutorial, we will end-to-end test a realistic software as a service application from scratch. We will cover all of the Playwright features that you need to be productive in your day to day.

So come along, and let’s get you from cowboy to confidence.

Source code

The full repository for this tutorial can be found here.

The repository contains a software as a service application that has login, logout, user modification, team management and checkout functionality. The application is built with Next.js and can either be run locally from your command line or you can test against our pre-deployed version of it.

Getting started with the tutorial repository

To get started, you will need to:

• Clone the repository: git clone https://github.com/endformdev/playwright-tutorial && cd playwright-tutorial
• Make sure you have pnpm installed on your system
• Install the dependencies: pnpm install
• Checkout the branch for the stage you want to start from, for example: git checkout stage-0-baseline

We will be testing against a realistic dummy application. You can either:

• Run the tests against our pre-deployed application at https://endform-playwright-tutorial.vercel.app
• Run the application locally, for this option you will need to:
  • Set up .env and run migrations on a local SQLite database: pnpm db:setup
  • Run the application: pnpm dev, or for better performance pnpm build && pnpm start
  • Check that it loads correctly at http://localhost:3000

Choose where to start

Each step of the tutorial has a branch associated with it, with all of the work included from the previous tutorial steps. You can choose to start from the beginning, or you can start from a specific step, depending on what you’re interested in and what your previous experience with Playwright is.

Here’s what we’ll cover in each step:

Practical playwright setup Setting up a Playwright project to make your future testing life easier.

Generate tests with Playwright MCP Use the Playwright MCP with your AI to generate tests for your application.

Speeding up with Endform Use Endform to speed up your test suite.

Understanding test results Understand test results using Playwright traces and the Endform dashboard.