Testing Modern Applications With Playwright 🎭

Introducing Playwright framework 🎭

Playwright is one of the newest and most rapidly growing headless automation libraries. Released in January 2020 by Microsoft, Playwright is a Node.js library that advertises performant, reliable, and hustle-free browser automation.

Source: https://twitter.com/playwrightweb

Some of the benefits provided by Playwright are:

• Free and Open Source.
• Single API to automate Chromium, Firefox, and WebKit.
• Support for multiple languages: the Playwright API in JavaScript, TypeScript, Python, .NET, and Java.
• Capable automation for single-page apps that rely on the modern web platform.

Moreover, Playwright has over 45.2k Star, 2.2k Fork, and 324+ contributors on GitHub, which speaks volumes about its popularity.

The above data was adopted from npm trends showing Cypress, Playwright, and Puppeteer download over the last year.

Watch this Playwright tutorial that covers everything you need to get you up and running with the Playwright framework with TypeScript.

You can subscribe to the TestMu AI YouTube Channel to stay updated with the latest tutorials on Playwright browser testing, Cypress testing, and more.

There are three main core ideas behind Playwright:

• Capable automation without trade-offs.
• Reliable automation without timeouts.
• Faster executions, just like unit tests.

Let us zoom into these three core ideas and how these are implemented in Playwright.

Run your Playwright tests with AWS marketplace directly on the cloud.

2M+ Devs and QAs rely on TestMu AI

Deliver immersive digital experiences with Next-Generation Mobile Apps and Cross Browser Testing Cloud

Sign up with googleSign up with Email

Capable automation without trade-offs in Playwright

Playwright provides full API coverage for all modern browsers:

• Chromium browsers – Google Chrome and Microsoft Edge
• Mozilla Firefox browser
• WebKit browser – Apple Safari

const { webkit } = require('playwright');
(async () => {
 const browser = await webkit.launch();
 const page = aa wait browser.newPage();
 await page.goto('http://lambdatest.com/');
 await browser.close();
})();

Playwright leverages the Chrome DevTools Protocol (CDP) to directly communicate with Chromium browsers (Chrome/Edge). This approach allows for more direct and quicker communication, and tests will be more powerful and less flaky.

• Test for mobile: Playwright provides device emulation to test your website responsiveness in mobile web browsers.
• Headless and headed. Playwright supports headless (without browser UI) and headed (with browser UI) modes for all browsers and all platforms. The headless approach is more suitable for CI/cloud executions and is quicker for debugging.
• Multiple domains, pages, and frames. Playwright is an out-of-process automation driver not limited by the scope of in-page JavaScript execution and can automate scenarios with multiple pages.
• Powerful network control. Playwright introduces context-wide network interception to stub and mock network requests.

const { chromium } = require('playwright');
(async () => {
   const browser = await chromium.launch();
   const page = await browser.newPage();
 
   await page.route('**/api/fetch_data',route => route.fulfill({
       status:200,
       body: testData
   }))
  
   await page.goto('http://lambdatest.com/');
   await browser.close();
 })();

• Modern web features. Playwright supports web components through shadow-piercing selectors, geolocation, permissions, web workers, and other modern web APIs.

const {chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage({
       colorScheme:'dark',
       geolocation: { longitude: 48.858455, latitude: 2.294474 },
       permissions: ['geolocation','notifications']
   });
await page.goto('http://lambdatest.com/');
await browser.close();
});

• Capabilities to cover all web platform API scenarios. Playwright supports file downloads and uploads, out-of-process iframes, native input events, and even dark mode.

Reliable automation without timeouts in Playwright

Reliability is the problem of automating user interactions on your application without having your tests flake. In many cases, we have to add timeouts to make their tests sleep for some time so they can reliably automate. This creates a whole bunch of problems because timeouts lead to flakiness.

Playwright uniquely solves these problems. The key feature of Playwright is that it can listen to browser events, get events from the browser, and understand what’s happening in your application when it’s running inside the browser.

For example, in the following code snippet, we launch an instance of Firefox, create a new page, and then set up an event listener for that page. Whenever the application throws a console log, it will show in the test.

const { webkit, chromium } = require('playwright');
 
 
(async () => {
   const browser = await chromium.launch();
   const page = await browser.newPage();
   // Listen for all console logs
   page.on('console', msg => console.log(msg.text()))
 
   // Listen for all console events and handle errors
   page.on('console', msg => {
       if (msg.type() === 'error')
       console.log(`Error text: "${msg.text()}"`);
   });
   await page.goto('http://lambdatest.com/');
   await browser.close();
   });

This ability to listen to events allows players to wait for precise events instead of having to wait for blanket sleep time-outs. This makes your tests highly reliable; Playwright uses this functionality internally in every interaction.

const { firefox } = require('playwright');
(async () => {
   const browser = await firefox.launch();
   const page = await browser.newPage();
    await page.goto('http://lambdatest.com/');
   await page.click('text="Book a Demo"')
   await browser.close();
});

For example, in the following example, we are launching a Firefox instance, creating a new page, visiting GitHub.com, and then clicking the sign-up button.

Here, we did not require the use of sleep timeouts waiting for the browser to completely load the page URL before clicking up the signup button. This is due to page.click() in the Playwright automatically waits for the right conditions, the elements to be visible, the element to stop animating, and the element to receive click events.

The Playwright does this all internally, so all user interactions can reliably test your applications. This makes the test significantly easier to write and maintain over time because we do not have to worry about custom wait conditions or sleep timeouts.

It also provides the user APIs to write their custom wait for conditions. These conditions also use the same event logic, which means we do not have to guess for the amount of time, we have to wait, and it helps us write the precise conditions.

Faster executions, like unit tests in Playwright

Developers and testers are happier in performing unit testing, as these tests run reliably and are fast to execute. However, this is not the case with end-to-end tests because they depend on browsers and can be very slow, especially when launching and closing a browser.

It can become a costly operation if we are running hundreds of tests and can run hundreds of browsers. To solve this in Playwright, we have a whole new abstraction layer.

const { webkit } = require('playwright');
(async () => {
   const browser = await webkit.launch();
   const context = await browser.newContext();
   const page = await browser.newPage();
   await page.goto('http://lambdatest.com/');
   await browser.close();
});

For example, we launch an instance of WebKit in this code snippet, and then we create a context in that browser instance. Here, we are then interacting with the page URL inside the context.

We have created a new abstraction layer on the browser instance called browser context. This browser context can host multiple web pages inside it. It is very cheap to spin up multiple browser contexts, and you do not have to worry about the time it takes to launch and close a browser. It significantly speeds up your test.

Properties of browser contexts:

• Contexts are completely isolated from each other – we can run hundreds of tests in multiple browser contexts, and we don’t need to worry about one instance interfering with the other.
• Supports device emulation – we can run multiple tests across multiple devices.

Here are some other powerful tools that help to generate and debug tests:

• Codegen. Generate tests by recording your actions. Save them in any language.
• Playwright inspector. Inspect the page, generate selectors, step through the test execution, see click points, and explore execution logs.
• Trace Viewer. Capture all the information to investigate the test failure. Playwright trace contains test execution screencast, live DOM snapshots, action explorer, test source, and many more.

In addition to providing a detailed overview of test execution through features such as screencasts, live DOM snapshots, action explorers, and test sources, Playwright also offers powerful selectors that enhance the testing experience. Understanding how to effectively use Playwright selectors is crucial for accurately interacting with elements on modern web applications. These selectors allow for precise targeting of elements based on various attributes, ensuring your tests are both reliable and maintainable.

Playwright supports several types of selectors, including CSS, XPath, and text selectors, enabling flexibility in how you access elements. This versatility is particularly beneficial in complex applications where traditional selectors might fall short.