Initialize Playwright with TypeScript

Beginner10 minTrending

Set up Playwright Test from scratch with TypeScript, configure browsers, create your first test, and run it across multiple browsers.

Prerequisites

-Node.js 18+ installed
-A web application to test

Steps

Initialize Playwright in your project

Run the Playwright installer to scaffold config, example tests, and download browsers.

$ npm init playwright@latest

The installer asks interactive questions. Choose TypeScript, tests/ directory, and yes to GitHub Actions workflow for CI-ready setup.

Install specific browsers

Download only the browsers you need to save disk space.

$ npx playwright install chromium firefox

Run the example test

Execute the scaffolded tests to verify the setup works.

$ npx playwright test

Run tests with the UI mode

Open the interactive test runner for visual debugging.

$ npx playwright test --ui

UI mode provides a time-travel debugger, live locator picker, and watch mode for rapid test development.

View the HTML report

Open the built-in test report to review results and traces.

$ npx playwright show-report

Full Script

full-script.sh

#!/bin/bash
# Playwright Test Setup
set -euo pipefail

PROJECT_DIR=${1:-.}

echo "=== Initializing Playwright ==="
cd "$PROJECT_DIR"

# Install Playwright
npm install -D @playwright/test

# Install browsers
npx playwright install chromium firefox webkit

# Create config if it doesn't exist
if [ ! -f "playwright.config.ts" ]; then
cat > playwright.config.ts << 'CONFIG'
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
  ],
});
CONFIG
fi

# Create example test
mkdir -p tests
cat > tests/example.spec.ts << 'TEST'
import { test, expect } from '@playwright/test';

test('homepage loads successfully', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveTitle(/.+/);
});
TEST

echo ""
echo "=== Setup Complete ==="
echo "Config:  playwright.config.ts"
echo "Tests:   tests/"
echo ""
echo "=== Commands ==="
echo "Run tests:    npx playwright test"
echo "UI mode:      npx playwright test --ui"
echo "Show report:  npx playwright show-report"

FAQ

Discussion

Loading comments...

#!/bin/bash # Playwright Test Setup set -euo pipefail PROJECT_DIR=${1:-.} echo "=== Initializing Playwright ===" cd "$PROJECT_DIR" # Install Playwright npm install -D @playwright/test # Install browsers npx playwright install chromium firefox webkit # Create config if it doesn't exist if [ ! -f "playwright.config.ts" ]; then cat > playwright.config.ts << 'CONFIG' import { defineConfig, devices } from '@playwright/test'; export default defineConfig({ testDir: './tests', fullyParallel: true, forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, workers: process.env.CI ? 1 : undefined, reporter: 'html', use: { baseURL: 'http://localhost:3000', trace: 'on-first-retry', screenshot: 'only-on-failure', }, projects: [ { name: 'chromium', use: { ...devices['Desktop Chrome'] } }, { name: 'firefox', use: { ...devices['Desktop Firefox'] } }, { name: 'webkit', use: { ...devices['Desktop Safari'] } }, ], }); CONFIG fi # Create example test mkdir -p tests cat > tests/example.spec.ts << 'TEST' import { test, expect } from '@playwright/test'; test('homepage loads successfully', async ({ page }) => { await page.goto('/'); await expect(page).toHaveTitle(/.+/); }); TEST echo "" echo "=== Setup Complete ===" echo "Config: playwright.config.ts" echo "Tests: tests/" echo "" echo "=== Commands ===" echo "Run tests: npx playwright test" echo "UI mode: npx playwright test --ui" echo "Show report: npx playwright show-report"