Writing Your First Test
Let's write a simple script to verify our setup is working correctly. Playwright's TypeScript support offers full type safety for your locators and assertions.
1. Create the Spec File
Inside the tests/ folder, create a new file named example.spec.ts. The .spec.ts extension tells Playwright this is a test file.
2. Write the Code
Paste the following code into your new file. This test will navigate to Playwright's website and verify the title.
typescript
import { test, expect } from '@playwright/test';
test('has title', async ({ page }) => {
// 1. Navigate to the URL
await page.goto('https://playwright.dev/');
// 2. Assert the title contains 'Playwright'
await expect(page).toHaveTitle(/Playwright/);
});
3. Run the Test
You can run the test directly from the terminal.
Run in Headless Mode (Fastest, default):
bash
npx playwright test
Run in Headed Mode (Watch the browser execute):
bash
npx playwright test --headed
4. View the HTML Report
By default, Playwright generates a beautiful HTML report after your tests finish.
bash
npx playwright show-report
This will open a local web server showing exactly what passed, failed, and how long each step took!
5. Using @tags for Filtering
Tags allow you to organize and filter your execution suite (e.g., only running smoke tests).
typescript
test('Checkout flow @smoke', async ({ page }) => {
// ... test code
});
Run specific tags using grep:
bash
npx playwright test --grep "@smoke"
6. Playwright CLI Cheat Sheet
Here are the most common commands you will use daily:
bash
Run all tests
npx playwright test
Run a specific file
npx playwright test example.spec.ts
Run tests in headed mode (visible browser)
npx playwright test --headed
Run tests with the UI Mode (Interactive debugger)
npx playwright test --ui
Run tests in a specific browser
npx playwright test --project=chromium
Run tests in debug mode (Step-by-step execution)
npx playwright test --debug