Browser automation with Playwright

Playwright is a headless browser library for automating browser tasks. Here's the list of some of the features (Playwright equivalents to the Puppeteer note):

• Turn off headless mode

  import { chromium } from 'playwright';
  const browser = await chromium.launch({
    headless: false
    // ...
  });

• Resize the viewport to the window size

  const context = await browser.newContext({
    viewport: null
  });
  const page = await context.newPage();

• Emulate screen how it's shown to the user via the emulateMedia method

  await page.emulateMedia({ media: 'screen' });

• Save the page as a PDF file with a specified path, format, scale factor, and page range

  await page.pdf({
    path: 'path.pdf',
    format: 'A3',
    scale: 1,
    pageRanges: '1-2',
    printBackground: true
  });

• Use preexisting user's credentials to skip logging in to some websites. The user data directory is a parent of the Profile Path value from the chrome://version page. Use launchPersistentContext instead of launch + newContext.

  import { chromium } from 'playwright';
  const context = await chromium.launchPersistentContext(
    'C:\\Users\\<USERNAME>\\AppData\\Local\\Google\\Chrome\\User Data',
    { headless: false }
  );
  const page = context.pages()[0] ?? (await context.newPage());

• Use Chrome instance instead of Chromium via the channel option. Close Chrome before running the script if the profile is in use.

  import { chromium } from 'playwright';
  const browser = await chromium.launch({
    channel: 'chrome'
    // ...
  });

• Switch to the selected tab

  await page.bringToFront();

• Get value based on evaluation in the browser page

  const shouldPaginate = await page.evaluate(
    ([param1, param2]) => {
      // ...
    },
    [param1, param2]
  );

• Get HTML content from the specific element

  const html = await page.locator('.field--text').evaluate(
    (element) => element.outerHTML
  );

• Wait for a specific selector to be loaded. You can also provide a timeout in milliseconds

  await page.waitForSelector('.success', { timeout: 5000 });

• Manipulate with a specific element and click on some of the elements

  await page.locator('#header').evaluate(async (headerElement) => {
    // ...
    headerElement
      .querySelectorAll('svg')
      .item(13)
      .parentNode.click();
  });

• Extend execution timeout for slow evaluate callbacks

  page.setDefaultTimeout(0);
  // or per action:
  await page.locator('#header').evaluate(async (headerElement) => {
    // ...
  }, { timeout: 0 });

• Manipulate with multiple elements

  await page.locator('.some-class').evaluateAll(async (elements) => {
    // ...
  });

• Wait for navigation (e.g., form submitting) to be done

  await page.waitForLoadState('networkidle', { timeout: 0 });

  Or wait for navigation triggered by a click:

  await Promise.all([
    page.waitForNavigation({ waitUntil: 'networkidle', timeout: 0 }),
    page.click('button[type="submit"]')
  ]);

• Trigger hover event on some of the elements

  await page.locator('#header').hover();

  Or dispatch a custom event in the page:

  await page.locator('#header').evaluate((headerElement) => {
    const hoverEvent = new MouseEvent('mouseover', {
      view: window,
      bubbles: true,
      cancelable: true
    });
    headerElement.dispatchEvent(hoverEvent);
  });

• Expose a function in the browser and use it in evaluate / evaluateAll callbacks (e.g., simulate typing using the window.type function)

  await page.exposeFunction('type', async (selector, text, options) => {
    await page.locator(selector).type(text, options);
  });
  await page.locator('.some-class').evaluateAll(async (elements) => {
    // ...
    await window.type(selector, text, { delay: 0 });
  });

• Press the Enter button after typing the input field value

  await page.locator(selector).fill(text);
  await page.locator(selector).press('Enter');

• Open a file chooser and select file for upload

  const fileChooserPromise = page.waitForEvent('filechooser');
  await page.locator(selector).click();
  const fileChooser = await fileChooserPromise;
  const filePath = `C:/Users/<USERNAME>/Downloads/test.jpeg`; // use "/" instead of "\" in file path
  await fileChooser.setFiles(filePath);

• Remove the value from the input field before typing the new one

  await page.locator(selector).fill(text);

  Or select all and replace:

  await page.locator(selector).click({ clickCount: 3 });
  await page.locator(selector).type(text, options);

• Pass a variable into evaluate / evaluateAll callbacks via extra arguments

  await page.locator('#element').evaluate(
    async (element, customVariable) => {
      // ...
    },
    customVariable
  );

• Mock response for the specific request

  await page.route(REDIRECTION_URL, async (route) => {
    await route.fulfill({
      contentType: 'text/html',
      status: 304,
      body: '<body></body>'
    });
  });

• Intercept page redirections (via route) and open them in new tabs rather than following them in the same tab

  await page.route(REDIRECTION_URL, async (route) => {
    const url = route.request().url();
    await route.fulfill({
      contentType: 'text/html',
      status: 304,
      body: '<body></body>'
    });
    const newPage = await context.newPage();
    await newPage.goto(url, { waitUntil: 'domcontentloaded', timeout: 0 });
    // ...
    await newPage.close();
  });

• Intercept page response

  page.on('response', async (response) => {
    if (response.url() === RESPONSE_URL) {
      if (response.status() === 200) {
        // ...
      }
      // ...
    }
  });