Introduction to Playwright and TypeScript

Your Testing Toolkit

When you build a web application, you need to be sure it works as expected for your users. End-to-end (E2E) testing is how you do that. It involves automating a browser to simulate real user actions, from clicking buttons to filling out forms, to verify that your entire application flow is correct.

Playwright is a modern tool created by Microsoft that makes this process smooth and reliable. It’s designed to automate browsers like Chromium, Firefox, and WebKit, all with a single API.

What makes Playwright stand out? One of its best features is its auto-waiting capability. It automatically waits for elements to be ready before interacting with them, which drastically reduces flaky tests that fail randomly. It's also incredibly fast, allowing for parallel test execution to get you feedback quickly.

Playwright is a Node.js library for browser automation.

Why Add TypeScript?

While you can write Playwright tests in plain JavaScript, using TypeScript is a game-changer. TypeScript is a superset of JavaScript, meaning it's just JavaScript with added features. The most important feature is static typing.

Imagine you're following a recipe. A JavaScript recipe might say "add some flour." How much is "some"? You have to guess. A TypeScript recipe would say "add 200 grams of flour." It's precise and leaves no room for error. By defining the "types" of data your code expects, TypeScript helps you catch bugs before you even run your tests. This makes your test code easier to read, refactor, and maintain as your project grows.

TypeScript has evolved far beyond being “just JavaScript with types.” Its sophisticated type system enables patterns that can make your code more expressive, safer, and maintainable.

Getting Set Up

Setting up a new project with Playwright and TypeScript is straightforward. You'll need Node.js installed on your system. Once you have that, you can get started in a new project folder with a single command.

Open your terminal and run:

npm init playwright@latest

This interactive command will guide you through the setup. It will ask you a few questions:

Whether to use TypeScript or JavaScript (choose TypeScript).
The name of your test folder.
Whether to add a GitHub Actions workflow for continuous integration.

Once it's done, it will install Playwright, create a configuration file (playwright.config.ts), and generate an example test to get you started. It handles all the TypeScript setup for you.

A First Look at the Code

The installer creates an example test file, typically tests/example.spec.ts. Let's look at a simplified version of what you might find inside.

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

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

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Click the get started link.
  await page.getByRole('link', { name: 'Get started' }).click();

  // Expects the URL to contain intro.
  await expect(page).toHaveURL(/.*intro/);
});

Let's break this down:

import { test, expect } from '@playwright/test'; imports the core functions you need from the Playwright library.
test(...) defines a new test case. The first argument is the test name, and the second is a function that contains the test logic.
async ({ page }) is how Playwright provides a fresh, isolated browser page for each test. The { page } part is where TypeScript helps, as it knows page is a specific Page object with methods like goto() and getByRole().
await page.goto(...) navigates the browser to a specific URL.
await expect(page)... is an assertion. It checks if a condition is met. If not, the test fails.

This structure forms the foundation of every Playwright test. You'll simply expand on these patterns to simulate more complex user journeys.

Playwright Testing with TypeScript