How does Playwright handle browser automation?

Playwright is a Node.js library that allows you to control a browser programmatically. It supports Chromium, Firefox, and WebKit with a single API. Playwright is built to enable cross-browser web automation that is capable of doing almost everything a user can do manually on a website.

To handle browser automation, Playwright launches instances of browsers (browser contexts), opens new pages (tabs), and then manipulates those pages to perform actions and extract information.

Here's how you can handle browser automation with Playwright:

Installation

First, you need to install Playwright via npm:

npm i playwright

This command installs Playwright and the browser binaries for Chromium, Firefox, and WebKit.

Example

Here is a basic example of using Playwright to automate a browser:

const playwright = require('playwright');

(async () => {
  for (const browserType of ['chromium', 'firefox', 'webkit']) {
    const browser = await playwright[browserType].launch();
    const context = await browser.newContext();
    const page = await context.newPage();
    await page.goto('http://www.example.com');
    await page.screenshot({ path: `example-${browserType}.png` });
    await browser.close();
  }
})();

In this example, Playwright launches each browser type (Chromium, Firefox, and WebKit), opens a new page, navigates to 'http://www.example.com', and takes a screenshot.

Browser Contexts

Playwright operates through browser contexts. These contexts are isolated environments, similar to incognito windows. Each context can have multiple pages (tabs).

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

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page1 = await context.newPage();
  const page2 = await context.newPage();
  // Pages can do things independently
  await page1.goto('http://www.example.com');
  await page2.goto('http://www.google.com');
  await browser.close();
})();

In this example, two pages are opened in the same browser context. They navigate to different URLs and operate independently.

Page Actions

Playwright can perform actions on pages, like clicking buttons, filling forms, and so on. Here is an example:

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

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('http://www.example.com');
  await page.click('#my-button');
  await page.fill('#my-form', 'my value');
  await browser.close();
})();

In this example, Playwright navigates to 'http://www.example.com', clicks a button with the id 'my-button', and fills a form with the id 'my-form'.

Playwright provides a high-level API that makes browser automation easy and efficient, with many features tailored for modern web applications. It's a powerful tool for end-to-end testing, scraping, and automating web browsers.