Master Playwright: Fast Frontend Automation Testing with Real Code Examples

Background

In frontend development, automated testing is essential for quality and user experience. As web apps become more complex, manual testing cannot keep up with rapid iteration and continuous delivery. Automation simulates user interactions, runs repetitive tests quickly, shortens test cycles, increases coverage, finds defects early, improves stability, reduces maintenance cost, and frees resources for innovation.

Why Playwright

Playwright, an open‑source project from Microsoft, supports all modern browsers (Chromium, WebKit, Firefox) on Windows, Linux and macOS. It offers a unified API for cross‑browser testing, so a single script runs everywhere without per‑browser adjustments. Its auto‑waiting, rich API, modern web feature support, and parallel execution make it a powerful tool that is rapidly becoming the new standard for frontend automation.

Installation

Ensure Node.js and npm are installed. Then install Playwright and its browsers:

npm i -D playwright

playwright install

Configuration

Initialize a Playwright project (for a new project) with:

npx playwright install

Demo

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://www.baidu.com');
  // add your test steps...
  await browser.close();
})();

Run Tests

npx playwright test

Common API – GET request

const { request } = require('playwright');

(async () => {
  const context = await request.newContext();
  const response = await context.get(url, {
    headers: { "Authorization": "Bearer " },
    params: { query: 'value' }
  });
  if (response.ok) {
    console.log('Response:', await response.json());
  } else {
    console.error('Error:', response.status());
  }
  await context.dispose();
})();

Common API – POST request

const { request } = require('playwright');

(async () => {
  const context = await request.newContext();
  const url = xxx;
  const data = { key1: 'value1', key2: 'value2' };
  const response = await context.post(url, {
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer '
    },
    data: JSON.stringify(data)
  });
  if (response.ok) {
    console.log('Response:', await response.json());
  } else {
    console.error('Error:', response.status());
  }
  await context.dispose();
})();