BlogPlaywright
(Updated: )

What is Playwright? Everything You Need to Know

Jeff James

Playwright
puppeteer
Monitoring as Code (MaC)

Share on social

What is Playwright? An introduction to the Playwright web testing and automation framework.

What is Playwright?

Playwright is an open-source framework for cross-browser automation and end-to-end web application testing. It was designed to be a fast, reliable, robust, and evergreen test automation framework, and its API supports modern rendering engines that include Chromium, WebKit, and Firefox. Playwright tests run on Windows, Linux, and macOS, locally or on your continuous integration pipeline, and headless or headed. Playwright supports several programming languages, including TypeScript, JavaScript, Python, .NET, and Java.

Playwright growth and adoption

Since its release in January 2020 by Microsoft, Playwright has experienced a surge in usage and popularity. As of March 2023, its GitHub repository has received 48.4k stars and 2.4k forks, and is currently averaging more than 1.2 million NPM downloads per week. Playwright is used by enterprise and open-source development projects alike, including Adobe Spectrum, Visual Studio Code, and React Navigation.

Challenges addressed by Playwright

Playwright was created by the same engineering team that built Puppeteer. The Playwright team created Playwright to extend Puppeteer’s UI automation capabilities to all rendering engines, no longer just supporting Chromium. Microsoft engineers built on top of Puppeteer’s core features to provide a testing framework that met the challenges presented by today’s increasingly complex, feature-rich web applications and software development life cycles.  

Modern web applications are built as distributed systems that comprise separate components and services. This architecture is equally reflected in team organization with larger teams split into smaller pods, each responsible for a specific product requirement.  Within this distributed and service-oriented model, automated end-to-end tests must simulate real-world user test scenarios and verify that an application’s moving parts work together, as intended. End-to-end tests provide disparate product teams with the confidence needed to determine if a web application is working or not.

End-to-end tests have the reputation of being flaky and slow, while also requiring a lot of maintenance. These limitations are reflected in the Test Pyramid’s recommendation that end-to-end tests should be kept at a minimum due to their unreliability and difficulty in handling complex, feature-heavy, and service-oriented web applications.

Playwright overcomes flaky and slow tests by communicating with rendering engines via the WebSocket protocol, instead of through multiple HTTP requests, as is done with other web automation testing tools like Selenium. Playwright communicates all requests through a single web socket connection that remains active until all tests have been completed. This reduces points of test failure during test execution, providing a stable and fast solution.

Test isolation (and using Playwright Test)

Playwright Test uses full test isolation to improve reproducibility and efficiency, and to also reduce cascading test failures. During every test run, test isolation keeps each test completely separate from the other. If a test fails, it does not interfere with any other test. Each test has its own local storage, session storage, cookies, and authentication state.

// @ts-check
const { test, expect } = require("@playwright/test")


test.describe("Home", () => {
  test("Home has correct title", async ({ page }) => {
    await page.goto("https://www.checklyhq.com/")


    await expect.soft(page, "has correct title").toHaveTitle(/Checkly/)
  })


  test("Home has search", async ({ page }) => {
    // test the search is working
  })
})

Using Playwright Test to test different types of homepage functionality.

Browser Context

Test isolation is achieved by using BrowserContexts that are similar to incognito-like user profiles. This means no session data is stored on the local disk. However, you can store and load application states, like user authorization state and cookies, from other contexts reducing the need for repetitive workflows and speeding up test execution. For example, you can reuse a browser context’s signed-in state in your tests. Playwright offers a convenience method that retrieves the storage state from already authenticated browser contexts that can then be used to pre-populate new contexts with the same state.

Networking

The Playwright API allows you to monitor and modify HTTP and HTTPS traffic in your tests. By intercepting and modifying network requests, you can control response bodies, statuses, and headers to test for a complete set of application use cases. For example, generate throttling to simulate network delays and test your application’s behavior. Intercept an HTTP request and return a mocked response to test for edge cases and avoid sending time-consuming requests to the actual server.

// @ts-check
const { test, expect } = require("@playwright/test")

test("works with slow 3rd party resources", async ({ page }) => {
  // Control the network layer
  // Example: throttle all 3rd party requests
    
  page.route(
    "**",
    (route) =>
      new Promise((resolve) => {
        const requestURL = route.request().url()

        if (requestURL.match(/https:\/\/www.checklyhq.com/)) {
          resolve(route.continue())
        } else {
          setTimeout(() => {
            console.log(`Delaying ${requestURL}`)
            resolve(route.continue())
          }, 10000)
        }
      })
  )

  await page.goto("https://www.checklyhq.com")

  // more actions and assertions
})

A Playwright test script used to throttle and delay network requests to evaluate their performance impact.

Writing tests and debugging

Playwright tests take a straightforward approach; they perform an action and assert the state against enumerated expectations. By default, prior to performing an action, Playwright conducts actionability checks on elements to ensure that the action will be successful. When performing checks, race conditions are eliminated with Playwright’s async matchers that wait until an expected condition is met.

You can use  Playwright’s GUI tool to help debug your Playwright test scripts. It includes several features that are common to most debugging tools, like element highlighting while stepping through each line of your test and the ability to explore selectors. It also provides actionability logs that display the actionability tests that Playwright takes before performing an action.

Playwright features

While taking a simplified approach to its design, Playwright offers many features that make it unique, but competitive with several other leading test automation tools, like Cypress and Puppeteer. While we’ve discussed some of the key features in more detail above, some additional noteworthy features include:

  • Provides mobile emulation to test your application for Google Chrome for Android and Mobile Safari.
  • Generates video recordings of browser sessions.
  • Performs actionability checks on elements before taking actions to ensure the actions operate as expected. Only after all relevant checks pass is the requested action performed.
  • Provides web-first assertions that accommodate the dynamic web. Only if the specified conditions are met, will Playwright automatically retire the check.
  • Enables viewing and saving your test’s execution trace as action logs, videos, snapshots, and screenshots.
  • Includes configure options to automatically re-run a test when it fails.
  • Runs tests out of process to accommodate modern web browser architecture. It can automate web application scenarios using multiple pages and so, is not limited by the scope of in-page JavaScript execution.
  • Supports stub and mock network requests using context-wide network interception. You can modify and monitor network traffic, including XHRS and fetch requests.
  • Each test receives its own browser context. This provides full test isolation that is fast and lightweight.
  • Avoids repetitive and expensive log-in operations for each test, while maintaining individual test isolation.
  • Allows you to generate tests from your recorded actions and save them in any supported language.
  • Offers a Playwright inspector to inspect your page, generate selectors, step through the test execution, and explore execution logs.

Playwright and Checkly

If your team already uses Playwright to automate your end-to-end web application and cross browser testing, you can run your Checkly browser checks using the Playwright Test Runner. This enhances Checkly’s monitoring and debugging experience with several of the features for which Playwright is known, including video recordings of browser sessions, detailed trace files with step-by-step information on your test cases, many web-first assertions, and high-level locators.

Editor’s Note: Many thanks to Playwright AmbassadorsPlaywright Ambassadors Stefan Judis ( Stefan Judis (@stefanjudis) and Giovanni Rago (@stefanjudis) and Giovanni Rago ( Many thanks to Playwright Ambassadors Stefan Judis (@stefanjudis) and Giovanni Rago (Playwright Ambassadors Stefan Judis (@stefanjudis) and Giovanni Rago ( Stefan Judis (@stefanjudis) and Giovanni Rago () and Giovanni Rago (@rag0g) for the code samples and technical review.) for the code samples and technical review.

Related Content

Share on social