#browser-automation #cross-browser-testing #node-js ## Purpose [**playwright**](https://www.npmjs.com/package/playwright) is a tool for automating browser tests. It is a spin-off of Puppeteer and therefore shares the same architecture. There are some differences when it comes to the API, though. One of the biggest difference compared to Puppeteer is that Playwright can not only automate Chromium-based browsers, but also Firefox and WebKit. ## Documentation entry points - [playwright.dev](https://playwright.dev) - [Getting started](https://playwright.dev/docs/intro) - [`npm init playwright`](https://twitter.com/playwrightweb/status/1443932735744188416) ## Terminology - There are two flavors of Playwright - [Playwright Test](https://www.npmjs.com/package/@playwright/test) (includes a test runner) - [Playwright Library](https://www.npmjs.com/package/playwright) (excludes the test runner) - **[Browser](https://playwright.dev/docs/1.16/core-concepts#browser)** refers to an instance of the browser - **[Browser context](https://playwright.dev/docs/api/class-browsercontext)** "is an isolated incognito-alike session within a browser instance" (quote taken from an older/no longer available docs page). Its purpose is to get as close as possible to the behavior of a new browser instance, but without actually creating a new instance - The **[Page](https://playwright.dev/docs/1.16/core-concepts/#pages-and-frames)** "refers to a single tab or a popup window within a browser context". This is what is called in the actual test cases to interact with the web app ## Cool features - `npx playwright codegen <url>`: Opens the given URL in a Playwright-controlled browser, where Playwright translates all interactions with the page into code. This is quite usable, but as with every record/playback tool, manual adjustments are necessary to end up with clean/maintainable code - Parallel browser execution - [Debug mode](https://playwright.dev/docs/debug#run-in-debug-mode) - The option to record traces (and DOM snapshots) during a test run and to inspect them afterwards with the "[Trace Viewer](https://playwright.dev/docs/trace-viewer)" - A heuristic for detecting the intended selector - When connected to VSCode for debugging, it is possible to highlight an element occurrence in VSCode by typing `playwright.$(elementSelector)` in the browser console - Video recordings - Proper isolation of test cases with [browser contexts](https://playwright.dev/docs/browser-contexts/). The `page` fixture in **@playwright/test** already makes use of that isolation ## Playwright architecture The Playwright architecture is similar to that of Puppeteer, so the Playwright client directly talks to the browser via WebSocket connection, using the [[Chrome DevTools Protocol (CDP)]]. ![[playwright-architecture.png]] -- [Lucidchart edit view](https://app.lucidchart.com/documents/edit/fb35594a-defd-428f-b938-5e6a67ca8e28/HWEp-vi-RSFO) ## Cross-browser support Playwright offers support for Chromium, Firefox and WebKit, each of which can be running on Linux, macOS and Windows. There are a few things to point out: - With each upgrade of **@playwright/test**, the browsers need to be upgraded as well with `npx playwright install`. In other words: Each version of the **playwright** package is tied to a certain set of browser versions - The Chromium version shipped with Playwright is several versions ahead of the current stable version. The Firefox version on the contrary is a Nightly version, but not the latest one - Playwright tests can be run inside a Docker container. Most people are probably using Linux inside their containers. To run e.g. Firefox on Windows, one has to create a Docker image with Windows of course. The last time I heard of that, this seemed to be quite tricky. That was even more the case for macOS. But with CI providers/tools like [[Travis]] or [[GitHub Actions]], this is not a thing to worry about - they offer Windows and macOS environments - I doubt that a test in the WebKit browser, especially when run on Linux, can replace a test in a proper Safari instance - Mobile browser testing is not possible ([currently out of scope](https://github.com/microsoft/playwright/issues/1122#issuecomment-591660587)). Playwright uses the mobile emulation features of desktop browsers instead - Almost all the names of the [`playwright.devices`](https://playwright.dev/docs/api/class-playwright#playwright-devices) are misleading. For example, Chromium is called "Desktop Chrome", WebKit is called "Desktop Safari" and "Mobile Safari" ## Learnings - With the out-of-the-box configuration, Playwright downloads/installs the browser binaries it comes shipped with on every CI run. This takes 50-60 seconds in total (can be improved with caching, I guess) - [`CDPSession`](https://playwright.dev/docs/api/class-cdpsession) can only be used with a Chromium-based browser ([[Chrome DevTools Protocol (CDP) in WebDriver|WebDriver]] can talk CDP with Firefox as well) - Geolocation emulation seems to be a bit tricky. I was not able to get it to work as described in the [Playwright docs](https://playwright.dev/docs/emulation#geolocation). Despite having set `permissions: ['geolocation']`, it does not seem to have an effect in the browser (Chromium 96, Firefox Nightly 92), where I was able to still see the permission dialog popping up ## (Remote) execution In CI context, the browsers spun up by Playwright are usually running inside a Docker container. There are some other flavors of execution as well. ### With Sauce Testrunner Toolkit [[Sauce Testrunner Toolkit#Playwright]] ### With `chromium.connectOverCDP()` Automation of remote browsers as it is known from [[+Selenium|Selenium]] is not something baked into Playwright's architecture. But there is a way to control a Chromium-based browser that is running on a Selenium Grid. This [presentation](https://twitter.com/playwrightweb/status/1396888674889912323) contains a hint on [`chromium.connectOverCDP()`](https://playwright.dev/docs/api/class-browsertype/#browser-type-connect-over-cdp) which makes that possible. In the meantime, there is now also a dedicated page on [connecting to a Selenium Grid](https://playwright.dev/docs/next/selenium-grid). ## Repository for experiments [https://github.com/systemboogie/explore-playwright](https://github.com/systemboogie/explore-playwright) ## Interesting third-party articles - [Playing with Playwright](https://alisterbscott.com/2020/02/11/playing-with-playwright/) by Alister B. Scott - [Playwright: A New Test Automation Framework for the Modern Web](https://applitools.com/event/playwright-a-new-test-automation-framework-for-the-modern-web/), an Applitools Webinar - plus all the answers from the [Q&A session](https://docs.google.com/spreadsheets/u/0/d/1aWYwAt_9B2zlshPLGXYwGbpsccyvOkubmOhTd8wLnJg/htmlview)