Playwright Cross-browser Testing Tutorial

Playwright is a robust tool that automates cross-browser testing across Chromium, Firefox, and WebKit using a single API. It is an open source software developed and launched by Microsoft in 2020 and quickly gained popularity. Cross-browser testing using Playwright is a seamless process that enables efficient testing to identify and address potential issues, guaranteeing a seamless user experience. Being an Automation Testing company, we have hands-on experience using Playwright for cross-browser testing. So, in our Playwright cross-browser testing tutorial blog, we’ll be explaining how to set up and run test scripts for different browsers in Playwright.

Why is Cross-Browser Testing Needed?

Cross-browser testing is pivotal to ensure web applications work efficiently across different browsers. Users access our website or web application on a diverse landscape of browsers and it’s crucial that our platform performs well on their preferred browser. If our site fails to function adequately, they may switch to a competitor’s website instead.

In Carrie Ryan’s words, “Survivors aren’t always the strongest; sometimes they’re the smartest”.

Effective cross browsing testing makes our website or application the smartest in the ecosystem. It helps maintain consistency in the user interface and prevents issues like broken layouts or non-functional features. Missing out on supporting a major browser can result in losing a significant portion of the potential user base.

Why Playwright?

Playwright is a Node.js library and many testers consider it to be a reliable framework for its multi-browser support, web-first assertions, unified API, built-in reports, and parallel test execution capabilities. It has remarkably advanced features and is notable for its concise syntax and execution speed. And like Selenium, Playwright facilitates the use of multiple languages including TypeScript, JavaScript, Python, .NET, and Java. Playwright cross-browser testing helps deliver a high-quality web experience due to its benefits such as early issue detection, regulatory compliance, and performance optimization.

List of Supported Browsers:

• Google Chrome
• Safari
• Firefox

Tutorial to setup Playwright for Cross-Browser Testing

In order to help you navigate through the blog with ease, we have segregated the Playwright cross-browser testing tutorial as shown below,

• How to Install and Run Playwright Cross-Browser Test Script
• Running Test Scripts on Multiple Browsers
• Running Test Scripts in a Particular Browser
• Alternate approach to run the test in different browsers
• Creating a Cross-Browser Testing Function

How to Install and Run Playwright Cross-Browser Test Script

First up, let’s find out how you can install and run Playwright.

Step 1:

Create a demo folder and open it in VS Code.

Step 2:

Install Playwright by entering the below command in that particular folder.

<npm init playwright@latest>

Step 3:

Once Playwright is installed, you will see a project structure that you can use to run test scripts on multiple browsers.

Running Test Scripts on Multiple Browsers

Now that we are all set, let’s find out how we can run the test scripts on multiple browsers at once in our Playwright cross-browser testing tutorial.

Step 1:

Open the playwright.config.js file in the project structure. Ensure that different browsers are configured by default in the playwright.config.js file.

Step 2:

Run an example test in the tests folder using the below command

<npx playwright test>

It will execute the tests in different browsers that are configured in the playwright.config.jsfile.

Step 3:

After the tests have been executed, you can see the report by executing the following command

<npx playwright show-report>

Running Test Scripts in a Particular Browser

Apart from running the test scripts in multiple browsers, you’ll also face the need to run your test scripts on a particular browser. And that is what we’ll be covering now in our Playwright cross-browser testing tutorial.

Chrome:

Run the below command to execute the tests in the Chrome browser

<npx playwright test --project=chromium>

You can view the report by executing the below command

<npx playwright show-report>

Firefox:

Run the below command to execute the tests in the Firefox browser

<npx playwright test --project=firefox>

You can view the report by executing the specified command

<npx playwright show-report>

Safari:

Run the below command to execute the tests in the Safari browser

<npx playwright test --project=webkit>

You can view the report by executing the mentioned command

<npx playwright show-report>

Alternate approach to run the test in different browsers

There is also an alternative approach you can follow to achieve Playwright Cross-browser testing. All you have to do is Click on TEST EXPLORER -> Click the drop down icon on the Run Test button. Here you will find different browsers to execute the test.

If you click on any of the browsers listed, the test will be executed on that particular browser. We can also change the default browser by clicking the Select Default Profile and choosing the default browser from the list.

Launching Different Browsers using Code

Playwright supports testing on Chromium, Firefox, and WebKit-powered browsers. You can launch different browsers by importing the respective browser classes from Playwright:

<const { chromium, firefox, webkit } = require("playwright");>

To launch a specific browser, use the launch() method:

<const browser = await chromium.launch();>

Replace Chromium with Firefox or Webkit to launch Firefox or WebKit browsers.

Creating a Cross-Browser Testing Function

Now that we know how to launch different browsers, let’s create a function that accepts a website URL and tests it across multiple browsers in our Playwright cross-browser testing tutorial. This function launches each browser, navigates to the specified website URL, and runs the tests or assertions.

<const { chromium, firefox, webkit } = require("playwright");
const testOnAllBrowsers = async (websiteUrl) => {
 const browsers = [chromium, firefox, webkit];
 for (const browserType of browsers) {
   const browser = await browserType.launch();
   const context = await browser.newContext();
   const page = await context.newPage();
   await page.goto(websiteUrl);
   // Perform your tests/assertions here
   // ...
   await browser.close();
 }
};
>

Note: Remember to close the browser using browser.close() after you finish your tests.

Conclusion

Playwright offers a seamless way to assess the website’s performance across various browsers and viewport dimensions. Through the automation capabilities and advanced features provided by Playwright, you can streamline the testing procedure, guaranteeing a uniform user experience and identifying potential issues early in the development cycle. We hope you now have a clear understanding of how to perform Playwright cross-browser testing and found value in reading our blog. Stay connected to our space for more such informative software testing content.