🎯 What You Will Learn
Install Playwright Test, write a resilient TodoMVC test, run it headed or in UI mode, and read the HTML report.
- Initialize Playwright Test in a project
- Write a complete TodoMVC end-to-end test
- Use locators and web-first assertions
- Run headed, UI, debug, and report workflows
Initialize Playwright Test
Run the official initializer in your project. Choose TypeScript, keep the tests folder, and install browser binaries when prompted.
npm init playwright@latestUnderstand the Generated Files
The config controls browsers, retries, reports, and shared options. Test files contain user journeys and assertions.
| Path | Purpose |
|---|---|
| playwright.config.ts | Runner and browser-project configuration |
| tests/*.spec.ts | End-to-end test files |
| playwright-report/ | Generated HTML report |
| test-results/ | Failure artifacts such as traces and screenshots |
Write the Todo Test
The test uses a label-based locator for the input and verifies text plus the remaining-item count.
import { test, expect } from '@playwright/test';
test('adds a todo item', async ({ page }) => {
await page.goto('https://demo.playwright.dev/todomvc/');
await page
.getByPlaceholder('What needs to be done?')
.fill('Learn Playwright Test');
await page.keyboard.press('Enter');
await expect(page.getByText('Learn Playwright Test')).toBeVisible();
await expect(page.getByText('1 item left!')).toBeVisible();
});Run the Test
The default command runs configured projects headlessly. Start with one file while learning.
npx playwright test tests/todo.spec.ts1 passed
Watch It in Headed Mode
Headed mode shows the browser and is useful while learning or investigating an interaction.
npx playwright test tests/todo.spec.ts --headedUse UI Mode
UI mode offers watch behavior, step details, filtering, and integrated trace inspection.
npx playwright test --uiDebug One Test
Debug mode opens Playwright Inspector and pauses execution so you can step through the test.
npx playwright test tests/todo.spec.ts --debugOpen the HTML Report
After a run, open the report to review outcomes, projects, duration, errors, and attached artifacts.
npx playwright show-reportNext improvement: Keep test names behavior-focused and add more assertions only when they protect meaningful user outcomes.
Recap
- The initializer creates a complete test-runner setup.
- Tests receive an isolated page fixture.
- User-facing locators and web-first assertions improve resilience.
- Headed, UI, debug, and report modes support different stages of development.
Checkpoint: You have completed the workflow and have a repeatable reference for your next Playwright project.