Playwright Framework Getting Started – How to?

What Is the Playwright Framework?

As you already know, in AVS Solutions, we used a Protractor for automated end-to-end testing. However, since the Angular team deprecated the Protractor, we migrated our e2e test to Playwright.

Playwright Framework is an open-source tool developed by Microsoft that allows you to automate web browsers using a simple and powerful API.

Features of Playwright

Multi-browser support: Playwright Framework supports multiple browsers, including Chrome, Firefox, Safari, and Microsoft Edge. This allows you to test your web application on different browsers and ensure it works correctly across all browsers.
Cross-platform support: Playwright is designed to work on multiple platforms, including Windows, macOS, and Linux. This allows you to write tests on one platform and execute them on another.
Reliable automation: Playwright provides reliable automation for end-to-end testing of web applications. Using a single automation API that works consistently across all browsers, Playwright Framework makes it easy to write and maintain tests.
Easy setup: Playwright is easy to set up and get started with. It provides a simple CLI tool that helps you create a new project, install dependencies, and run tests.
Built-in debugging: Playwright provides built-in debugging tools that make diagnostics and fixing issues with your tests easier. Use DevTools protocol to interact with your tests’ and debug them as needed.

Getting Started with Playwright Framework

To get started with the Playwright you’ll need to have Node.js installed on your machine. Once you have Node.js installed, you can install the Playwright by typing the following command in the terminal:

npm install playwright

Afterwards, the Playwright is installed, you can use the CLI tool to create a new project and generate a sample test file:

npx playwright init

This will create a new project with a sample test file to use as a starting point. You can then edit the test file to write your tests and run them using the following command:

npx playwright test

In addition, this will run your tests on all supported browsers and generate a report showing the results.

Playwright API

Probably the biggest advantage of Playwright Framework is its unified API which allows you to write code once and run it on multiple browsers consists of several key components:

Browsers: Playwright provides a Browser class that represents a browser instance. You can use this class to launch a new browser, connect to an existing or launch a headless browser.
Pages: Once you have a browser instance, you can create a Page object representing a web page. The Page class provides methods for navigating to URLs, interacting with page elements, and capturing screenshots.
Elements: The playwright provides several classes for working with page elements. Some of these include the ElementHandle, Locator, and Waiter classes. These classes allow you to find and interact with the specific element/s on a page.
Inputs: The Playwright provides a range of input methods for simulating user interactions, including typing text, clicking buttons, and selecting options from dropdown menus.
Requests: Playwright provides a Request class that represents an HTTP request. This class can is used to intercept and modify network requests, simulate network errors, and test how your application handles different response codes. But more on that will come in another article.
Events: Playwright provides a range of events that you can use to monitor and respond to changes in the browser or page state. For example, you can listen for events indicating when a page has finished loading or when a new browser window has been opened.

Example

import { chromium } from ‘playwright’;
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto(‘https://www.example.com’);
await page.click(‘button’);
await browser.close();
}));

In the example above, we first launch a new Chromium browser using the ‘chromium.launch()’ method. We then create a new page object using the ‘browser.newPage()’ method and navigate to a web page using the ‘page.goto()’ method. Finally, we simulate a button click using the ‘page.click()’ method and close the browser using the ‘browser.close()’ method.

Playwright Framework Best Practices

Use CSS selectors:

One, CSS selectors are the most common way to locate page elements in Playwright. They are flexible and powerful and can be used to find elements based on their tag name, class, ID, or other attributes. When using CSS selectors, try to use selectors unique to the element you want to find. This helps avoid false positives and makes your tests more reliable.

Use XPath selectors only if you have to:

Second, XPath selectors are an alternative to CSS selectors that allow you to locate elements based on their position in the HTML document. While XPath selectors can come in handy in some cases, they are generally slower and less reliable than CSS selectors, and you should use them less.

Using attributes:

Next attributes are HTML attributes that allow you to add custom metadata to your page elements.

Use descriptive names:

Moreover, when choosing terminology for your locators, try to use descriptive naming. This way, it is clear what the element is for. For example, instead of using a generic name like “button”, use naming that describes the specific action the button performs, such as “saveButton” or “cancelButton”.

You should use stable selectors:

Finally, when writing tests, it’s important to use fixed selectors. The fixed selectors are unlikely to change between different versions of your application. For example, using a CSS selector that depends on the position of an element in the DOM can be risky. Since changes to the page layout could break your tests. Instead, try to use selectors based on the element’s attributes or content, which are less likely to change.

Use Page Objects:

Equally important, Page Objects are a design pattern that can help you write more maintainable tests. By encapsulating the locators and methods for interacting with a page in a separate class, you can make your tests more modular and easier to read.

Keep your promises:

Playwright is an API built on top of Promises. This means that many of its methods return Promises, and you need to use the “await” keyword to wait for those Promises to resolve before moving on to the next step in your test.

Use proper error handling:

Likewise, when writing tests, the key is to handle errors properly to avoid false positives and to make it easier to diagnose and fix issues when they occur. Make sure to use descriptive error messages to help you identify the cause of the error.

Conclusion

Playwright is a new tool compared to Selenium. Therefore it has a smaller community coupled with fewer learning and troubleshooting resources available. Although its documentation is well-written, the level of detail might require a significant amount of time and effort to understand fully. Despite this, it can be an excellent tool for automating end-to-end testing of web applications. Firstly, it has multi-browser support, secondly cross-platform compatibility, thirdly reliable automation, and built-in debugging tools. Considering these advantages, I strongly encourage you to give the Playwright framework a try, when selecting an automation testing tool.