Automate Microsoft Edge and Google Chrome with Playwright

Control Chromium-based browsers like Google Chrome, Microsoft Edge, or Brave with Node.js.

By Max Schmitt, Published on 7/3/2020

Introduction

Testing a web application with end-to-end tests on the actually supported browsers is a real benefit to ensure that the application works as expected for example directly in the Continuous Integration workflow before it is merged and deployed. Playwright provides already full support for Chromium, Firefox, and WebKit out of the box without installing the browsers manually, but since most of the users out there use Google Chrome or Microsoft Edge instead of the Open Source Chromium variant, it's in some scenarios safer to use them to emulate a more real-life browser environment.

General

Since these browsers are based on the Chromium browser, Playwright interacts with them over the Chrome DevTools Protocol to open new tabs, click on elements or execute JavaScript. Due to this core requirement, we have to use a recent version (daily build - Canary) of them to ensure that the needed APIs schemas are matching and existing. To use them we have to only adjust the executable path option which Playwright will use to launch the browsers.

On macOS systems, the browsers are installed in the /Applications directory, where you have inside the related binaries. For Linux, the browsers are commonly installed in the /usr/bin directory, you'll find some examples below. On Windows systems, the browsers are installed in the C:\Program Files (x86)\ directory.

Note: To easier find out the executable path of the browsers, you can open the version page of the related browser. This would be edge://version, chrome://version or brave://version depending your browser. On this special site, you'll find the correct executable path if you have a GUI installed.

Browsers

const playwright = require("playwright-core");
(async () => {
  const browser = await playwright.chromium.launch({
    headless: false,
    executablePath: `/Applications/Microsoft\ Edge\ Canary.app/Contents/MacOS/Microsoft\ Edge\ Canary`
  })
  const page = await browser.newPage()
  await page.setContent(`<input id="foo">`)
  await page.type("#foo", "keksstar")
  console.log(await page.content())
  await page.screenshot({ path: "screenshot.png" })
  console.log(await page.evaluate(() => window.navigator.userAgent))
  // -> 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.0 Safari/537.36 Edg/85.0.563.0'
  await browser.close()
})()

In the next couple of examples, we're gonna focus on the different browsers, which operating systems they support, where you can download them, and what executable path you need to set. This example demonstrates the basic usage by specifying the executablePath which launches Microsoft Edge instead of the normal Chromium. Also, we're using the playwright-core package, which only installs the library instead of downloading the browsers which we don't need in our case.

Google Chrome

Google Chrome is available for all the major operating systems and can be downloaded on the official website. To use Playwright, we need a recent Canary build. For Linux, it is common to install it via their APT repository, see e.g. this guide also keep in mind then to install the Canary variant: apt install google-chrome-unstable

Microsoft Edge

Microsoft Edge is only available for macOS and Windows and can be downloaded on the official website. Until now (Mid 2020) no Linux build was released. (It was announced in 2019 and confirmed the existence in Mid 2020 on their yearly Microsoft Build 2020 conference.) To use Playwright, we need a recent Canary build.

Brave

Brave itself does not rely on the official Chromium release schedule, that's why their latest versions are not the same as Chromium. Because of that it's not guaranteed, that all Playwright functionality is working out of the box. If you want to still try it out, you can obtain their Nightly version on their official website.

Other Chromium browsers

Other popular Chromium-based browsers like Vivaldi and Opera are not yet working which is tracked in this GitHub issue. For Firefox and WebKit, you have to use the attached

Summary

In this blog article, we went through an overview of how to use other Chromium-based browsers and control them with the Playwright library. We strongly advise, that these browsers will only be used when you need to test a very specific browser feature. For follow up usage and documentation about Playwright features, you'll find more on their official website playwright.dev.