playwright-core

What is playwright-core?

The playwright-core npm package is a library that provides a high-level API to control headless Chrome, Firefox, and WebKit with a single API. It is designed for automating web browser interactions for the purposes of web scraping, automated testing, and web automation.

What are playwright-core's main functionalities?

Browser Automation

Automate browser actions such as opening pages, clicking on elements, and navigating websites.

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

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  // other actions...
  await browser.close();
})();

Web Scraping

Extract data from web pages by navigating to them and retrieving the content.

const { firefox } = require('playwright-core');

(async () => {
  const browser = await firefox.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  const data = await page.content();
  // process data...
  await browser.close();
})();

Automated Testing

Perform automated tests on web applications by simulating user interactions and verifying page content.

const { webkit } = require('playwright-core');

(async () => {
  const browser = await webkit.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  const title = await page.title();
  console.assert(title === 'Expected Page Title');
  await browser.close();
})();

Other packages similar to playwright-core

puppeteer

Puppeteer is a Node library which provides a high-level API over the Chrome DevTools Protocol. It is similar to playwright-core but was initially designed specifically for Chrome and later added support for Firefox. Puppeteer is developed by the Chrome DevTools team.

selenium-webdriver

Selenium WebDriver is one of the most well-known browser automation tools. It supports multiple browsers and is language-agnostic, making it a popular choice for end-to-end testing. Unlike playwright-core, Selenium requires separate drivers for each browser and might be slower in execution.

cypress

Cypress is a front-end testing tool built for the modern web. It is both a library for writing tests and a test runner that executes the tests. Cypress offers a unique interactive test runner that allows you to see commands as they execute while also viewing the application under test. It differs from playwright-core in that it is primarily focused on testing and offers a more integrated testing experience.

README

🎭 Playwright

Docs | API reference | Changelog

Playwright is a Node library to automate Chromium, Firefox and WebKit with a single API. Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.

	Linux	macOS	Windows
Chromium 84.0.4135.0	:white_check_mark:	:white_check_mark:	:white_check_mark:
WebKit 13.0.4	:white_check_mark:	:white_check_mark:	:white_check_mark:
Firefox 76.0b5	:white_check_mark:	:white_check_mark:	:white_check_mark:

Headless execution is supported for all the browsers on all platforms.

Usage

npm i playwright

This installs Playwright and browser binaries for Chromium, Firefox and WebKit. Once installed, you can require Playwright in a Node.js script and automate web browser interactions.

• Getting started
• Installation configuration
• API reference

Capabilities

Playwright is built to automate the broad and growing set of web browser capabilities used by Single Page Apps and Progressive Web Apps.

• Scenarios that span multiple page, domains and iframes
• Auto-wait for elements to be ready before executing actions (like click, fill)
• Intercept network activity for stubbing and mocking network requests
• Emulate mobile devices, geolocation, permissions
• Native input events for mouse and keyboard
• Upload and download files

Examples

Page screenshot

This code snippet navigates to whatsmyuseragent.org in Chromium, Firefox and WebKit, and saves 3 screenshots.

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://whatsmyuseragent.org/');
    await page.screenshot({ path: `example-${browserType}.png` });
    await browser.close();
  }
})();

Mobile and geolocation

This snippet emulates Mobile Safari on a device at a given geolocation, navigates to maps.google.com, performs action and takes a screenshot.

const { webkit, devices } = require('playwright');
const iPhone11 = devices['iPhone 11 Pro'];

(async () => {
  const browser = await webkit.launch();
  const context = await browser.newContext({
    ...iPhone11,
    geolocation: { longitude: 12.492507, latitude: 41.889938 },
    permissions: ['geolocation']
  });
  const page = await context.newPage();
  await page.goto('https://maps.google.com');
  await page.click('text="Your location"');
  await page.waitForRequest(/.*preview\/pwa/);
  await page.screenshot({ path: 'colosseum-iphone.png' });
  await browser.close();
})();

Evaluate in browser context

This code snippet navigates to example.com in Firefox, and executes a script in the page context.

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

(async () => {
  const browser = await firefox.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://www.example.com/');
  const dimensions = await page.evaluate(() => {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      deviceScaleFactor: window.devicePixelRatio
    }
  })
  console.log(dimensions);

  await browser.close();
})();

Intercept network requests

This code snippet sets up request routing for a WebKit page to log all network requests.

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

(async () => {
  const browser = await webkit.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  // Log and continue all network requests
  page.route('**', route => {
    console.log(route.request().url());
    route.continue();
  });

  await page.goto('http://todomvc.com');
  await browser.close();
})();

Resources

• Documentation
• API reference
• Example recipes
• Contributing
• Community showcase