With a variety of cross-browser testing solutions available to testing teams, choosing the right one for your needs can become quite the challenge. Selenium has been the de facto testing platform for years, while Cypress has been another prominent solution. Yet new test automation tools are emerging onto the market, featuring unique capabilities that benefit testing teams and even outpace the market leaders in certain areas. One of these tools is Playwright.
Playwright has been steadily growing in popularity — and for good reason. First released in 2020 by the creators of Puppeteer, Playwright has been steadily growing in popularity ever since.
In this blog, we will explore the benefits of testing with the Playwright framework and provide a Playwright tutorial for those looking to start with Playwright testing.
Back to topRelated Reading: The Buyer’s Guide to Web & Mobile Test Automation Tools
What is the Playwright Framework?
Back to topThe Playwright framework is an open-source test automation tool developed by Microsoft that supports multiple programming languages, including Java, Python, C#, and NodeJS. Playwright is one of the growing trends in cross-browser testing solutions.
Playwright Tutorial: Benefits of Playwright Testing
Despite its newer status on the market, Playwright testing has been gaining steam in the software testing landscape. Playwright was developed by the same team that created Puppeteer, another growing trend in testing solutions. However, while Puppeteer has its advantages, Playwright surpasses Puppeteer in its cross-browser support capabilities.
Some of the advantages of Playwright testing include:
Multi-Browser Support
Playwright supports multi-browser testing, including Chrome, WebKit, and Firefox. In addition, the Playwright framework supports Windows, MacOS, and Linux, as well as Jest, Mocha, Jasmine, and other prominent frameworks.
Multi-Language Support
Playwright also features cross-language support capabilities for multiple programming languages, including Java, JavaScript, Python, C#, and TypeScript. Some of the most popular open-source testing frameworks lack this breadth of multi-language support.
Support for CI/CD Integration
The Playwright framework supports integration into your CI/CD pipeline. Playwright tests can easily be executed in CI environments in multiple configurations.
Debugging Support
Playwright is a very developer-friendly framework in that it supports many different debugging options. These include Playwright Inspector, Trace Viewers Console Logs, VSCode Debugger, and Browser Developer Tools.
Reporting Feature
The Playwright framework includes many reporting tools, including HTML, Junit, JSON, Line, Dot, and List. In addition, Playwright allows testers to create custom reporters as well as offers support for third-party reporters.
Related Reading: Test Reporting: What Is It & How to Make It Work for Continuous Testing
Regular Releases
Another advantage of the Playwright framework is that its developers regularly release new features each month, so it is always improving and evolving to better serve the needs of testing teams.
Easy Setup & Configuration
Playwright is simple to set up and configure, regardless of which language you pair with it. We will go more in depth in the Playwright tutorial below.
Additional notable of Playwright include:
- Native mobile emulation of Google Chrome for Android with Mobile Safari.
- Mobile rendering engine for desktop and cloud.
- Auto-wait, web-first assertions, and tracing.
- Interception of network activity for stubbing and mocking of network requests.
- Native input for mouse and keyboard.
- Ability to upload and download files.
Back to topRelated Reading: Playwright vs. Cypress: Which Cross-Browser Testing Solution is Right for You?
Playwright Tutorial
Now that we have established the benefits of the Playwright framework, let us now delve into setting up and running Playwright in the following Playwright testing tutorial.
Before Setting Up Playwright
Before setting up Playwright, you should do the following steps:
Now that you have downloaded and installed those tools, we will walk you through setting up and running Playwright.
How to Install & Run Playwright
Follow these steps for your Playwright tutorial:
- Create a new directory in VSCode.
- Open the directory in VSCode. From there, click on File > Open Folder > Select your newly created directory folder.
- Next, click Terminal Menu > New Terminal
- Enter the following code snippet to begin the Playwright installation process:
npm init playwright@latest- Next, run the install command and select the following to begin:
Choose between TypeScript (default) or JavaScript.
Name your test folder.
Add a GitHub Actions workflow to run your tests on CI.
Install Playwright browsers.
Please note that Playwright will install the following files:
playwright.config.ts
package.json
package-lock.json
tests/
example.spec.ts
tests-examples/
demo-todo-app.spec.tsRun the Example Tests
Now that you are set up and ready to run tests, you should take note that by default your tests will run on Chromium, Firefox, and Webkit. To configure these default settings, you can go to playwright.config.file.
You test results will be shown in the terminal and will appear as follows:
npx playwright testTo learn more about running your tests, head over to Running Tests on the Playwright site.
Review HTML Test Reports
Now that you have completed your tests, an HTML report of your tests will be generated. This report will allow you filter by browser, passed/failed tests, as well as flaky or inconclusive tests. You will be able to click on each test to view more information.
Your test report will be labeled as follows:
npx playwright show-reportThis concludes your Playwright tutorial. If you would like to go more in depth into any aspect of this Playwright tutorial, be sure to head over to the Playwright website for more about installation, writing tests, and more.
Back to topRelated Reading: How to Choose the Right Cross-Browser Testing Tool For You
Playwright Testing With Perfecto
Whether you are just starting out testing with the Playwright framework or testing with Selenium, Cypress, or any other cross-browser testing platform, pairing these testing solutions with Perfecto is the way to go.
Perfecto offers a great pairing with many open-source testing solutions, offering continuous end-to-end testing and support. When you pair Playwright with Perfecto, you will be able to release high-quality apps with ease while experiencing the following benefits that you cannot achieve with Playwright alone:
- Boosted test coverage.
- Parallel testing for faster test executions.
- Stable and scalable test automation.
- Unified testing.
- Advanced automation.
- Full toolchain integration.
- Shift left testing.
- And more!
There is a reason why Perfecto is the most trusted testing platform in the industry. See for yourself.