Your first test

A program that uses a browser

Playwright is a tool that controls a web browser with code. A test opens a page, does what a person would do, and checks the result. You write the test once. You can run it as often as you like, and it does not get tired.

On the right of this lesson is the practice browser. It shows a small sample app called Absolute Path Todos. When you press Run tests, your tests control that browser. You can watch each test move through the app. A banner above the page shows which test is running.

The app is slow on purpose. It waits a short time before it shows the todos, as a real server does. This matters later in the course.

A test file

A test file has a standard shape.

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

test('opens the todo app', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveTitle('Absolute Path Todos');
});

Read it from the top.

• The import line brings in test and expect. Every Playwright file starts with it.
• test('title', async ({ page }) => { ... }) defines one test. The title tells a person what the test checks.
• page is the browser tab. Playwright gives a new, clean page to each test.
• await page.goto('/') opens the first page of the sample app. In a real project you write the full address, or you set a baseURL once.
• expect(page).toHaveTitle(...) is an assertion. It checks a fact. When the fact is wrong, the test fails.

Most Playwright calls take time, so they return a promise. Write await in front of them. A call without await runs in the background, and the test can end before it finishes.

Read the report

The output shows one line for each test, and a count at the end.

When a test fails, the report shows the line of your code, then Expected and Received. Expected is what your test wanted. Received is what the page had. Read these two lines first. Most failures are a difference between them.

Your turn

The file has one test, and it has a mistake. Run it, read the report, and fix it. Then add two tests of your own. Give each test its own page.goto('/').