Overview of Playwright and its Architecture

The 2020 State of JavaScript survey amongst software developers discloses that whilst Cypress acceptance is on the upturn, Playwrights acceptance remains much in the early phases of product development. But, the recent trend of Playwright on GitHub reflects the rising reputation of the Playwright framework (1.8k Fork, 39.3k Star, & 12.2k Active Users).

• Releases: 94 (This reflects how active they are to fix and release fresh features)

NPM Trends of this particular Framework:

• Weekly Downloads: 1,244,085

Not only is it simple and versatile to function with, yet it has lightning-fast implementation speeds and some great traits that are exclusive to the particular framework, such as Test Generator and Trace Viewer.

What is the Playwright framework?

Built by the Microsoft team, Playwright is a framework for E2E (end-to-end) testing & automation, slowly gaining fame. Furthermore, it is a free automated test library and It’s simple to set up, feature-jam-packed, and one of the most reliable, fastest, and simple-to-use frameworks.

Not only is it versatile and simple to function with, but it has lightning-fast implementation speeds and some exclusive features that are exceptional to the Playwright framework, such as Trace Viewer & Test Generator.

Browser Support:

Playwright supports numerous browsers like: Chromium, Firefox, and Web Kit.

Language Support:

Playwright supports Python, JavaScript, Java, .Net, and C#.

History of Playwright

Browser automation isn’t a new-edge technology. Selenium has been around ever since 2004 and has been used principally to generate test suites for sites. Yet, software programmers have also used it to automate tasks and take screenshots when sites do not offer APIs.

But, Selenium has a status for being unreliable. Testing powered by Selenium is mainly flaky and often fails recurrently for non-obvious reasons that are problematic to reproduce. Because of the nature of Se (Selenium), software programmers begin utilizing headless browsers as a substitute. Such browsers execute similar functions as regular browsers but do not actually show any content. PhantomJS was the more popular one.

Even though headless browsers can be beneficial to test simpler sites, they can’t test the whole thing that sites can do. To test all the features of a complete browser, headless browsers should emulate entire browsers as closely as possible. This can be problematic as modern browsers are so intricate.

In the year 2017, the landscape of browser automation changed severely. PhantomJS, a standard framework for headless tests, was deprecated. The core reason for this move was Google’s declaration of headless Chrome, which was initially accessible in Chrome 59. Mozilla Firefox followed up with a headless manner later that year. Such developments led to extra effectual tests & scripts and thus Playwright was born.

Salient Features of Playwright Testing Framework

Here are some exclusive features of the Playwright testing framework:

• The Playwright framework supports cross-browser development on WebKit, Chromium, and Firefox – counting MS Edge, Google Chrome, Opera, Firefox, and Safari.
• Cross-platform execution is supported on Linux, Windows, and macOS.
• Testing cross-language, counting Python, TypeScript, JavaScript, Java, and .NET – select the environment that suits you while still covering all formats and areas.
• Automatic-wait, smart assertions that retry until the component is found, and test data tracing – keep track of videos and logs easily.
• Built with advanced architecture and zero restrictions, the app enables you to interact with multiple webpages, and multi-tab sites like an actual user and smoothly handles frames & browser events.
• Playwright delivers complete test isolation with zero overhead. It generates a browser context for every single test which just takes a handful of milliseconds
• As the Playwright framework is allied with the advanced browser’s architecture, it does not have the in-process test runner restrictions.

You can also subscribe to the LambdaTest YouTube Channel and keep yourself updated with the tutorial around Appium, Selenium,  Playwright, and more.

Advantages of Playwright Framework

1. Easy Setup and Configuration: Being an automated testing framework it simply requires a configuration as the installation does not take extra time.
2. Multi-Browser Support: It supports cross-browser platforms built on Chromium, WebKit, and Mozilla Firefox – which counts Edge, Chrome, Opera, Firefox, and Safari.
3. Multi-Language Support: Supports C#, Python, Java, Javascript/ Typescript making it a standard choice. Many modern free/ open-source automated test frameworks miss this trait.
4. Debugging Tools Support: The Playwright test supports diverse debugging choices making it developer-friendly. Some debugging selections are Trace Viewers Console Logs, VSCode Debugger, Playwright Inspector, and Browser Developer Tools.
5. Types of Testing: Supports API, Functional, and End to End Testing. With a 3rd-party plugin, Playwright can be incorporated with Accessibility tests.
6. Built-in Reporters: It framework, by default, comes with many valued reporters like Dot, List, Line, JUnit, JSON, and HTML Reporters. The exciting portion is that with Playwright, one can generate custom reporters. Besides, it also supports 3rd-party reporter Allure Reports.
7. Support for Multiple Browser Windows/ Tab: It supports multi-window and multi-tab. Some test cases need to authenticate the scenario by launching a fresh window & returning to the parent window. It also supports varied forms of test cases.
8. CI/CD Integration Support: Supports CI/CD incorporation. It even offers docker images for some language bindings.
9. Parallel Browser Tests: It also supports the implementation of simultaneous testing through the Browser context and additionally can run parallel tests with various browsers. This scales up tests and comes in handy when numerous web pages have to be tested concurrently.

Why select Playwright Automation?

Although Playwright is a new framework, we can barely see the restrictions as it supports manifold languages. Folks who are willing to shift from Selenium to Playwright can select Playwright support Java, C#, and Python. Programming languages aren’t a barrier. Playwright’s first launch was in Jan 2020, and it has gained abundant popularity ever since.

• It can observe and control the web browser rather than relying on a mid-translation layer; it permits the simulation of extra insightful & relevant user scenarios.
• It leverages the DevTools protocol to write stable, powerful automated tests.
• It is built from the ground up to be efficient and fast. Playwright uses advanced browser APIs to accomplish higher performance and supports parallel implementation to accelerate test suites.
• Playwright confirms constant behavior across diverse browser executions. This means that you can write testing that functions reliably across diverse browsers, without having to worry about variances in quirks or behavior.
• It gives a flexible API that lets you execute a wide variety of jobs, from simple clicks & form submissions to complicated interactions with website pages. It also supports headless implementation to run tests in a virtual environment.

Overall, Playwright is a robust & flexible framework that makes it simple to write efficient and reliable automated tests for web apps.

What is Playwright used for?

Here are a few common use cases for Playwright:

1. Test Automation: One of the prime use cases for Playwright is test automation. It enables software developers to write tests that simulate user interactions with website pages, guaranteeing that web apps function as projected and preventing regressions. Cross-browser support of Playwright makes it simple to write testing that works across diverse platforms and browsers, and its headless implementation mode enables tests to be run more proficiently.
2. Performance Testing: It can be used to test the performance of web apps, by simulating user communications and determining response times. Playwright can simulate network surroundings and mobile devices, enabling software developers for testing how web apps perform under varied conditions.
3. Web Scraping: This framework can also be used for web scraping, which includes extracting information from sites. Playwright’s robust API lets software developers navigate website pages, interact with page components, and extract information in a structured format.
4. UI Testing: Playwright can be used for testing the user interface of web apps, confirming that it is appealing visually and simple to use. The Playwright can capture videos and screenshots of tests, making it simpler to diagnose problems & debug failing tests.
5. Accessibility Testing: It can also be used for accessibility tests, by simulating consumer communications with assistive technologies and measuring the accessibility of web apps.

Overall, Playwright is a flexible tool to automate web browsers, with an extensive range of use cases in web testing, development, and data analysis.

Playwright Architecture

While Playwright functions on Web socket linking protocol, it means once you will trigger the tests, the code will be transformed into JSON format & will be directed to the server using Web socket protocol. The Playwright architecture is perfectly designed to provide a powerful and test flexible framework for automating web browsers. Here is an overview of the main elements of the Playwright’s architecture:

1. Browser Drivers: Playwright offers browser-centric drivers for Firefox, Chrome, and Safari. These drivers execute Playwright’s core functionality for all browsers and offer a constant API to communicate with web pages across diverse browsers.
2. Core: The core of Playwright gives the low-level functionality to automate web browsers, counting cooperating with web pages, managing browser instances, and simulating user input. The core is written in TypeScript & can be directly used by software developers for building custom browser automated tools.
3. Playwright API: The Playwright API gives a superior-level API to interact with web browsers and pages, enabling software developers for writing automation scripts in an easy and intuitive mode. The Playwright API is well-designed to be simple to use, with clear & concise examples and documentation.
4. Protocol Implementations: It uses the DevTools protocol to communicate with web browsers, letting them interact with website pages at a lower level. Playwright executes the DevTools protocol for every supported browser, offering a higher-performance & reliable communication channel for browser automation.
5. Test Runners: It can be used with an extensive range of test runners, comprising Mocha, Jest, & Jasmine. These test runners offer an appropriate way to write & run testing using the Playwright API.

Hence, now we will see the dissimilarity between the Web socket connection Protocol and HTTP connection protocol:

Hence, a better way to understand this is to link it with Selenium – Selenium sends every command as an individual HTTP request & collects JSON responses. So, every interaction, such as opening the web browser, clicking a component, or sending keys in Selenium, is sent as an individual HTTP request.

As you can imagine, this outcomes in slow implementation as we wait for reactions & introduces a layer of possible flakiness.

Playwright, on the flip side, communicates requests via a single Web socket connection that stays in place until test execution is finished. This reduces the failure points and lets commands be sent rapidly on a sole connection.

Getting started with the Playwright

Basic prerequisites are required before we get deeper into setup and installation.

• Make sure you devise NodeJS installed.
• Install a code editor e.g. Visual Studio Code.

Playwright Testing on Lambdatest

You can leverage diverse features obtainable by the Playwright framework. But, its true potential could be determined merely over a cloud-centric test platform like LambdaTest. Using platform like LambdaTest automated testing cloud, you can automate Playwright testing on a  web browser farm of 50+ browsers, including Chromium, Chrome, Mozilla Firefox, Edge, and Webkit.

You can also execute the Playwright test scripts in parallel & trim down test implementation cycles by numerous folds.

Besides, some other traits that make Playwright tests a breeze with LambdaTest.

1. Immediate access to 3000 plus actual mobile & desktop environments.
2. Execute 70% quick test implementation with HyperExecute – an E2E test orchestration cloud.
3. Mitigate test flakiness, shortest job times & get quicker feedback on code modifications with Test at Scale.
4. Test across numerous geographies with a geo-location test trait.
5. 120+ 3rd-party integrations with you’re the most preferred tool for CI/CD, Codeless Automation, Project Management, and more.

Steps to run Playwright testing on Lambdatest:

• Sign up for a Lambdatest account: Go to the Lambdatest site & log up for a paid or free account, depending on your requirements.
• Set up your project: Form a new project & configure your preferred testing environment, counting the operating systems, browsers, and gadgets you want to test on.
• Install Playwright: Install the Playwright framework on your local machine using yarn or npm, depending on your ideal package manager.
• Write the testing: Write your Playwright testing using TypeScript or JavaScript, depending on your preference. Use the Lambdatest authorizations & endpoint URL for configuring your test to run on Lambdatest.
• Configure your test settings: Then configure your test settings, comprising the browser and OS (operating system) you wish to test on, as well as other settings that are pertinent to your test.
• Run your Playwright tests: Run your tests on the Lambdatest platform by executing the command to commence your test suite. The tests will execute on the cloud infrastructure of Lambdatest and the outcomes will be displayed in your Lambdatest account.

Lambdatest also offers a set of traits to help you manage your tests, counting live testing, actual time test implementation, and test logs & reports. This makes it stress-free to diagnose concerns and debug failing tests.

To conclude,

Playwright is a robust automated testing framework that enables you to perform E2E tests (end-to-end testing) across important browsers. It makes writing test automation easy and you’ll be building up huge suites of tests in the shortest time frame. Besides, the entry bar is kept low, so it would not be intimidating if you introduce it to a newer team.

Execute roughly 100s of Playwright tests in parallel in minutes. Focus on automated testing – not test infrastructure – with no maintenance and setups.

FAQ

• Does Playwright Require JavaScript?

If you pick to use Playwright, bear in mind that JavaScript plays a major role in API use. Software developers must write JS (JavaScript) code to establish the newest browser pages and edit or add content to the web page. Besides, navigating URLs with JS code might be complicated if you are not so familiar with this tool, which makes it appropriate for skilled web developers. Before using this type of test framework for your automation requirements, it may be crucial to refresh your JavaScript code expertise & spend extra time getting familiar with the system.

While JS (JavaScript) isn’t the only programming language with which this test framework operates it is the most widespread and preferred programming language in web development. In addition, various software developers already have skills with coding in JavaScript, so they practice this language when setting up the test framework. That said, Playwright is similarly effectual when working with diverse, top-level programming languages, like C# or  Python.

• What are the downsides of Playwright testing?

Here are some Playwright testing shortcomings:

1. Playwright doesn’t support legacy MS Edge or IE11.
2. A single test() function captures videos, screenshots, as well as failed traces. In simple words, if you have some testing inside a test.describe() function, you will acquire traces and videos for every single but not for the complete root test function.
3. Playwright uses desktop browsers rather than actual devices to simulate/ emulate mobile gadgets.
4. Even though this test framework supports API testing, its APIRequest technique does not support disabling follow redirects.
5. It does not support TeamCity reporters. You have to write your reporter for Continuous Integration/ Continuous Deployment (CI/CD) builds.

• Is Playwright Still Used?

Yes, there are almost 1,000 companies/ enterprises that actively make use of Playwright to operate their sites successfully. One such company is Publix Supermarket, a grocery store located in the south-eastern United States. Publix Supermarket uses this framework for managing its grocery site and making sure access is available to its consumers across all browsers and platforms. This eminent grocery store chain uses Playwright by continually running browser automation testing for checking proper functionality.

• What are the Browsers Supported by Playwright

The Playwright is accessible in a diversity of languages, and every single version has diverse dependencies. At package install time, this framework will either download such dependencies for you or you could make use of Playwright CLI for installing them.

Playwright continuously updates its support of web browsers, so that the current Playwright would support the most recent browsers at any time. Consequently, you have to run the install command every time you update Playwright.

1. Google Chrome (Chrome 66 & above)
2. Firefox (76 & above)
3. Microsoft Edge (Edge 80 & above)
4. Chromium (84 & above)
5. WebKit (13 & above)

• Is Playwright better than Selenium?

Both Selenium and Playwright are famous tools to automate web browsers, and each has its own weaknesses and strengths.

Playwright is a fairly new automation tool that was launched by Microsoft. It offers a user-friendly, modern API and supports various browsers, including Firefox, Chrome, and Safari. Playwright is also known for its reliability, robustness, and speed, which makes it a perfect option for testing web apps.

Selenium, on the flip hand, has been around for a very long and is considered the industry standard tool. It supports an extensive range of programming languages and has a huge community of contributors and users. Selenium also has a developed ecosystem of plugins and tools, making it a better option to automate complicated web apps.

Ultimately, the choice depends on your specific preferences and needs. If you value reliability and speed and want an advanced API, Playwright might be the better choice.

• Does the playwright have a UI?

No, Playwright doesn’t have a GUI (graphical user interface). It is a programmatic library for browser automation, in short, it provides a set of APIs that you can make use of to control web browsers programmatically.

However, various 3rd-party plugins and tools offer a graphical interface for Playwright, like Playwright Test Runner, which offers a test runner User Interface to run Playwright tests. Also, some IDEs (integrated development environments) such as Visual Studio Code have plugins that offer code completion plus other helpful traits for working with Playwright.

Perform Automated Playwright Tests Online. Happy Testing!!