Master Playwright: Fast Front‑End Automation Testing with Code Samples

Background

Automated testing is essential for front‑end quality and user experience. Playwright, an open‑source project from Microsoft, provides a unified API that works across Chromium, WebKit, and Firefox on Windows, Linux, and macOS, allowing a single test script to run on all supported browsers.

Comparison

The discussion focuses on Playwright’s API design, which enables concise yet powerful test scripts.

Installation

Ensure Node.js and npm are installed because Playwright runs on a Node.js environment.

Install Playwright as a development dependency: npm i -D playwright Install the bundled browsers (Chromium, Firefox, WebKit):

playwright install

Configuration

Initialize a Playwright project to generate configuration files and install required dependencies:

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 actions here...
  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 = 'YOUR_URL';
  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();
})();