Playwright Advanced

API Testing

javascript

Copy

const response = await page.request.post('https://api.example.com/login', {
  data: { username: 'user', password: 'pass' }
});
console.log(await response.json());

Network Interception & Mocking

Javascript

Copy

await page.route('**/api/data', route => {
  route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify({ message: 'mocked data' })
  });
});

Parallel Execution

In playwright.config.js

Javascript

Copy

module.exports = {
  workers: 4, // Run 4 tests in parallel
  use: { headless: true }
};

Run tests

npx playwright test --workers=4

Authentication Handling

Save Session

Javascript

Copy

await page.context().storageState({ path: 'auth.json' });

Reuse Session

Javascript

Copy

const context = await browser.newContext({ storageState: 'auth.json' });

Custom Reporters

Create custom-reporter.js

Javascript

Copy

class CustomReporter {
  onTestEnd(test, result) {
    console.log(`${test.title}: ${result.status}`);
  }
}
module.exports = CustomReporter;

In playwright.config.js

Javascript

Copy

module.exports = {
  reporter: './custom-reporter.js'
};

CI/CD Integration

GitHub Actions (.github/workflows/playwright.yml)

name: Playwright Tests
on: [push]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install dependencies
        run: npm install
      - name: Run tests
        run: npx playwright test

Error Handling & Retries

Automatic Retries (In playwright.config.js)

Javascript

Copy

module.exports = {
  retries: 2 // Retries failing tests twice
};

Manual Error Handling

Javascript

Copy

try {
  await page.click('#non-existent');
} catch (e) {
  console.error('Error:', e);
}

Handling Timeouts

Global Timeout (In playwright.config.js)

Javascript

Copy

module.exports = {
  timeout: 30000 // 30 seconds
};

Element-specific Timeout

Javascript

Copy

await page.waitForSelector('#element', { timeout: 10000 });

Geolocation & Device Emulation

Geolocation

Javascript

Copy

const context = await browser.newContext({
  geolocation: { latitude: 48.8584, longitude: 2.2945 },
  permissions: ['geolocation']
});

Device Emulation

Javascript

Copy

const { devices } = require('playwright');
const context = await browser.newContext(devices['iPhone 13']);

Multiple Configurations

Define multiple configs

Create separate config files (e.g., chrome.config.js, firefox.config.js)

Javascript

Copy

// chrome.config.js
const { defineConfig } = require('@playwright/test');
module.exports = defineConfig({
  use: { browserName: 'chromium' }
});

Run with different configs

npx playwright test --config=chrome.config.js