Your Playwright Tutorial: Get Started With Playwright Testing

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. 

Related Reading: The Buyer’s Guide to Web & Mobile Test Automation Tools

What is the Playwright Framework?

The 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. 

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.

Related Reading: Playwright vs. Cypress: Which Cross-Browser Testing Solution is Right for You?

Playwright Testing 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:

• Download and install Visual Studio Code (VSCode).
• Download and install NodeJS.

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:

1. Create a new directory in VSCode. 
2. Open the directory in VSCode. From there, click on File > Open Folder > Select your newly created directory folder. 
3. Next, click Terminal Menu > New Terminal
4. Enter the following code snippet to begin the Playwright installation process:

npm init playwright@latest

1. 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.ts

Run 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 test

To 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-report

This 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. 

Related 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. Experience complete continuous testing for yourself by signing up for a free 14-day trial of Perfecto today. 

Start Trial