Do I need to install browsers separately?

The initializer downloads them for you. If you clone a project onto a new machine, run npx playwright install to fetch the browser binaries.

Is Playwright only for TypeScript?

No. Playwright also supports JavaScript, Python, Java, and .NET. The Playwright Test runner used in this course is for TypeScript and JavaScript and understands .ts files without a separate build step.

Playwright with TypeScript: Setup and Your First Test

Introduction

Playwright is an open-source end-to-end testing framework that drives Chromium, Firefox, and WebKit with a single API. It has first-class TypeScript support, so there is nothing extra to configure. This is the first lesson of a nine-part course that takes you from installation to a CI pipeline.

Prerequisites

Node.js 18 or newer installed
Basic TypeScript or JavaScript knowledge
A code editor such as Visual Studio Code

Step-by-Step Guide

Step 1: Create a project

Run the Playwright initializer in an empty folder. When prompted, choose TypeScript, accept the default tests folder, and let it install the browsers. You can also opt in to a GitHub Actions workflow now; we'll customize it in the last lesson.

mkdir playwright-demo
cd playwright-demo
npm init playwright@latest

Step 2: Explore the generated files

The initializer creates a config file, an example test, and a sample demo app test under tests-examples to learn from. The config file is where browsers, retries, and reporters are set.

playwright-demo/
  tests/
    example.spec.ts
  tests-examples/
    demo-todo-app.spec.ts
  playwright.config.ts
  package.json

Step 3: Read your first test

A test is an async function that receives fixtures such as page. Assertions use expect, and Playwright waits for conditions to be met automatically.

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

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

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

Step 4: Run the tests and open the report

By default, tests run headless and in parallel across the configured browsers. The HTML report shows each test, its steps, and any failure details.

npx playwright test
npx playwright test --headed
npx playwright show-report

Step 5: Run just what you need

Target one file, one browser, or tests whose title matches a pattern while you develop.

npx playwright test tests/example.spec.ts
npx playwright test --project=chromium
npx playwright test -g "has title"

FAQs

Do I need to install browsers separately?: The initializer downloads them for you. If you clone a project onto a new machine, run npx playwright install to fetch the browser binaries.
Is Playwright only for TypeScript?: No. Playwright also supports JavaScript, Python, Java, and .NET. The Playwright Test runner used in this course is for TypeScript and JavaScript and understands .ts files without a separate build step.

Summary

You now have a working Playwright and TypeScript project, know what the generated files do, and can run tests and read the report. Next, learn how to find and interact with elements reliably.