Introduction to Playwright, a powerful end-to-end testing tool

Playwright

Playwright is an open source UI automation testing tool from Microsoft. Its first version, v0.10.0, was released in early February 2020, and the latest version is v1.18.0, which is still iterating quickly.

As an end-to-end testing tool, Playwright has won over more and more developers in just the past two years.Best of JS The website compares the number of new stars added to GitHub in 2021 for each testing framework, and Playwright is at the top of the list, which shows its popularity. In this article, we will introduce some features of Playwright.

cross-browser

Playwright supports all modern browser kernels, including Chromium, WebKit and Firefox, so the major browsers Chrome, Edge, Firefox, Opera and Opera are all supported. Playwright is a good choice if you want to test the compatibility of your pages, as Puppeteer supports fewer browsers.

Multi-programming language support

Playwright provides APIs for a variety of programming languages, including TypeScript, JavaScript, Python, .NET, and Java, and engineers other than front-end developers can choose to develop functionality in a language they are familiar with. For example, a test engineer might be more familiar with Python. In terms of language support, Puppeteer doesn't do a very good job, and many people are complaining that its Python API is hard to use.

const { chromium, firefox, webkit } = require('playwright');
(async () => {
  const browser = await ();  // Or 'firefox' or 'webkit'.
  const page = await ();
  await ('');
  // other actions...
  await ();
})();

Save login information

In testing, there are often scenarios where a page is logged in, and in order to avoid multiple logins in unit testing, Playwright provides the ability to save the login context information. Simply reload the saved login information into the page to restore the user to the logged in state.

Isolation of the execution environment

Playwright adds the concept of Context, which provides isolated execution environments within a single browser instance. This is especially useful when testing multiple pages at the same time, making it easy to switch between pages frequently. Each page executes in its own Context, and there is no interference between pages, including information such as cookies.

const { chromium } = require('playwright');
// Create a Chromium browser instance
const browser = await ();
// Create two isolated browser contexts
const userContext = await ();
const adminContext = await ();
// Create pages and interact with contexts independently

picker

Playwright supports a variety of element positioning methods, such as CSS selectors, XPath selectors, etc., and is relatively user-friendly.

// Clicks a <button> that has either a "Log in" or "Sign in" text.
await ('button:has-text("Log in"), button:has-text("Sign in")').click();

autowait

Playwright performs a series of operability checks before interacting with an element (e.g., clicking on an action) to ensure that the actions work as expected. It automatically waits for all relevant checks to pass before executing the relevant action. This prevents elements from failing interactions because they are not rendered. In some other testing frameworks, developers need to manually set the wait time themselves, and the manually set time is often imprecise.

Testing Framework

Playwright as a testing framework , integrated assertions , API testing , test annotations and other features . In the testing field, Playwright should be benchmarked against Selenium, and there will be more application scenarios in the testing field. In terms of development experience and operation efficiency, Playwright can be said to be the later to catch up, the application of new technologies make it far better than Selenium, in addition, in the mobile support, and script recording, Playwright also has a very good performance.

import { test, expect } from '@playwright/test';
test('basic test', async ({ page }) => {
  await ('/');
  const title = ('.navbar__inner .navbar__title');
  await expect(title).toHaveText('Playwright');
});

This article only on Playwright to do some simple introduction, not in-depth development, from the current use of the trend and heat, it is still necessary to carry out a certain understanding of it and pay attention to more information about the end-to-end testing tool Playwright, please pay attention to my other related articles!