Cross-Browser testing using Playwright

Cross-browser testing is a crucial step in ensuring a consistent user experience across different browsers. It’s super easy to lose customers to poor user experience, hence, it becomes critical to ensure that our applications work smoothly on various browsers like Chrome, Firefox, Safari, and others. Playwright is an excellent tool for cross-browser testing, allowing you to test your website on multiple browsers and automate the process with ease.

In this blog, we will explore how to perform cross-browser testing using Playwright, and demonstrate its powerful features for a seamless testing experience.

Installing Playwright

To get started, install Playwright using yarn or npm:

Using yarn

yarn add playwright

Using npm

npm install playwright

Launching Different Browsers

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, respectively.

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:

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();
 }
};

This function launches each browser, navigates to the specified website URL, and runs your tests or assertions. Remember to close the browser using browser.close() after finishing your tests.

Cross-Browser Testing with Viewport Sizes

Playwright allows you to set different viewport sizes for testing responsive designs. You can create a new context with the desired viewport size using the newContext() method:

const context = await browser.newContext({ viewport: { width: 1280, height: 720 } });

To test your website on different viewport sizes across multiple browsers, you can modify the testOnAllBrowsers function:

const { chromium, firefox, webkit } = require('playwright');

const testOnAllBrowsers = async (websiteUrl, viewports) => {
 const browsers = [chromium, firefox, webkit];

 for (const browserType of browsers) {
   for (const viewport of viewports) {
     const browser = await browserType.launch();
     const context = await browser.newContext({ viewport });
     const page = await context.newPage();
     await page.goto(websiteUrl);

     // Perform your tests/assertions here
     // ...

     await browser.close();
   }
 }
};

Now you can pass an array of viewport sizes to the function:

const viewports = [
 { width: 1920, height: 1080 },
 { width: 1366, height: 768 },
 { width: 1280, height: 720 },
 { width: 768, height: 1024 },
 { width: 360, height: 640 },
];

testOnAllBrowsers("<https://example.com>", viewports);

Conclusion

Playwright is a powerful tool for cross-browser testing, enabling you to test your website across different browsers and viewport sizes with ease. By automating the testing process and leveraging Playwright's features, you can ensure a consistent user experience and catch potential issues early in the development process.

As you continue to use Playwright for cross-browser testing, you may want to explore more advanced features like generating screenshots, videos, network interceptions, and integrating with testing frameworks like Jest or Mocha for a more robust testing suite.

Happy testing!