Playwright Interview Questions: From Basics to Advanced Automation Concepts

import { test, expect } from '@playwright/test';
 
test('user login flow', async ({ page }) => {
  await page.goto('https://example.com/login');
  await page.fill('#username', 'testuser');
  await page.fill('#password', 'password123');
  await page.click('button[type="submit"]');
  await expect(page).toHaveURL(/.*dashboard/);
});

test('API endpoint validation', async ({ request }) => {
  const response = await request.get('https://api.example.com/users');
  expect(response.ok()).toBeTruthy();
  const data = await response.json();
  expect(data).toHaveLength(10);
});

test('visual comparison', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveScreenshot('homepage.png');
});

test('button component', async ({ mount }) => {
  const component = await mount(<MyButton />);
  await expect(component).toContainText('Click me');
});

// TypeScript/JavaScript (most popular)
import { test, expect } from '@playwright/test';
 
test('example', async ({ page }) => {
  await page.goto('https://example.com');
});

# Python
from playwright.sync_api import sync_playwright
 
with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.goto('https://example.com')

// Java
import com.microsoft.playwright.*;
 
Playwright playwright = Playwright.create();
Browser browser = playwright.chromium().launch();
Page page = browser.newPage();
page.navigate("https://example.com");

// .NET/C#
using Microsoft.Playwright;
 
var playwright = await Playwright.CreateAsync();
var browser = await playwright.Chromium.LaunchAsync();
var page = await browser.NewPageAsync();
await page.GotoAsync("https://example.com");

Test Script (TypeScript/JavaScript)
         ↓
    Playwright API
         ↓
    DevTools Protocol
         ↓
    Browser Engine (Chromium/Firefox/WebKit)

// Browser → Context → Page hierarchy
const browser = await chromium.launch();
const context = await browser.newContext(); // Isolated session
const page = await context.newPage();      // Tab within context

const browser = await chromium.launch({ headless: false });

const context = await browser.newContext({
  viewport: { width: 1920, height: 1080 },
  permissions: ['geolocation'],
  geolocation: { latitude: 37.7749, longitude: -122.4194 }
});

const page = await context.newPage();
await page.goto('https://example.com');

Browser (Chrome instance)
├── BrowserContext 1 (User session 1)
│   ├── Page 1 (Tab 1)
│   └── Page 2 (Tab 2)
└── BrowserContext 2 (User session 2)
    ├── Page 1 (Tab 1)
    └── Page 2 (Tab 2)

test('use context per test', async ({ page }) => {
  // Playwright Test automatically provides isolated context
  // Each test gets fresh context automatically
  await page.goto('https://example.com');
});

# Using npm
npm init playwright@latest
 
# Using yarn
yarn create playwright
 
# Using pnpm
pnpm create playwright

npm install -D @playwright/test
npx playwright install

import { defineConfig, devices } from '@playwright/test';
 
export default defineConfig({
  testDir: './tests',
 
  // Maximum time one test can run
  timeout: 30 * 1000,
 
  // Maximum time for entire test run
  globalTimeout: 60 * 60 * 1000,
 
  // Retry failed tests
  retries: process.env.CI ? 2 : 0,
 
  // Parallel execution
  workers: process.env.CI ? 2 : undefined,
 
  // Reporter configuration
  reporter: [
    ['html'],
    ['junit', { outputFile: 'results.xml' }]
  ],
 
  use: {
    // Base URL
    baseURL: 'http://localhost:3000',
 
    // Browser options
    headless: true,
    viewport: { width: 1280, height: 720 },
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'retain-on-failure',
  },
 
  // Multiple browser configurations
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
    {
      name: 'Mobile Chrome',
      use: { ...devices['Pixel 5'] },
    },
  ],
 
  // Web server configuration
  webServer: {
    command: 'npm run start',
    port: 3000,
    timeout: 120 * 1000,
    reuseExistingServer: !process.env.CI,
  },
});

export default defineConfig({
  projects: [
    // Desktop browsers
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
 
    // Mobile emulation
    {
      name: 'Mobile Chrome',
      use: { ...devices['Pixel 5'] },
    },
    {
      name: 'Mobile Safari',
      use: { ...devices['iPhone 13'] },
    },
 
    // Tablet emulation
    {
      name: 'iPad',
      use: { ...devices['iPad Pro'] },
    },
 
    // Custom configurations
    {
      name: 'logged-in',
      use: {
        ...devices['Desktop Chrome'],
        storageState: 'auth.json', // Reuse authentication
      },
    },
  ],
});

# Run all projects
npx playwright test
 
# Run specific project
npx playwright test --project=chromium
 
# Run multiple projects
npx playwright test --project=chromium --project=firefox

// CSS Selector
await page.locator('button.submit-btn').click();
 
// XPath
await page.locator('xpath=//button[@class="submit-btn"]').click();

// Role-based (recommended)
await page.getByRole('button', { name: 'Sign in' }).click();
await page.getByRole('textbox', { name: 'Email' }).fill('user@example.com');
 
// Label-based (forms)
await page.getByLabel('Password').fill('secret123');
 
// Text-based
await page.getByText('Welcome back').waitFor();
 
// Test ID (for dynamic content)
await page.getByTestId('product-123').click();
 
// Chaining locators
await page
  .getByRole('listitem')
  .filter({ hasText: 'Product 1' })
  .getByRole('button', { name: 'Add to cart' })
  .click();

// Filter by text
await page.getByRole('listitem').filter({ hasText: 'Apple' });
 
// Filter by another locator
await page
  .getByRole('listitem')
  .filter({ has: page.getByRole('heading', { name: 'Product' }) });
 
// nth element
await page.getByRole('button').nth(2);
 
// first and last
await page.getByRole('listitem').first();
await page.getByRole('listitem').last();

// page.locator() - Most flexible, supports CSS and XPath
const button = page.locator('button.submit');
const link = page.locator('xpath=//a[@href="/login"]');
 
// page.getByRole() - Recommended for interactive elements
await page.getByRole('button', { name: 'Submit' });
await page.getByRole('link', { name: 'Learn more' });
await page.getByRole('textbox', { name: 'Email' });
 
// page.getByText() - For text content
await page.getByText('Welcome back');
await page.getByText(/hello/i); // Regex support
 
// page.getByLabel() - For form inputs
await page.getByLabel('Email address');
 
// page.getByPlaceholder() - For inputs with placeholders
await page.getByPlaceholder('Enter your email');
 
// page.getByTestId() - For data-testid attributes
await page.getByTestId('submit-button');

// Throws error if multiple elements match
await page.getByRole('button').click(); // Error if 2+ buttons
 
// Solutions:
await page.getByRole('button', { name: 'Submit' }).click(); // More specific
await page.getByRole('button').first().click(); // Get first
await page.getByRole('button').nth(1).click(); // Get specific index

// Bad: Brittle CSS selector
await page.locator('div.container > div:nth-child(2) > button').click();
 
// Good: User-facing locator
await page.getByRole('button', { name: 'Submit' }).click();

// Exact match
await page.getByText('Product: Apple iPhone');
 
// Partial match with regex
await page.getByText(/Product:.*iPhone/);
 
// Case-insensitive
await page.getByText(/submit/i);

// Filter by data attributes
await page.locator('[data-product-id="123"]');
 
// Filter by multiple attributes
await page.locator('button[type="submit"][disabled]');

// Wait for element to appear
await page.waitForSelector('.dynamic-content', { state: 'visible' });
 
// Wait for element with specific text
await page.getByText('Loading complete').waitFor();
 
// Wait for network to be idle
await page.waitForLoadState('networkidle');

// Bad: Hardcoded ID
await page.locator('#product-12345').click();
 
// Good: Use data-testid or partial match
await page.locator('[data-testid="product-item"]').click();
await page.locator('[id^="product-"]').click(); // Starts with

<!-- Add data-testid in HTML -->
<button data-testid="checkout-btn">Checkout</button>

// Reference in tests
await page.getByTestId('checkout-btn').click();

// Playwright automatically waits for all conditions
await page.getByRole('button', { name: 'Submit' }).click();
 
// Behind the scenes, Playwright:
// 1. Waits for button to be attached to DOM
// 2. Waits for button to be visible
// 3. Waits for button to be stable (not animating)
// 4. Waits for button to be enabled
// 5. Waits for button to receive events
// 6. Then clicks

// Selenium (requires explicit waits)
WebDriverWait wait = new WebDriverWait(driver, 10);
WebElement button = wait.until(
  ExpectedConditions.elementToBeClickable(By.id("submit"))
);
button.click();
 
// Playwright (auto-waits)
await page.getByRole('button', { name: 'Submit' }).click();

// Waits for navigation to complete
await page.click('a[href="/products"]');
 
// Waits for specific URL
await expect(page).toHaveURL('https://example.com/products');
 
// Waits for load state
await page.waitForLoadState('networkidle');

// Wait for element to be visible
await page.waitForSelector('.notification', { state: 'visible' });
 
// Wait for element to be hidden
await page.waitForSelector('.loading-spinner', { state: 'hidden' });
 
// Wait for element to be detached from DOM
await page.waitForSelector('.modal', { state: 'detached' });

// Wait for DOMContentLoaded
await page.waitForLoadState('domcontentloaded');
 
// Wait for all resources to load
await page.waitForLoadState('load');
 
// Wait for network to be idle (no network activity for 500ms)
await page.waitForLoadState('networkidle');

// Wait for 2 seconds
await page.waitForTimeout(2000);
 
// Note: Avoid this when possible, prefer condition-based waits

// Wait for custom condition
await page.waitForFunction(() => {
  return document.querySelectorAll('.product-item').length > 10;
});
 
// With arguments
await page.waitForFunction(
  (minPrice) => {
    const prices = Array.from(document.querySelectorAll('.price'));
    return prices.some(p => parseFloat(p.textContent) < minPrice);
  },
  50 // Argument passed to function
);

// Wait for specific API response
const responsePromise = page.waitForResponse(
  response => response.url().includes('/api/products') && response.status() === 200
);
await page.click('button.load-more');
await responsePromise;

// Wait for specific request
await page.waitForRequest(request =>
  request.url().includes('/api/analytics')
);

// Wait for console message
const messagePromise = page.waitForEvent('console');
await page.click('button.log');
const message = await messagePromise;
 
// Wait for dialog
const dialogPromise = page.waitForEvent('dialog');
await page.click('button.alert');
const dialog = await dialogPromise;
await dialog.accept();

import { expect } from '@playwright/test';
 
// URL assertions
await expect(page).toHaveURL('https://example.com/products');
await expect(page).toHaveURL(/.*products/); // Regex
 
// Title assertions
await expect(page).toHaveTitle('Products | Example Store');
await expect(page).toHaveTitle(/Products/);

// Visibility
await expect(page.getByRole('button', { name: 'Submit' })).toBeVisible();
await expect(page.locator('.error-message')).toBeHidden();
 
// Enabled/Disabled
await expect(page.getByRole('button', { name: 'Submit' })).toBeEnabled();
await expect(page.getByRole('button', { name: 'Submit' })).toBeDisabled();
 
// Checked state
await expect(page.getByRole('checkbox')).toBeChecked();
await expect(page.getByRole('checkbox')).not.toBeChecked();
 
// Text content
await expect(page.locator('.heading')).toHaveText('Welcome');
await expect(page.locator('.heading')).toContainText('Welcome');
 
// Attribute
await expect(page.locator('button')).toHaveAttribute('type', 'submit');
await expect(page.locator('a')).toHaveAttribute('href', /.*products/);
 
// Class
await expect(page.locator('div')).toHaveClass('active');
await expect(page.locator('div')).toHaveClass(/.*active.*/);
 
// Count
await expect(page.locator('.product-item')).toHaveCount(10);
 
// Value (for inputs)
await expect(page.getByLabel('Email')).toHaveValue('user@example.com');

// Visual comparison
await expect(page).toHaveScreenshot('homepage.png');
await expect(page.locator('.header')).toHaveScreenshot('header.png');

const response = await page.request.get('https://api.example.com/users');
expect(response.ok()).toBeTruthy();
expect(response.status()).toBe(200);
const data = await response.json();
expect(data).toHaveLength(10);
expect(data[0]).toHaveProperty('name');

// Extend expect
expect.extend({
  async toHaveProductCount(locator, expected) {
    const count = await locator.count();
    const pass = count === expected;
    return {
      pass,
      message: () => `Expected ${expected} products, got ${count}`,
    };
  },
});
 
// Use custom assertion
await expect(page.locator('.product')).toHaveProductCount(5);

test('hard assertions', async ({ page }) => {
  await page.goto('https://example.com');
 
  // If this fails, test stops here
  await expect(page).toHaveTitle('Products');
 
  // This won't execute if title assertion fails
  await expect(page.locator('.product')).toHaveCount(10);
});

test('soft assertions', async ({ page }) => {
  await page.goto('https://example.com');
 
  // Use expect.soft() for soft assertions
  await expect.soft(page).toHaveTitle('Products');
  await expect.soft(page.locator('.product')).toHaveCount(10);
  await expect.soft(page.locator('.header')).toBeVisible();
 
  // All failures are collected and reported at the end
});

  1) [chromium] › example.spec.ts:3:1 › soft assertions

     Error: expect.soft(received).toHaveTitle(expected)
     Expected: "Products"
     Received: "Home"

     Error: expect.soft(received).toHaveCount(expected)
     Expected: 10
     Received: 5

import { test, expect } from '@playwright/test';
 
test('API endpoint validation', async ({ request }) => {
  // GET request
  const response = await request.get('https://api.example.com/users');
 
  // Status validation
  expect(response.ok()).toBeTruthy();
  expect(response.status()).toBe(200);
 
  // Response body validation
  const users = await response.json();
  expect(users).toHaveLength(10);
  expect(users[0]).toHaveProperty('name');
  expect(users[0]).toHaveProperty('email');
});

test('create user via API', async ({ request }) => {
  const response = await request.post('https://api.example.com/users', {
    data: {
      name: 'John Doe',
      email: 'john@example.com',
      role: 'admin'
    },
    headers: {
      'Authorization': 'Bearer token123',
      'Content-Type': 'application/json'
    }
  });
 
  expect(response.status()).toBe(201);
  const user = await response.json();
  expect(user.id).toBeDefined();
  expect(user.name).toBe('John Doe');
});

// PUT request
await request.put('https://api.example.com/users/123', {
  data: { name: 'Jane Doe' }
});
 
// PATCH request
await request.patch('https://api.example.com/users/123', {
  data: { role: 'moderator' }
});
 
// DELETE request
await request.delete('https://api.example.com/users/123');
 
// HEAD request
const response = await request.head('https://api.example.com/users');
expect(response.status()).toBe(200);

test.describe('User API', () => {
  let apiContext;
 
  test.beforeAll(async ({ playwright }) => {
    // Create API context with base URL and auth
    apiContext = await playwright.request.newContext({
      baseURL: 'https://api.example.com',
      extraHTTPHeaders: {
        'Authorization': 'Bearer token123',
        'Accept': 'application/json'
      }
    });
  });
 
  test.afterAll(async () => {
    await apiContext.dispose();
  });
 
  test('get users', async () => {
    const response = await apiContext.get('/users');
    expect(response.ok()).toBeTruthy();
  });
 
  test('create user', async () => {
    const response = await apiContext.post('/users', {
      data: { name: 'Test User' }
    });
    expect(response.status()).toBe(201);
  });
});

test('setup data via API, validate via UI', async ({ request, page }) => {
  // Create product via API
  const response = await request.post('https://api.example.com/products', {
    data: {
      name: 'Test Product',
      price: 99.99,
      stock: 100
    }
  });
  const product = await response.json();
 
  // Verify product appears in UI
  await page.goto('https://example.com/products');
  await expect(page.getByText('Test Product')).toBeVisible();
  await expect(page.getByText('$99.99')).toBeVisible();
});

test('mock API response', async ({ page }) => {
  // Intercept specific route
  await page.route('**/api/products', async (route) => {
    // Fulfill with mock data
    await route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify([
        { id: 1, name: 'Mock Product 1', price: 10 },
        { id: 2, name: 'Mock Product 2', price: 20 }
      ])
    });
  });
 
  await page.goto('https://example.com/products');
 
  // Verify mock data is displayed
  await expect(page.getByText('Mock Product 1')).toBeVisible();
});

test('modify API response', async ({ page }) => {
  await page.route('**/api/users', async (route) => {
    // Get original response
    const response = await route.fetch();
    const json = await response.json();
 
    // Modify response
    json[0].name = 'Modified Name';
 
    // Fulfill with modified data
    await route.fulfill({
      response,
      body: JSON.stringify(json)
    });
  });
 
  await page.goto('https://example.com/users');
});

test('block analytics', async ({ page }) => {
  // Block specific requests
  await page.route('**/*.{png,jpg,jpeg}', route => route.abort());
  await page.route('**/google-analytics.com/**', route => route.abort());
 
  await page.goto('https://example.com');
});

test('handle API errors', async ({ page }) => {
  await page.route('**/api/products', route => {
    route.fulfill({
      status: 500,
      contentType: 'application/json',
      body: JSON.stringify({ error: 'Internal server error' })
    });
  });
 
  await page.goto('https://example.com/products');
 
  // Verify error handling
  await expect(page.getByText('Failed to load products')).toBeVisible();
});

test('log all API requests', async ({ page }) => {
  // Listen to all requests
  page.on('request', request => {
    if (request.url().includes('/api/')) {
      console.log('API Request:', request.method(), request.url());
    }
  });
 
  // Listen to responses
  page.on('response', response => {
    if (response.url().includes('/api/')) {
      console.log('API Response:', response.status(), response.url());
    }
  });
 
  await page.goto('https://example.com');
});

test('wait for API call', async ({ page }) => {
  const responsePromise = page.waitForResponse(
    response => response.url().includes('/api/products') && response.status() === 200
  );
 
  await page.click('button.load-products');
  const response = await responsePromise;
 
  const products = await response.json();
  expect(products).toHaveLength(10);
});

test('homepage visual test', async ({ page }) => {
  await page.goto('https://example.com');
 
  // First run: generates reference screenshot
  // Subsequent runs: compares against reference
  await expect(page).toHaveScreenshot('homepage.png');
});

test('header visual test', async ({ page }) => {
  await page.goto('https://example.com');
 
  const header = page.locator('header');
  await expect(header).toHaveScreenshot('header.png');
});

test('visual test with options', async ({ page }) => {
  await page.goto('https://example.com');
 
  await expect(page).toHaveScreenshot('homepage.png', {
    // Maximum pixel difference threshold (0-1)
    maxDiffPixels: 100,
 
    // Maximum pixel difference ratio (0-1)
    maxDiffPixelRatio: 0.05,
 
    // Mask dynamic areas
    mask: [page.locator('.timestamp')],
 
    // Full page screenshot (including scrollable content)
    fullPage: true,
 
    // Clip to specific area
    clip: { x: 0, y: 0, width: 1280, height: 720 },
 
    // Hide specific elements
    maskColor: '#FF00FF'
  });
});

test('mask dynamic elements', async ({ page }) => {
  await page.goto('https://example.com');
 
  await expect(page).toHaveScreenshot('page.png', {
    mask: [
      page.locator('.timestamp'),
      page.locator('.user-avatar'),
      page.locator('.ad-banner')
    ]
  });
});

# Update all screenshots
npx playwright test --update-snapshots
 
# Update specific test
npx playwright test visual.spec.ts --update-snapshots
 
# Update for specific project
npx playwright test --project=chromium --update-snapshots

// Screenshots are stored per project
// tests/visual.spec.ts-snapshots/homepage-chromium.png
// tests/visual.spec.ts-snapshots/homepage-firefox.png
// tests/visual.spec.ts-snapshots/homepage-webkit.png
 
test('cross-browser visual test', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveScreenshot('homepage.png');
});

export default defineConfig({
  use: {
    screenshot: {
      mode: 'only-on-failure',
      fullPage: true
    }
  },
 
  expect: {
    toHaveScreenshot: {
      maxDiffPixels: 100,
      threshold: 0.2
    }
  }
});

test('capture screenshot', async ({ page }) => {
  await page.goto('https://example.com');
 
  // Full page screenshot
  await page.screenshot({ path: 'screenshot.png', fullPage: true });
 
  // Viewport screenshot
  await page.screenshot({ path: 'viewport.png' });
 
  // Element screenshot
  const element = page.locator('header');
  await element.screenshot({ path: 'header.png' });
});

// playwright.config.ts
export default defineConfig({
  use: {
    screenshot: 'only-on-failure',
    // OR
    screenshot: 'on',  // Always capture
    screenshot: 'off', // Never capture
  }
});

// playwright.config.ts
export default defineConfig({
  use: {
    video: 'retain-on-failure',
    // OR
    video: 'on',                    // Always record
    video: 'off',                   // Never record
    video: 'on-first-retry',        // Record only retries
 
    videoSize: { width: 1280, height: 720 }
  }
});

test('access video', async ({ page }, testInfo) => {
  await page.goto('https://example.com');
  // Test actions...
 
  // Video path available after test
  const videoPath = await page.video().path();
  console.log('Video saved to:', videoPath);
});

test.afterEach(async ({ page }, testInfo) => {
  if (testInfo.status !== testInfo.expectedStatus) {
    const videoPath = await page.video().path();
    await testInfo.attach('video', { path: videoPath, contentType: 'video/webm' });
  }
});

import { test } from '@playwright/test';
 
test('use built-in fixtures', async ({ page, context, browser }) => {
  // 'page' - isolated Page instance
  // 'context' - isolated BrowserContext
  // 'browser' - Browser instance
 
  await page.goto('https://example.com');
});

// fixtures.ts
import { test as base } from '@playwright/test';
 
// Define custom fixtures
type MyFixtures = {
  authenticatedPage: Page;
  testUser: { email: string; password: string };
};
 
export const test = base.extend<MyFixtures>({
  // Simple fixture
  testUser: async ({}, use) => {
    const user = {
      email: 'test@example.com',
      password: 'password123'
    };
    await use(user);
  },
 
  // Fixture that depends on other fixtures
  authenticatedPage: async ({ page, testUser }, use) => {
    // Setup: Login
    await page.goto('https://example.com/login');
    await page.fill('[name="email"]', testUser.email);
    await page.fill('[name="password"]', testUser.password);
    await page.click('button[type="submit"]');
    await page.waitForURL('**/dashboard');
 
    // Provide authenticated page to test
    await use(page);
 
    // Teardown: Logout
    await page.click('button.logout');
  }
});

import { test } from './fixtures';
 
test('access dashboard', async ({ authenticatedPage }) => {
  // Page is already logged in
  await authenticatedPage.goto('https://example.com/dashboard');
  await expect(authenticatedPage.locator('h1')).toHaveText('Dashboard');
});

// Shared across tests in same worker
export const test = base.extend({
  workerStorageState: [async ({ browser }, use) => {
    // Setup once per worker
    const page = await browser.newPage();
    await page.goto('https://example.com/login');
    await page.fill('[name="email"]', 'test@example.com');
    await page.fill('[name="password"]', 'password123');
    await page.click('button[type="submit"]');
 
    // Save authentication state
    await page.context().storageState({ path: 'auth.json' });
    await page.close();
 
    await use('auth.json');
  }, { scope: 'worker' }],
 
  page: async ({ page, workerStorageState }, use) => {
    // All pages in this worker reuse auth state
    await use(page);
  }
});

export const test = base.extend<{ apiURL: string }>({
  apiURL: ['https://api.example.com', { option: true }],
 
  request: async ({ apiURL }, use) => {
    const context = await request.newContext({ baseURL: apiURL });
    await use(context);
    await context.dispose();
  }
});
 
// Override in test file
test.use({ apiURL: 'https://staging.api.example.com' });

import { test, expect } from '@playwright/test';
 
// Runs before each test
test.beforeEach(async ({ page }) => {
  await page.goto('https://example.com');
  // Login, setup, etc.
});
 
// Runs after each test
test.afterEach(async ({ page }) => {
  // Cleanup, logout, etc.
});
 
// Runs once before all tests in file
test.beforeAll(async ({ browser }) => {
  // One-time setup
});
 
// Runs once after all tests in file
test.afterAll(async ({ browser }) => {
  // One-time cleanup
});

test.describe('Product page', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('https://example.com/products');
  });
 
  test('displays products', async ({ page }) => {
    await expect(page.locator('.product')).toHaveCount(10);
  });
 
  test('filters products', async ({ page }) => {
    await page.click('button.filter-electronics');
    await expect(page.locator('.product')).toHaveCount(5);
  });
});

test.describe('Shopping cart', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('https://example.com');
  });
 
  test.describe('Empty cart', () => {
    test('shows empty message', async ({ page }) => {
      await page.goto('https://example.com/cart');
      await expect(page.getByText('Your cart is empty')).toBeVisible();
    });
  });
 
  test.describe('With items', () => {
    test.beforeEach(async ({ page }) => {
      // Add items to cart
      await page.goto('https://example.com/products');
      await page.click('.product:first-child button.add-to-cart');
    });
 
    test('shows cart count', async ({ page }) => {
      await expect(page.locator('.cart-count')).toHaveText('1');
    });
  });
});

test.beforeEach(async ({ page, browserName }) => {
  // Skip setup for specific browser
  if (browserName === 'webkit') {
    test.skip();
  }
 
  await page.goto('https://example.com');
});

test('critical user flow', {
  tag: '@smoke',
  annotation: { type: 'issue', description: 'https://github.com/org/repo/issues/123' }
}, async ({ page }) => {
  // Test implementation
});
 
// Run tests by tag
// npx playwright test --grep @smoke

// playwright.config.ts
export default defineConfig({
  // Number of parallel workers
  workers: process.env.CI ? 2 : undefined, // undefined = CPU cores
 
  // Run tests within a file in parallel
  fullyParallel: true,
});

# Disable parallelism (single worker)
npx playwright test --workers=1
 
# Specific number of workers
npx playwright test --workers=4
 
# Use 50% of CPU cores
npx playwright test --workers=50%

// Default: Tests in single file run sequentially
test.describe('Sequential tests', () => {
  test('test 1', async ({ page }) => { /* ... */ });
  test('test 2', async ({ page }) => { /* ... */ });
  // test 2 runs after test 1 completes
});
 
// Parallel mode within file
test.describe.configure({ mode: 'parallel' });
test.describe('Parallel tests', () => {
  test('test 1', async ({ page }) => { /* ... */ });
  test('test 2', async ({ page }) => { /* ... */ });
  // test 1 and test 2 run in different workers
});
 
// Serial mode (runs sequentially even if fully parallel enabled)
test.describe.configure({ mode: 'serial' });
test.describe('Serial tests', () => {
  test('test 1', async ({ page }) => { /* ... */ });
  test('test 2', async ({ page }) => { /* ... */ });
  // Strictly sequential, test 2 waits for test 1
});

// Each worker gets:
// - Its own browser instance
// - Isolated browser contexts
// - Separate process memory
// - No shared state between workers
 
test('isolated test 1', async ({ page }) => {
  // Runs in worker 1
  await page.goto('https://example.com');
});
 
test('isolated test 2', async ({ page }) => {
  // Runs in worker 2 (completely isolated from test 1)
  await page.goto('https://example.com');
});

// playwright.config.ts
export default defineConfig({
  // Split tests across multiple machines
  shard: process.env.CI ? { current: 1, total: 3 } : undefined,
});

# Run in 3 parallel CI jobs
npx playwright test --shard=1/3  # Machine 1
npx playwright test --shard=2/3  # Machine 2
npx playwright test --shard=3/3  # Machine 3

export default defineConfig({
  // Stop after N failures
  maxFailures: process.env.CI ? 10 : undefined,
});

npx playwright test --max-failures=5

// Global setup (auth.setup.ts)
import { test as setup } from '@playwright/test';
 
setup('authenticate', async ({ page }) => {
  await page.goto('https://example.com/login');
  await page.fill('[name="email"]', 'user@example.com');
  await page.fill('[name="password"]', 'password123');
  await page.click('button[type="submit"]');
 
  // Save signed-in state
  await page.context().storageState({ path: 'auth.json' });
});
 
// playwright.config.ts
export default defineConfig({
  projects: [
    { name: 'setup', testMatch: /.*\.setup\.ts/ },
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
        storageState: 'auth.json',
      },
      dependencies: ['setup'],
    },
  ],
});
 
// All tests now start authenticated
test('access dashboard', async ({ page }) => {
  await page.goto('https://example.com/dashboard');
  // Already logged in!
});

test('verify product in UI', async ({ request, page }) => {
  // Create product via API (fast)
  const response = await request.post('/api/products', {
    data: { name: 'Test Product', price: 99 }
  });
  const product = await response.json();
 
  // Verify in UI (only when needed)
  await page.goto(`/products/${product.id}`);
  await expect(page.locator('h1')).toHaveText('Test Product');
});

// Slow: New browser per test
test('slow approach', async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  // Test...
  await browser.close();
});
 
// Fast: Reuse browser, new context per test
test('fast approach', async ({ page }) => {
  // Playwright Test automatically provides isolated context
  // Browser is reused across tests
});

test.describe.configure({ mode: 'parallel' });
 
test.describe('Independent tests', () => {
  test('test 1', async ({ page }) => { /* ... */ });
  test('test 2', async ({ page }) => { /* ... */ });
  test('test 3', async ({ page }) => { /* ... */ });
  // All run in parallel
});

// Bad: Arbitrary timeout
await page.waitForTimeout(5000);
 
// Good: Condition-based wait
await page.waitForLoadState('networkidle');
 
// Better: Auto-waiting assertion
await expect(page.locator('.content')).toBeVisible();

// Block unnecessary resources
test.beforeEach(async ({ page }) => {
  await page.route('**/*.{png,jpg,jpeg,gif,svg}', route => route.abort());
  await page.route('**/analytics.js', route => route.abort());
});

export default defineConfig({
  use: {
    headless: true, // Faster than headed mode
  },
});

export default defineConfig({
  timeout: 30 * 1000,         // Test timeout
  expect: {
    timeout: 5 * 1000,        // Assertion timeout
  },
  use: {
    actionTimeout: 10 * 1000, // Action timeout
    navigationTimeout: 30 * 1000,
  },
});

# .github/workflows/playwright.yml
name: Playwright Tests
on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
 
    - uses: actions/setup-node@v3
      with:
        node-version: 18
 
    - name: Install dependencies
      run: npm ci
 
    - name: Install Playwright Browsers
      run: npx playwright install --with-deps
 
    - name: Run Playwright tests
      run: npx playwright test
 
    - uses: actions/upload-artifact@v3
      if: always()
      with:
        name: playwright-report
        path: playwright-report/
        retention-days: 30