Step-by-Step: Launch Browser, Context, and Page in Playwright and Run Test and Configuration (JavaScript)

🎥 Setup Browser, Context, Page & Run Config Test Scripts with package.json & playwright.config.js

Step-by-Step: Launch Browser, Context, and Page in Playwright and Run Test and Configuration (JavaScript)

1. Install Playwright

You can install Playwright using the following command:

npm init playwright@latest

2. Create a Basic Test Script

Understand the core Playwright architecture:

Element	Description
browser	Controls the browser instance (like Chrome, Firefox, etc.)
context	Acts like a separate browser profile (cookies, localStorage are isolated)
page	A single browser tab where interaction happens

3. Run the Test

npx playwright test example.spec.js

Ways to Run TypeScript Tests

Way	Command	Notes
🟢 Via npx	npx playwright test	Uses built-in TypeScript support
🟢 With script	npm run test	Defined in package.json

4. Basic package.json Scripts for Playwright

{
  "scripts": {
    "test": "npx playwright test",
    "test:headed": "npx playwright test --headed",
    "test:debug": "npx playwright test --debug",
    "test:report": "npx playwright show-report",
    "test:project": "npx playwright test --project=chromium",
    "test:file": "npx playwright test tests/example.spec.ts",
    "test:grep": "npx playwright test -g 'login test'",
    "build": "tsc"
  }
}

🔍 Explanation of Scripts

Script	What It Does
test	Runs all tests (default from config)
test:headed	Opens browser with GUI
test:debug	Debug mode (step-through with pw.debug() and trace viewer)
test:report	Opens HTML test report
test:project	Runs tests only on specified browser
test:file	Runs a specific test file
test:grep	Runs tests with title matching string
build	Compiles TypeScript to JavaScript (if using manually)

6. 🔧 playwright.config.js — Explained

1. Basic Structure

// playwright.config.js
const { defineConfig } = require('@playwright/test');

module.exports = defineConfig({
  testDir: './tests',
  timeout: 30000,
  expect: {
    timeout: 5000,
  },
  fullyParallel: true,
  reporter: 'html',
  use: {
    browserName: 'chromium',
    headless: true,
    viewport: { width: 1280, height: 720 },
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'on-first-retry',
  },
});

2. Common Configuration Options

Option	Description
testDir	Folder where all tests are located
timeout	Maximum time each test can run
use.browserName	Choose browser: 'chromium', 'firefox', 'webkit'
headless	true runs browser without UI
reporter	'list', 'dot', 'html', 'json' etc.
trace	'on', 'off', 'on-first-retry' helps debug tests
screenshot	'on', 'off', 'only-on-failure'
video	'on', 'off', 'retain-on-failure'

3. Custom Projects

You can define multiple browsers to test across:

projects: [
  { name: 'Chromium', use: { browserName: 'chromium' } },
  { name: 'Firefox', use: { browserName: 'firefox' } },
  { name: 'WebKit', use: { browserName: 'webkit' } }
]

Run all with:

npx playwright test