Playwright Setup with TypeScript

Playwright has become one of the most popular frameworks for modern web automation testing. While it supports multiple programming languages, TypeScript is the preferred choice for many teams because it offers type safety, excellent IDE support, and seamless integration with Playwright. In this guide, you’ll learn how to setup Playwright with TypeScript, create your first project, understand the generated project structure, and run your first automated test.

By the end of this tutorial, you’ll have a fully working Playwright TypeScript automation framework.

Why Use TypeScript with Playwright?

TypeScript provides several advantages over plain JavaScript:

• Better code completion
• Compile-time error checking
• Improved maintainability
• Strong typing support
• Better developer experience

Many modern automation teams use TypeScript as their default Playwright language.

Prerequisites

Before installing Playwright, ensure you have:

• Basic JavaScript knowledge
• Node.js installed
• npm available
• VS Code (recommended)

Step 1: Verify Node.js Installation

Open a terminal and execute:

node --version

Example output:

v22.0.0

Check npm:

npm --version

Example:

10.5.0

If these commands work, you’re ready to continue.

Step 2: Create a New Project Folder

Create a new directory:

mkdir playwright-typescript-project

Move into the project:

cd playwright-typescript-project

Step 3: Initialize Node Project

Run:

npm init -y

This creates:

package.json

The package.json file manages project dependencies and scripts.

Step 4: Install Playwright

Install Playwright:

npm init playwright@latest

You will see several prompts.

Example Installation Questions

✔ TypeScript or JavaScript?
→ TypeScript
✔ Where to put tests?
→ tests
✔ Add GitHub Actions workflow?
→ Yes
✔ Install Playwright browsers?
→ Yes

Step 5: Installation Complete

Playwright automatically installs:

• Playwright package
• TypeScript support
• Example tests
• Browser binaries

Generated Project Structure

After installation:

playwright-typescript-project
│
├── tests
│   └── example.spec.ts
│
├── playwright.config.ts
│
├── package.json
│
├── package-lock.json
│
└── node_modules

Understanding Key Files

playwright.config.ts

Main configuration file.

Used for:

• Browser settings
• Timeouts
• Parallel execution
• Reporting

tests Folder

Contains test scripts.

Example:

tests/

All Playwright test cases are usually stored here.

package.json

Contains:

• Dependencies
• Scripts
• Project configuration

Step 6: Open Project in VS Code

Launch:

code .

Recommended extensions:

• Playwright Test for VS Code
• ESLint
• TypeScript Hero

Step 7: Run First Playwright Test

Execute:

npx playwright test

Playwright runs all test files automatically.

Example:

Running 1 test using 1 worker
✓ example.spec.ts

Step 8: View HTML Report

After execution:

npx playwright show-report

Playwright opens an interactive report.

The report contains:

• Passed tests
• Failed tests
• Screenshots
• Execution duration

Your First Playwright Test

Example:

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

Understanding the Test

Import Statements

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

Provides Playwright test functions.

Test Block

test('Verify homepage title', async ({ page }) => {

Defines a test case.

Navigate to Website

await page.goto('https://playwright.dev');

Launches the target website.

Assertion

await expect(page).toHaveTitle(/Playwright/);

Validates the page title.

Step 9: Run a Single Test File

Execute:

npx playwright test tests/example.spec.ts

Useful for debugging specific tests.

Step 10: Run Tests in Headed Mode

Normally Playwright runs headless.

To view browser execution:

npx playwright test --headed

A browser window opens during execution.

Step 11: Run Tests in Specific Browser

Chromium:

npx playwright test --project=chromium

Firefox:

npx playwright test --project=firefox

WebKit:

npx playwright test --project=webkit

Step 12: Debug Playwright Tests

Use:

npx playwright test --debug

Benefits:

• Step-by-step execution
• Element inspection
• Easier troubleshooting

Playwright Configuration Example

import { defineConfig } from '@playwright/test';
export default defineConfig({
  timeout: 30000,
  use: {
    headless: true
  }
});

This configures:

• Global timeout
• Headless execution

Common Installation Issues

Node.js Not Found

Cause:

Node.js not installed correctly.

Solution:

Reinstall Node.js and verify using:

node --version

Browser Installation Failed

Solution:

Run:

npx playwright install

Permission Errors

Solution:

Use administrator privileges or fix npm permissions.

VS Code Not Detecting Types

Solution:

Restart VS Code and verify TypeScript installation.

Best Practices

• Use TypeScript instead of JavaScript
• Store tests in dedicated folders
• Use meaningful test names
• Commit configuration files to Git
• Use Playwright reports
• Run tests in CI/CD pipelines

Frequently Asked Questions

Is TypeScript required for Playwright?

No. Playwright also supports JavaScript, Java, Python, and .NET.

Why do most teams use TypeScript?

Because it provides strong typing and better developer productivity.

Does Playwright install browsers automatically?

Yes, during installation.

Can I use VS Code with Playwright?

Yes. It is the most commonly used IDE for Playwright development.

Is Playwright free?

Yes. Playwright is open-source and free to use.

Conclusion

Setting up Playwright with TypeScript is straightforward and takes only a few minutes. The framework provides everything needed to start writing reliable automation tests, including browser management, reporting, debugging tools, and cross-browser support.

Now that Playwright is installed, the next step is learning how to write real-world test scripts using Playwright locators and assertions.

Related Articles

✓ What is Playwright?

✓ Playwright Architecture Explained

✓ Playwright Locators Explained

✓ Playwright Assertions Guide

✓ Playwright First Test Tutorial

✓ Complete Playwright Tutorial