Nowadays web applications are highly rich and responsive. Modern web applications are designed to execute many operations on a single page. The highly responsive behaviors were mostly driven by processing asynchronous events. The web application contains numerous asynchronous events, and handling these events in automation is predictably hard.
In specific cases, a network takes a little longer to load and prevents the UI from being ready for a script to interact with because it’s still loading behind the scenes. In some cases, the script has to move to a particular frame in the web app or a new popup window has to be released and the script has to switch context and automate that window. There are tons of scenarios like this, because of this asynchronous nature which creates difficulty for automation to work.
To tackle these issues, the concept of brittleness or flakiness comes into play. The majority of existing frameworks are attempting to improve on these aspects. To overcome these circumstances, Microsoft developed Playwright, an innovative Web Automation tool that could keep up with the modern approach to web development.
It supports all Modern web rendering engines such as Chromium (Google Chrome, MS Edge, Opera, Brave, etc.,), WebKit (Apple Safari), and Mozilla Firefox. With Playwright we can also test how the applications behave on Windows, Linux, and macOS, locally or on CI. Playwright stimulates mobile browsers such as Google Chrome for Android and Safari for IOS to test the web apps in Mobile web browsers.
The Playwright provides capabilities like automated visual testing and screenshot testing, and it supports CI/CD (through Jenkins, Azure Pipelines, etc.). Instead of the WebDriver API and HTTP, Playwright uses a WebSocket connection. Everything is sent via one connection because this remains open during the test. This makes playwright execution speed faster than traditional automation frameworks.
Features of Playwright
In this part let’s see some of the features and how it remarkably helpful in Automating web applications.
Auto-Wait: One of the most impressive features of the playwright is its Auto-wait technology. In the traditional frameworks, testers are required to give stoppers whenever a new element has to emerge on the web app. If the element doesn’t show up in the given time, the test gets fails. But in Playwright the auto wait function waits until the element shows up and perform the required action only after the element was displayed in the application. It makes a huge impact on reducing brittle and flakiness.
Assertion: Playwright offers numerous methods to check the actionability state of the element. These assertions are helpful in writing assertive tests like ensuring elements reached an actionable state after performing given action. These assertions were created as handling the Dynamic Web. Assertions check the condition and retire automatically after the given condition is performed.
Browser Context: It is nothing but creating a fresh browser profile for each test. This feature is more helpful in parallel testing, Browser Context gives the test to run in full isolation without a single overlap and it takes only milliseconds to create. Additionally, browser context makes it possible to simulate situations when the device viewport, permissions, or GEO locations are changed across various sites.
Codegen: It is one of the coolest features of the playwright. With the help of Codegen we can simply open the web application and do all the required actions, Codegen automatically generates code for actions that we have done in the web application. We can save the code in any language supported by Playwright.
Playwright Inspector: It is another impressive feature of the playwright. While using Playwright Inspector it generates the Inspect page, which carries all of our code in the required test. We can inspect our code line by line to see how it interacts with the web app and simply check the execution log by using this. Inspect page also generates selectors by simply clicking the required elements in the application.
Playwright Fixtures: The Playwright Test is built on the test fixture concept. Test fixtures are used to create an environment for each test, providing it with all test’s requirements. Playwright Test evaluates each test declaration, analyze the collection of fixtures required for the test, and prepare those fixtures for the particularly test before it runs. The fixtures values are consolidated into a single object, which is provided as a first parameter to the test, hooks, annotations, and other fixtures.
Playwright Test includes the fixtures
We can also add our own fixtures if required. Playwright Test also allows us to customize fixtures.browser, fixtures.context, and fixtures.page..
Playwright Installation for Nodejs:
Before getting into the playwright installation let’s see the requirements for the Playwright.
Nodejs Requirement: Playwright requires a node.js version that is 14 or above.
To Install Playwright the system required browser binaries for Chromium, Firefox, and WebKit for the major three platforms Windows, macOS, and Linux.
Windows: Playwright works perfectly fine with windows or above Windows Subsystem for Linux (WSL).
Mac OS: Mac Users required MAC OS 11 (Big Sur) or above.
Linux: Based on the version of Linux, users are required to install additional dependencies to run the browsers. Only Ubuntu 18.04 and 20.04 are officially supported by Playwright.
How to Install:
npm init playwright@latest
- Then we need to Name the Test Folder, that we are going to use in the project.
- We can add GitHub actions for workflow if required or we can do it when required.
- Then Playwright asks permission to install all the required browsers, we can also install them manually.
- Then Playwright will be installed and show some of the run commands in it.
Playwright Test Execution:
After Installing Playwright, the tests-examples folder and playwright.config were created in our system. The tests-examples folder contains basic example tests, which we can run and check the execution if required, and playwright.config is the playwright’s configuration page, where we can modify our test execution as required.
By default, tests will be run on all 3 browsers, chromium, Firefox, and WebKit using 3 workers. By modifying the configuration page, we can test on One Browser or Multiple Browsers in single execution and manage a number of workers in test execution We can also run One test or Group of Tests or all the tests in the folder in a single execution. Everything can be handled in one line command. Let’s see how to execute tests in Playwright.
Playwright Script Writing
We can write and edit the test scripts by using Microsoft Visual Studio Code. There is a VS Code Extension for Playwright, which helps for better debugging and we can also run tests, add breakpoints and debug the tests from the VS Code editor directly.
Playwright Command Lines to Run Test
To run all the tests in the test folder: npx playwright test
To run Single Test: npx playwright test landing-page.spec.js (landing-page.spec.js is the test name)
To run the test in a particular folder: npx playwright test tests/todo/ tests/landing-page (tests/todo/ tests/landing-page is folder path)
To run Test in Headed mode: npx playwright test landing-page.spec.js –headed (to run headless we can do it by just removing –headed)
To run the test in a Specific Browser: npx playwright test landing-page.js –project=chromium
Because Playwright is written in Node.js, testers may use their desired debugger, such as console.log, inside their IDE, or directly in VS Code using the VS Code Extension. We can simply use –debug word at the end of the run command to run the debugger. While running the debugger, the Playwright Inspector will be opened, which allows you to walk through Playwright API calls, view debug logs, and investigate selectors.
The Playwright Trace Viewer is a graphical user interface application that allows us to view recorded Playwright traces after the test has run. Traces may be seen locally or in your browser at trace.playwright.dev. In Trace Viewer, we can see all the actions that the playwright has done in the test such as action snapshots, action logs, source code location, and network log for this action. In the properties pane, we can also render DOM snapshots associated with each action.
The HTML Reporter displays a complete analysis of your tests, including filters for browsers, successful tests, failed tests, skipped tests, and flaky tests. If any of the tests fail, the HTML report is instantly opened.
The playwright is a fresh automation tool. In a short time, Playwright gained popularity and stand out from the traditional automation frameworks because of its modern approach to web apps. It supports several operating systems, browsers, and languages and has practical components like auto-waiting.
Even for complex testing projects, it often runs relatively fast because it was designed primarily for modern web apps. Even though it seems like a newbie, the playwright runs seamlessly like Selenium. Microsoft making constant updates on Playwright. The playwright cannot be compared with traditional automation tools but its newer approach makes automation testing reliable and fast.