A Quick Guide on How to Do Microsoft Playwright Testing

Microsoft Playwright is a dynamic tool for modern web apps that delivers reliable end-to-end and cross-browser testing. This post will give you a quick overview of this test automation framework and how to conduct playwright testing.

What is Microsoft Playwright?

Playwright Test was built primarily to meet the demands of end-to-end testing. Playwright supports all major rendering engines, including

• Chromium,
• WebKit, and
• Firefox.

It began as a javascript-based library, but it has now grown to support Python, Java, and .NET, as well as a Go library.

You can use Playwright to test on Windows, Linux, and macOS, either locally or on CI, headless, or with the native mobile simulation of Google Chrome for Android and Mobile Safari.

It also supports your current JavaScript test runners, such as Jest/Jasmine, AVA, and Mocha, which is useful when converting from an existing code base.

But it also features its own test runner, the Playwright test. This test runner is designed based on the test framework folio and provides integrated support for Typescript.

The Playwright operates based on three basic core concepts.

Browser

The first step in running tests is to launch a browser. The Playwright accomplishes this by utilizing the Browser class object, which is nothing more than an instance of Chromium, Firefox, or Webkit.

Context

The Playwright implements parallelization using browser contexts. Browser context is defined as an isolated incognito-like experience within a browser instance.

A new browser profile is similar to a new browser context. It provides full test isolation with no overhead.

Page

Within a context, a page is a new tab or pop-up window. This page is where you will do every action on the test.

Playwright Testing

Here’s a simple guide on running playwright tests.

Installing Playwright Test Script

Install Playwright with npm or yarn to start. The Visual Studio Code (VS Code) Extension is an alternative that you can use to get started and run your test scenarios.

To begin, run the install command and choose one of the options below:

• Pick either JavaScript or TypeScript (default is TypeScript)
• Your tests folder’s name (default name is tests or e2e)
• Create a GitHub Actions process to execute tests on CI immediately.
• Get Playwright browsers installed (default is true)

Microsoft Playwright will download the browsers necessary and generate files where your tests will be saved.

The Playwright.config file is where you may add Playwright configuration, such as which browsers you want to run Playwright. If you run tests within an existing project, dependencies will be added directly to your package.json file.

A basic sample test is included in the tests folder to help you get started with testing. Browse the tests-examples folder for a more detailed example containing tests built to test a todo app.

Running Tests

By default, all the tests will be conducted on all three browsers, chromium, firefox, and WebKit utilizing three workers. You can configure this in the Playwright.config file.

The tests are done in headless mode. It means that you can’t open another browser while running the tests. The results of the tests, as well as the test logs, will be displayed in the terminal.

HTML Test Reports

After completing your test, an HTML Reporter will be created, displaying a comprehensive report of your tests. It now allows you to filter the information by browsers, passed tests, failed tests, skipped tests, and flaky tests.

Playwright can perform a configure test retry strategy to collect execution traces, videos, and images to eliminate flakes.

You can click on each test and investigate the test’s faults as well as each phase of the test. The HTML report is default opened automatically if part of the tests fails.

Pros of Playwright Test Automation

• Playwright installation is quick because it requires configuration. However, the installation method can differ according to your programming language.
• Supports multi-tab, multi-user, and iframe testing scenarios.
• Generate an HTML report to examine test execution results in the browser. It includes visual discrepancies and test artifacts such as screenshots, traces, error logs, and video recordings.
• It’s accessible as a VS Code extension to run tests with a single click and has capabilities for step-by-step debugging, examining selectors, and recording new tests.
• Supports end-to-end testing, functional testing, and API testing
• It includes debugging tools such as the Playwright Inspector, Browser Developer Tools, VSCode Debugger, and Trace Viewers Console Logs.
• It has reporters such as JSON, JUnit, and HTML Reporters. You can also create custom reporters.
• Allows cross-browser web automation
• Execute parallel tests locally or on an internet Selenium grid. You can also distribute tests between systems to run parallel tests.

Cons of Playwright Test Automation

• The Playwright does not recognize legacy Microsoft Edge or IE11.
• Playwright API is not currently accessible in Java or Ruby.
• The Playwright utilizes desktop browsers instead of actual devices to emulate mobile devices.
• Despite Playwright enabling API testing, its APIRequest method does not allow you to disable follow redirects.
• You must create your reporter for CI/CD builds, as Playwright does not support TeamCity reporters.

Final Thoughts

Microsoft Playwright is intended to be a highly modular automation driver that works seamlessly with other components of your testing stack.

Furthermore, Microsoft has been quite active in releasing continuous upgrades. Playwright is a challenging competition for Selenium in browser automation dominance.