Playwright

Initialization

# No installation required
npm init playwright@latest

More at:

• Installation (playwright.dev).
• Using init command (github.com).

Installation

npm i -D @playwright/test
npx playwraight install # Install all supported browsers (or specify one)

More at:

• Difference between Test vs. Library (playwright.dev).
• Manually (github.com).

Usage

# Use with npx
npx playwright test <test-file?> [option]

Options:

• --browser <chromium|firefox|webkit|all>
• -c, --config <config-file> (playwright.config.js (or .ts) by default)
• --headed (runs in browser)
• --ui (runs in browser UI mode)
• --quiet

More at Reference (playwright.dev).

Configuration

// playwright.config.ts e.g.:
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  headed: true,
  browser: 'all',
  maxFailures: 1,
  use: {
    viewport: { width: 1920, height: 1080 },
    colorScheme: 'dark',
    locale: 'en-US',
    permissions: 'geolocation',
    offline: true,
    screenshot: 'only-on-failure'
  },
  projects: [
    {
      name: 'Mobile Safari',
      use: { ...devices['iPhone 13'] }
    }
  ],
  webServer: {
    command: 'npm run start',
    url: 'http://127.0.0.1:8080'
  },
  // ...
});

More at (playwright.dev):

• Testing Configuration, TestConfig.
• Test use options, use.
• Projects, projects, TestProject.
• TestOptions (usable through use and projects).
• Web server, webServer.
• Emulation.

Using TypeScript

Setup a TypeScript configuration file inside playwright folder (recommended):

// test/tsconfig.json e.g. (using custom paths):
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@helpers/*": ["packages/helpers/*"]
    }
  }
}

// test/test.spec.ts e.g.:
import { test, expect } from '@playwright/test';
import { foo } from '@helpers/bar.ts';

More at TypeScript (playwright.dev).

Using ESMs

1- Setup package.json type to module:

// package.json e.g.:
{
  "type": "module"
}

2- Use explicit file extensions when importing modules:

// test/test.spec.js e.g.:
import { test, expect } from '@playwright/test';
import { foo } from './packages/helpers/bar.js';