DEV Community

Cover image for Playwright Tutorial for Beginners: Your First Test in 10 Minutes
Anton Gulin
Anton Gulin

Posted on Originally published at anton.qa

Playwright Tutorial for Beginners: Your First Test in 10 Minutes

#beginners #webdev #playwright #testing

What You'll Learn

By the end of this tutorial, you'll have:

  • Playwright installed on your machine
  • Written and run your first automated test
  • Understood the basic Playwright concepts
  • A foundation to build real-world test suites Total time: about 10 minutes. Let's go.

Prerequisites

You need Node.js 18+ installed. Check your version:

node --version

If you need to install Node.js, download it from nodejs.org.

That's it. No other dependencies required.

Step 1: Create Your Project

Open your terminal and create a new folder:

mkdir playwright-tutorial

cd playwright-tutorial

Step 2: Install Playwright

Run the Playwright installer:

npm init playwright@latest

You'll see some prompts. Accept the defaults:

  • TypeScript or JavaScript? → TypeScript (recommended)
  • Where to put tests? → tests
  • Add GitHub Actions? → Yes (optional, but useful later)
  • Install browsers? → Yes This installs Playwright, downloads browser binaries, and creates a basic project structure.

Step 3: Explore the Project Structure

After installation, you'll see:

  • tests/: Your test files go here
  • playwright.config.ts: Configuration file
  • tests/example.spec.ts: A sample test (we'll replace this)

Step 4: Write Your First Test

Delete the example test and create a new file called tests/first.spec.ts:

import { test, expect } from '@playwright/test';
test('homepage has correct title', async ({ page }) => {
  await page.goto('https://playwright.dev');
  await expect(page).toHaveTitle(/Playwright/);
});
Enter fullscreen mode Exit fullscreen mode

What this does:

  • test(): Defines a test with a name
  • page.goto(): Navigates to a URL
  • expect().toHaveTitle(): Asserts the page title contains "Playwright"

Step 5: Run Your Test

In your terminal:

npx playwright test

You should see:

Running 1 test using 1 worker
✓ first.spec.ts:3:1 › homepage has correct title (1.2s)
1 passed (2.1s)
Enter fullscreen mode Exit fullscreen mode

Congratulations! You just ran your first Playwright test.

Step 6: See the Test Report

Playwright generates beautiful HTML reports. View it:

npx playwright show-report

This opens a browser with your test results, including timing, screenshots, and traces.

Step 7: Run Tests in UI Mode (Game Changer)

Playwright's UI mode lets you watch tests run in real-time:

npx playwright test --ui

This opens a visual interface where you can:

  • Watch tests execute step-by-step
  • Inspect DOM at any point
  • Debug failures visually
  • Re-run individual tests This is my favorite Playwright feature for development.

Step 8: Add More Assertions

Let's expand our test to click a link and verify navigation:

import { test, expect } from '@playwright/test';
test('can navigate to getting started page', async ({ page }) => {
  await page.goto('https://playwright.dev');
  // Click the Getting Started link
  await page.getByRole('link', { name: 'Get started' }).click();
  // Verify we're on the right page
  await expect(page).toHaveURL(/.*intro/);
  // Check the heading exists
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});
Enter fullscreen mode Exit fullscreen mode

New concepts:

  • getByRole(): Finds elements by their accessibility role (best practice)
  • click(): Clicks an element
  • toHaveURL(): Asserts the current URL matches a pattern
  • toBeVisible(): Asserts an element is visible on page

Step 9: Use the Code Generator

Playwright can generate test code by recording your actions:

npx playwright codegen playwright.dev

This opens a browser. Click around, and Playwright writes code for you in real-time. Copy the generated code into your test file.

This is extremely useful for learning locators and speeding up test creation.

Understanding Key Concepts

Locators:

Playwright finds elements using locators. Best practices:

  • getByRole(): By accessibility role (button, link, heading)
  • getByText(): By visible text
  • getByLabel(): By form label
  • getByTestId(): By data-testid attribute Avoid CSS selectors and XPath when possible. Role-based locators are more resilient.

Auto-waiting:

Playwright automatically waits for elements to be ready before interacting. No more:

await page.waitForSelector('.button'); // Not needed!

Just write:

await page.click('.button'); // Playwright handles waiting

This dramatically reduces flaky tests.

Next Steps

Now that you have the basics:

  • Add more tests: Start testing your own application
  • Learn Page Object Model: Organize tests for maintainability
  • Set up CI/CD: Run tests on every pull request
  • Explore API testing: Playwright also tests REST APIs

Common Beginner Mistakes to Avoid

1. Using sleep/delay:

Bad:

await page.waitForTimeout(5000);

Good: Let Playwright's auto-waiting handle it, or wait for specific conditions.

2. Fragile locators:

Bad:

page.locator('#app > div:nth-child(3) > button')

Good:

page.getByRole('button', { name: 'Submit' })

3. Not using test isolation:

Each test should be independent. Don't rely on state from previous tests.

Resources

  • Official docs: playwright.dev/docs/intro

  • Test generator:
    npx playwright codegen [url]

  • UI mode:
    npx playwright test --ui

  • Report viewer:
    npx playwright show-report

Need Hands-On Help?

If you're building a test automation framework for your team and want guidance from someone who's done it at Apple and Fortune 500 companies, I offer consulting and training.

Learn more about working with me

Anton Gulin is the AI QA Architect, the first person to claim this title on LinkedIn. He builds AI-powered test automation systems where AI agents and human engineers collaborate on quality. Former Apple SDET (Apple.com / Apple Card pre-release testing). Find him at anton.qa or on LinkedIn.

Top comments (0)