Playwright for Beginners: Where to Start in 2026

node -v                      # check Node.js is installed
mkdir my-playwright && cd my-playwright
npm init playwright@latest   # choose TypeScript, tests folder
npx playwright test
npx playwright show-report

// tests/first.spec.ts
import { test, expect } from "@playwright/test";

test("Playwright homepage has the right title", async ({ page }) => {
  await page.goto("https://playwright.dev/");
  await expect(page).toHaveTitle(/Playwright/);
});

test("Get started link opens the intro page", async ({ page }) => {
  await page.goto("https://playwright.dev/");
  await page.getByRole("link", { name: "Get started" }).click();
  await expect(page.getByRole("heading", { name: "Installation" })).toBeVisible();
});

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

test("todo list adds two items", async ({ page }) => {
  await page.goto("https://demo.playwright.dev/todomvc");
  const input = page.getByPlaceholder("What needs to be done?");
  await input.fill("Learn locators");
  await input.press("Enter");
  await input.fill("Learn assertions");
  await input.press("Enter");
  await expect(page.getByTestId("todo-item")).toHaveCount(2);
  await expect(page.getByText("2 items left")).toBeVisible();
});

# Let Playwright suggest locators: open the inspector and hover elements
npx playwright codegen https://demo.playwright.dev/todomvc
# Or debug one test step by step:
npx playwright test tests/first.spec.ts --debug

import { defineConfig, devices } from "@playwright/test";

export default defineConfig({
  testDir: "./tests",
  retries: process.env.CI ? 2 : 0,
  reporter: "html",
  use: {
    baseURL: "https://demo.playwright.dev",
    trace: "on-first-retry",
  },
  projects: [
    { name: "chromium", use: { ...devices["Desktop Chrome"] } },
  ],
});

# .github/workflows/playwright.yml
name: playwright
on: [push]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test

Days 1-10: setup and basics
Day 1   Install Node.js and Playwright, run examples
Day 2   Write first test with goto and toHaveTitle
Day 3   Learn getByRole and click
Day 4   Forms: fill, press, getByLabel
Day 5   Assertions: toBeVisible, toHaveText, toHaveCount
Day 6   Use codegen, then clean up its output
Day 7   Debug a test with --debug
Day 8-10 Write 5 tests for the TodoMVC demo

Days 11-20: structure and stability
Day 11  test.describe and test.beforeEach
Day 12  baseURL in config
Day 13  Remove any waitForTimeout from your tests
Day 14  Traces: run with --trace on and open one
Day 15  Simple page object for the todo page
Day 16-20 Write 5 more tests, keep each short and focused

Days 21-30: share and polish
Day 21  Push the project to GitHub
Day 22  Add the GitHub Actions workflow
Day 23  Add Firefox to projects
Day 24  Write a README: what, how to run, what you learned
Day 25  Add one API test with the request fixture
Day 26-30 Review, refactor names, fix any flaky test