E2E Implementation of Web Test Automation using Playwright

Muzammil Ahmed

Published in

CodeX

5 min readSep 7, 2021

Dramatists; Just as a poet writes poems, a playwright writes plays.

Automating web browser interactions is a great way to test the functionalities of our web applications.

Introduction

The Playwright is an open-source Node.js library for browser automation that is built on top of Puppeteer. It is developed by the authors of Puppeteer and maintained by Microsoft, if you notice the top two contributors to Puppeteer now work on Playwright. The Puppeteer team essentially moved from Google to Microsoft and became the Playwright team. In this article, let’s look into a web framework developed using Playwright, Playwright-test and Typescript and explore its capabilities.

Why Playwright

Playwright enables fast, reliable, and capable testing and automation across all modern browsers. This guide covers those key differentiators to help you decide on the right tool for your automated tests.

Support for all browsers

Test on Chromium, Firefox, and WebKit. The playwright has full API coverage for all modern browsers, including Google Chrome and Microsoft Edge (with Chromium), Apple Safari (with WebKit), and Mozilla Firefox.
Cross-platform WebKit testing. With Playwright, test how your app behaves in Apple Safari with WebKit builds for Windows, Linux, and macOS. Test locally and on CI.
Mobile test. Use device emulation to test your responsive web apps 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. Headed is great for debugging, and headless is faster and suited for CI/cloud executions.

Fast and reliable execution

Auto-wait APIs. Playwright interactions auto-wait for elements to be ready. This improves reliability and simplifies test authoring.
Timeout-free automation. Playwright receives browser signals, like network requests, page navigations, and page load events to eliminate the need for sleep timeouts that cause flakiness.
Fast isolation with browser contexts. Reuse a single browser instance for multiple isolated execution environments with browser contexts.
Resilient element selectors. The playwright can rely on user-facing strings, like text content and accessibility labels to select elements. These strings are more resilient than selectors tightly coupled to the DOM structure.

Powerful automation capabilities

Multiple domains, pages, and frames. The playwright is an out-of-process automation driver that is 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.
Modern web features. Playwright supports web components through shadow-piercing selectors, geolocation, permissions, web workers, and other modern web APIs.
Capabilities to cover all scenarios. Support for file downloads and uploads, out-of-process iframes, native input events, and even dark mode.

Getting started

The playwright can either be used as a part of the Playwright Test (this guide), or as a Playwright Library.

Playwright Test was created specifically to accommodate the needs of end-to-end testing. It does everything you would expect from the regular test runner and more. Playwright test allows to:

Run tests across all browsers.
Execute tests in parallel.
Enjoy context isolation out of the box.
Capture videos, screenshots, and other artifacts on failure.
Integrate your POMs as extensible fixtures

Installation

The playwright has its own test runner for end-to-end tests, we call it the Playwright Test.

npm i -D @playwright/test# install supported browsersnpx playwright install

Creating a configuration file

So far, we’ve looked at the zero-config operation of the Playwright Test. For a real-world application, you would likely want to use a config.

Create playwright.config.js to configure your tests. You can specify browser launch options, run tests in multiple browsers, and much more with the config. Here is an example configuration that runs every test in Chromium, Firefox, and WebKit, both Desktop and Mobile versions. Look for more options in the configuration section.

Configure NPM script to run tests. Playwright Test will automatically pick up playwright.config.js .

If you put your configuration file in a different place, pass it with --config option.

Environment Setup

First things first, let’s set up the development environment for working on a reactJS based web application.

Use the following command to add a new react project without installing react CLI globally:

$ npm create-react-app myapp
$ cd myapp
$ npm start

Folder Structure

../Pages/XYZ/Components/*.jsx

All the components should bear named export. This will avoid any conflicts.
Components that consist of complex logic.
TIP: Try to create named-exports instead of default exports for all the components. This will avoid any naming conflicts.

../Pages/XYZ/_test_/*.test.js

All the components testcases should be write here.

Let’s Write Test Case!

Login Component (..Pages/Login/Components/Login.jsx)

Login Component Test Cases (..Pages/Login/_test_/Login.test.js)

Console

$ npm run test

Playwright starter code is available at Git.

Many Other Playwright function is still remaining to discover

Choosing a library

Because Playwright and Puppeteer were largely developed by the same team and have such similar APIs, migrating from Puppeteer to Playwright isn’t too difficult. Yet you shouldn’t choose Playwright over Puppeteer just because Playwright is newer — Playwright just reached a 1.0 release, so the API may get breaking changes.

I think the three main factors to consider are cross-browser support, long-term library support, and your particular use case for browser automation.

Play with Playwright Yourself

Reading blog posts helped me understand what Playwright is but when I played around with it to explore realistic scenarios is when I truly got a feel for the tool! I recommend you do the same.

You can use the code examples from this blog post as well as Playwright’s documentation to get started. Good luck!