Playwright - new warrior in the automation arena
Playwright enables reliable end-to-end testing for modern web apps.
In recent years, we have witnessed major changes in web development technology, web browser vendors are now more aligned towards the JavaScript engine, and websites these days are often referred to as Web Apps. These apps are running across multiple devices and on different browsers. Hence web developers and testers are now more committed to cross-browser and end-to-end testing of web apps in every release cycle. Single Page Apps and Progressive Web Apps are the two major evolution's in the current scenario.
In reality, it is difficult to test the web app in all major browsers and match the expected result, as one web element may work perfectly on one browser but can give weird behavior on another browser. Recently I’ve come across a new test automation tool — “Playwright” which efficiently handles the cross-browser end-to-end tests. It can be used for browser automation by developers and as an end-to-end test automation tool for testers.
So what are we waiting for? Let’s get deep dive into it!
Introduction and Setup
Playwright is a Node.js library to automate Chromium, Firefox, and WebKit with a single API. It is built to enable cross-browser web automation that is ever-green, capable, reliable, and fast. Playwright is the successor of “Puppeteer” and created by the same people who created the predecessor. With Playwright API, you can write JavaScript code to create new browser pages, navigate to URLs and then interact with elements on a page.
Puppeteer supports only chrome browser family whereas Playwright supports multiple browsers.
To install the tool, write the following command in a terminal:
$ npm i -D playwrighthere i and -D are the shorthand for install and — save-dev.
This single command downloads the Playwright NPM package and browser binaries for Chromium, Firefox, and WebKit.
Now create a directory, navigate into it, and do npm init (create a package.json with default options)
npm init -yI am a huge fan of behavior-driven testing so couldn't resist giving it a BDD flavor. We can use cucumber.js as a test runner by installing it as a dev dependency:
npm i -D @cucumber/cucumberVoila! We have now successfully installed Playwright with Cucumber.
Core Concepts
- Browser, Context, and Page
- Cross-Browser Testing
- Auto-waiting
- Page Object Models
- Screenshots and Video
- Continuous Integration
Browser, Context, and Page
In Playwright, a Browser refers to an instance of Chromium, Firefox, or WebKit. Playwright scripts generally start with launching a browser instance and end with closing the browser.
A BrowserContext is an isolated incognito-alike session within a browser instance. Browser contexts are fast and cheap to create. Browser contexts can be used to parallelize isolated test executions:
A browser Context can have multiple pages. A Page refers to a single tab or a popup window within a browser context. It should be used to navigate to URLs and interact with the page content.
Cross-Browser Testing
Playwright can test web apps across multiple browsers: Chromium-based browsers like Google Chrome and the new Microsoft Edge, WebKit-based Apple Safari, and the Gecko-based Mozilla Firefox. The good thing about Playwright is, we don't need to close the test session (for the next browser) to perform cross-browser tests. This feature makes the tool unique from the current generation automation tools.
let see the code below which run’s the cross-browser test and takes the screenshot for each page:
Auto-waiting
Playwright performs a range of actionability checks on the elements before making actions to ensure these actions behave as expected. It auto-waits for all the relevant checks to pass and only then performs the requested action. If the required checks do not pass within the given timeout, the action fails with the TimeoutError.
For example, on page.click(selector[, options]), Playwright will ensure that:
- element is Attached to the DOM
- element is Visible
- element is Stable, as in not animating or completed animation
- element Receives Events, as in not obscured by other elements
- element is Enabled
Page-Objects
Page Object is a Design Pattern that has become popular in test automation for enhancing test maintenance and reducing code duplication. A page object is an object-oriented class that serves as an interface to a page of your AUT. The tests then use the methods of this page object class whenever they need to interact with the UI of that page. The benefit is that if the UI changes for the page, the tests themselves don’t need to change, only the code within the page object needs to change. Subsequently, all changes to support that new UI are located in one place.
An example I’ve created for Login Page:
and here is how I’ve used these page methods in my step definition file. This way my code looks cleaner, simple, and reusable.
Screenshots and Video
There is three-way in which we can capture an application state with Playwright.
- Full Page screenshot
- Element screenshot
- Capture into a buffer
Continuous Integration
Running the Playwright tests in a CI server is quite easy and can be divided into 3 sections:
- First, we need to make sure that CI agents can run browsers: Use Playwright Docker image in Linux agents. Windows and macOS agents do not require any additional dependencies.
- Install Dependencies: $ npm install or $ npm ci
- Run the tests: $ npm test
CI Configuration
- Github Action: Here is how I’ve created a YAML file with the below code and placed it in the .github/workflow directory.
2. Jenkins: Jenkins supports Docker agents for pipelines. Use can use the Playwright Docker image to run tests on Jenkins. Below is the pipeline flow in a .jenkinfile
Final Thought
Playwright belongs to the modern generation test automation tools family and is quite useful in cross-browser testing especially for WebKit (safari browser). It has a CLI tool also which generates the code for test automation. With a docker image, this can be easily integrated with different CI tools. Well, this was pretty much about the tool and its basic features.
If you are looking for BDD test support with Playwright and want to generate the cucumber HTML report with the failure screenshot attached and run your test cases on every push to the git branch, then you may wanna check out my git repository. It has all the examples I have explained in this post.
Thanks for reading! If you think that this post is useful for your next automation setup with playwright, then please click a few “clap” below and leave any feedback or questions in the comments section.
Source Code: https://github.com/PrinceSoni83/playwright-cucumber-js-e2e-boilerplate
