Playwright advantages over Selenium:

• No WebDriver dependency: Direct browser automation through browser APIs
• Auto-wait: Built-in intelligent waiting mechanisms
• Better performance: Faster execution and more reliable
• Modern browser features: Better support for modern web technologies
• Network interception: Built-in network mocking and monitoring
• Multiple contexts: Can run multiple isolated browser contexts

Selenium advantages:

• Mature ecosystem: Longer history with extensive community support
• More language bindings: Supports more programming languages
• Grid infrastructure: More mature distributed testing solutions

Playwright supports three main browser engines:

1. Chromium - Works with Chrome, Edge, and other Chromium-based browsers
2. Firefox - Mozilla Firefox browser
3. WebKit - Safari browser engine

// Example of running tests on different browsers
const { chromium, firefox, webkit } = require('playwright');

// Launch different browsers
const chromeContext = await chromium.launch();
const firefoxContext = await firefox.launch();
const safariContext = await webkit.launch();

Installation steps:

# Install Playwright
npm init playwright@latest

# Or add to existing project
npm install @playwright/test

# Install browsers
npx playwright install

Basic configuration in playwright.config.js:

module.exports = {
  testDir: './tests',
  timeout: 30000,
  use: {
    browserName: 'chromium',
    headless: true,
    screenshot: 'only-on-failure'
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } }
  ]
};

Locators are Playwright's way of finding elements on a page. They represent a query for elements and are auto-waiting and retry-able.

Selectors are the actual query strings used to find elements.

// Locator (recommended approach)
const button = page.locator('button[data-testid="submit"]');
await button.click();

// Direct selector (not recommended for interactions)
const element = await page.$('button[data-testid="submit"]');

Benefits of locators:

• Auto-wait for element to be actionable
• Built-in retry logic
• Better error messages
• Lazy evaluation

// Click actions
await page.locator('#submit-btn').click();
await page.locator('#menu').click({ button: 'right' }); // Right click
await page.locator('#item').dblclick(); // Double click

// Text input
await page.locator('#username').fill('john.doe@example.com');
await page.locator('#search').type('playwright testing', { delay: 100 });

// Dropdown selection
await page.locator('#country').selectOption('USA');
await page.locator('#colors').selectOption(['red', 'blue']); // Multiple

// Checkbox and radio buttons
await page.locator('#agree-terms').check();
await page.locator('#newsletter').uncheck();

// File upload
await page.locator('#file-input').setInputFiles('./document.pdf');

// Keyboard actions
await page.keyboard.press('Enter');
await page.keyboard.type('Hello World');

// Element state expectations
await expect(locator).toBeVisible();
await expect(locator).toBeHidden();
await expect(locator).toBeEnabled();
await expect(locator).toBeDisabled();
await expect(locator).toBeFocused();
await expect(locator).toBeChecked();

// Text content expectations
await expect(locator).toHaveText('Expected text');
await expect(locator).toContainText('partial text');
await expect(locator).toHaveValue('input value');

// Attribute expectations
await expect(locator).toHaveAttribute('class', 'active');
await expect(locator).toHaveClass(['btn', 'primary']);

// Page expectations
await expect(page).toHaveURL('/expected-url');
await expect(page).toHaveTitle('Page Title');

// Count expectations
await expect(page.locator('.item')).toHaveCount(5);

The playwright.config.js file controls test execution behavior and browser settings.

Key configuration options:

module.exports = {
  // Test directory
  testDir: './tests',
  
  // Global timeout for each test
  timeout: 30000,
  
  // Global setup and teardown
  globalSetup: './global-setup.js',
  globalTeardown: './global-teardown.js',
  
  // Retry failed tests
  retries: 2,
  
  // Parallel execution
  workers: process.env.CI ? 1 : undefined,
  
  // Reporter configuration
  reporter: [['html'], ['junit', { outputFile: 'results.xml' }]],
  
  // Browser and context settings
  use: {
    baseURL: 'http://localhost:3000',
    headless: true,
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'on-first-retry'
  },
  
  // Multiple browser projects
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'mobile', use: { ...devices['iPhone 12'] } }
  ]
};