5 Best Practices for Writing Playwright Tests

Despite still being a young platform with expected updates and revisions, many web developers prefer to use Playwright over leading competitors. Playwright was first introduced in 2019 and has gained popularity among developers and testers due to its flexibility, cross-browser support, and reliable automation engine. According to the State of JS 2021 survey, Playwright was the second most popular browser automation tool, with a 26.3% adoption rate, just behind Cypress with 39.9%.

Playwright has also seen a steady increase in popularity on GitHub, with over 15,000 stars and 800 contributors as of September 2021. This indicates a strong community of developers who are actively using and contributing to the tool.

In addition, Playwright has been adopted by several large companies, including Microsoft, Google, and Netflix, which use it to automate their web application testing.

Overall, Playwright is a popular and widely adopted automation tool that is expected to continue to grow in popularity as more developers and testers discover its advantages and capabilities.

What is Playwright?

Playwright is an open-source or free End-to-End (E2E) automated framework that supports numerous languages, such as JavaScript, Python, TypeScript, and C#. Built by Microsoft, this tool is a Node.js library that, with a sole API, automates Mozilla Firefox, Chromium, and WebKit. These APIs can be used by software developers writing JavaScript code to generate new browser pages, navigate to URLs and then communicate with components on a page. Besides, since MS Edge is built on the free/ open-source Chromium web platform, Playwright can also automate MS Edge.

Playwright E2E testing has gradually gained popularity. The majority of software developers consider it one of their preferred frameworks to work with. Playwright exposes a higher-level API to communicate with the web browser in a stable and speedy way. It is gaining fame pretty fast because of its exceptional traits. At the time of writing this blog on Playwright E2E testing, Playwright garnered close to 1.9k Forks, 41.4k Stars, and almost 13.5k Users on GitHub. In addition, NPM Trends of Playwright Framework: Weekly Downloads: 1,244,085.

Rather than sending HTTP Requests, it functions straight in the WebSocket (using DevTools Protocol for Google Chrome – For Webkit and Firefox, they executed their protocol, akin to Chrome), so it means the connections with the browser are blazing fast. To learn more about Playwright tests, you can check this blog on the Playwright framework.

Playwright’s Features

• Enhanced automated UI tests
• Headless supported
• Node library
• Allows cross-browser web automation

Architecture of Playwright 

To know how Playwright’s architecture functions, we will compare its function with that of Se (selenium). Selenium sends every single command as an independent HTTP request & receives JSON reactions. Every interaction, like opening a clicking an element, browser window, or entering text into an input box, then is sent as an individual HTTP request.  

This means we need to wait longer for reactions and enhances the chances of bugs.

Instead of interacting with every driver through an individual WebSocket connection, Playwright relies on a sole WebSocket link to communicate with each driver, which remains in its place until the test is ended. This enables commands to be sent rapidly on an individual connection, therefore, lessening the points of failure.

Comparisons: Selenium, Cypress, and Playwright

Source

Why choose Playwright Automation?

Although Playwright is new to the market, we can barely list the restrictions as it supports multi-languages. Folks who wish to migrate from Se (selenium) to Playwright can do it rapidly as Playwright support Java, C#, and Python. Programming languages aren’t a barrier. Playwright’s first release was in Jan 2020, and it has gained huge popularity ever since. 

• It leverages the DevTools protocol to write stable, robust automated tests.
• It can check into & control the browser rather than relying on a mid-translation layer; it lets for the simulation of more insightful & related user scenarios.

Benefits of Playwright Automation

Playwright is a famous automated tool that gives various benefits for web app testing. Here are some of the main benefits of using Playwright for automation:

1. Fast and reliable: Playwright uses a robust automated engine that lets it communicate with web pages rapidly and reliably. This makes it appropriate for testing complicated web apps that require a higher degree of automation. 
2. Cross-browser support: Playwright supports several web browsers, counting Firefox, Chromium, and WebKit. This lets you test your web app on various browsers without having to write separate test scripts for each one.
3. Integrated video capture and screenshot: Playwright offers built-in support to take capture videos and screenshots of your test runs. This can be beneficial for debugging and documenting glitches that arise at the time of testing.
4. Multiple programming languages: This incredible tool supports various programming languages, counting TypeScript, JavaScript, Java, and Python. This gives flexibility and lets you select the language that you are most comfortable with.
5. Parallel execution: Playwright lets you perform your testing in parallel, which can considerably reduce the time it takes to execute your test suite. This is particularly beneficial for large-scale test projects that require the highest degree of automation.
6. Non-headless and headless modes: Playwright supports both non-headless and headless means of operation. This lets you execute your tests in a headless environment, which is more efficient and faster, or in a non-headless environment, which is beneficial for troubleshooting and debugging.

Overall, Playwright offers a flexible and robust automation framework that can aid you to streamline your web app testing process and enhance the quality of your software. 

Limitations of Playwright Automation

Here are some Playwright tests limitations:

• Playwright doesn’t support legacy MS Edge or IE11.
• A single test() function captures videos, screenshots, as well as failure traces. In simple words, if you have some tests inside a test.describe() function, you will get traces and videos collectively for each one but not for the complete root test function.
• Playwright utilizes desktop browsers rather than of actual devices to emulate mobile gadgets.
• Although Playwright supports API testing, its APIRequest technique does not support disabling follow redirects.
• It does not support TeamCity reporters. You have to write your reporter for CI/CD builds.

Web Browsers Supported by Playwright

The Playwright is accessible in a set of languages, and every version has distinct dependencies. At package install time, this tool will either download these dependencies for you or you can utilize Playwright CLI to install them. Playwright continuously updates its support of web browsers, so that the newest Playwright would support the current browsers at any time. Consequently, you need to run the install command every time you update Playwright.

• Google Chrome (Chrome 66 & above)
• Firefox (76 & above)
• Chromium (84 & above)
• Microsoft Edge (Edge 80 & above)
• WebKit (13 & above)

5 Best Practices for Writing Playwright Tests

1. Write clear and concise tests: Playwright tests should be easy to read and understand. Use descriptive names for your test cases and make sure your test steps are easy to follow.
2. Keep your tests atomic: Each test should focus on testing a single feature or functionality. Avoid including multiple test scenarios in a single test case. This will make it easier to identify the root cause of any failures and keep your tests maintainable.
3. Use page objects: Page objects are an abstraction layer that assists you to manage the intricacy of your test code. They give a way to encapsulate the page components and functionality of your web app, making your testing highly modular and simpler to maintain.
4. Use data-driven testing: Data-driven tests include using a series of data for testing similar functionality multiple times with various inputs. This aids to find edge cases and corner cases that might not be caught by manual tests.
5. Use the right assertions: Use precise and meaningful assertions to confirm the expected behavior of your web app. Avoid using generic assertions that don’t give enough detail on what went wrong in the occasion of a failure. Playwright gives several built-in assertions that you can use in your testing.

How to run Playwright testing?

You can leverage distinct traits offered by the Playwright framework. But, its true potential can be determined only over a cloud-centric testing platform such as LambdaTest. Using LambdaTest’s automated testing cloud, you can automate Playwright tests on an online browser farm of 50+ web browsers, counting Chromium, Chrome, Mozilla Firefox, Edge, and Webkit.

You can also perform your Playwright test scripts in parallel & trim down test implementation cycles by many folds.

Other features that make Playwright tests a breeze with platform like LambdaTest.

1. Immediate access to 3000+ actual desktop as well as mobile environments.
2. Perform 70% rapid test implementation with HyperExecute – an E2E test orchestration cloud.
3. Mitigate test flakiness, cut job times, and get quicker feedback on code variations with Test At Scale.
4. Test across multi geographies with a geolocation test feature.
5. 120+ 3rd-party integrations with your preferred tool for CI/CD, Codeless Automation, Project Management, and more.

Significant Steps to run Playwright testing on the LambdaTest platform

1. Sign up and log in to your LambdaTest account which is free of cost.
2. After that clone the LambdaTest Playwright GitHub repository
3. Install the NPM dependencies by making use of npm install.
4. Fix your LambdaTest access key and username in the environment variables. You can acquire them from the LambdaTest Automation Dashboard by hovering and clicking the Access Key button (which is at the top right).
5. Use the specific command: node playwright-single.js in the terminal for running the test.

Later, visit the LambdaTest Automation Dashboard to check your test outcomes.

You can observe your Playwright test session’s details just executed by clicking the session name. A below-mentioned screenshot displays test implementation details for Playwright testing, counting basic information, Test ID, Test Name, test logs, input configuration, selected configurations, and test session video.

Frequently Asked Questions (FAQs)

What is Playwright in testing?

Playwright is a free Node.js library that offers a top-level API for automating browsers like WebKit, Chromium, and Firefox. It enables software testers and developers to write E2E tests that interact with web apps similarly as a user would. It allows the testing of web apps across varied browser versions, types, and platforms.

Playwright offers various robust traits for testing web apps. It has a concise and fluent API that lets software developers write maintainable and readable tests. It also supports various programming languages like Python, JavaScript, C#, and TypeScript. Playwright also gives support for testing mobile web apps by emulating mobile gadgets and setting several device parameters like pixel ratio, screen size, user agent, etc.

What is end-to-end in QA  testing?

End-to-end testing (E2E testing) is a QA testing method that includes testing the complete software system from start to end, to guarantee that all the elements of the system are functioning together as anticipated and meeting the business needs. The purpose of the E2E test is to validate the software’s functionality and behavior in a real-world situation, simulating the user’s interface with the application.

This type of testing typically involves testing the app’s APIs, databases, user interface, and integrations with distinct systems, to check that the app is working appropriately and providing the preferred results. The objective is to detect any bugs, defects, or issues that might exist in the software, and to guarantee that the app is meeting the business necessities and user expectations.

E2E testing is typically performed after system testing integration testing, and unit testing, have been finished, and it is often automated using test tools and frameworks such as Cypress, Playwright, Selenium, and others. Automated E2E testing enables more reliable and faster testing, as it eradicates the requirement for manual testing and lessens the risk of human error.

What is Playwright E2E?

Playwright E2E refers to the end-to-end test capacities offered by the Playwright testing framework. Playwright framework is mainly a Node.js library that offers a superior-level API for automating web browsers like Firefox, Chromium, and WebKit. It allows testers and developers to write E2E tests that interact with web apps in the similar way as a user would.

Playwright E2E tests includes testing the whole software system, counting the APIs, user interface, databases, and integrations with various other systems, to make sure that all the elements of the system is function together as projected and meet the business needs. Playwright offers several robust features for end-to-end testing, such as:

1. Parallel testing: Playwright allows running testing in parallel, which can considerably lessen the time it takes to execute a huge suite of tests.
2. Mobile testing: Playwright assists testing of mobile web apps by emulating mobile devices and setting several device parameters such as pixel ratio, user agent, screen size, etc.
3. Cross-browser testing: Playwright enables testers and developers for testing web apps across varied browser versions, types, and platforms.
4. Fluent and concise API: Playwright has a concise and fluent API that enables software developers to write maintainable and readable tests.
5. Screenshot and video capture: Playwright gives support to take videos and screenshots during tests, which can aid to debug and troubleshoot problems. 

In a nutshell, Playwright E2E testing is a robust tool to automate end-to-end testing of web apps across different browsers and platforms. 

Does Playwright Require JavaScript?

If you choose to use Playwright, JavaScript plays a major role in API use. Software developers should write JavaScript code to form new browser pages and edit or add content to the page. Moreover, navigating URLs with JavaScript code might be complicated if you’re unacquainted with the framework, which makes Playwright highly preferable for skilled web developers. Before using this type of framework for your automated requirements, it may be essential to refresh your JavaScript code abilities and spend extra time getting accustomed to the system. 

While Playwright is chiefly designed to work with JavaScript, it also supports distinct programming languages like Python, TypeScript, and C#. In short, while this framework supports myriad programming languages, it still requires Node.js and JavaScript to be installed on your system. This enables Playwright to leverage the great capabilities of Node.js and offer a top-level API for automating web browsers.