Introduction

Cross-browser or multi-browser testing involves testing the application across various browsers.

Some of the most popular browsers include Chrome, Firefox and Safari. With Playwright, cross-browser testing is supported out of the box. In this blog post, we will explore how to configure and run tests for different browsers in Playwright.

Why is cross-browser testing needed?

Users will access the web application in different browsers. So it is necessary to test the web application across multiple browsers to ensure that all features work as intended across them.

If we neglect to ensure that the web application functions properly across all browsers, users may migrate to competitive web applications, potentially resulting in a loss of users. Employing cross-browser testing enables us to guarantee that our web application functions seamlessly across all browsers.

How to do cross browser testing using Playwright?

There are mainly two approaches to cross-browser testing:

• Project level.

• Test level.

Project level cross browser testing

Let’s take a look into project level cross-browser testing. Browsers such as Chrome, Edge, and Safari are built upon internal browser projects. For instance, Google Chrome relies on the Chromium project. We add the project-level configuration under the projects block in the Playwright configuration file (playwright.config.ts).

To do this, make the following changes in the project section of the config file.

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  ... other configurations
  projects: [
    /* Test against desktop browsers */
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
    /* Test against mobile viewports. */
    {
      name: 'Mobile Chrome',
      use: { ...devices['Pixel 5'] },
    },
    {
      name: 'Mobile Safari',
      use: { ...devices['iPhone 12'] },
    },
    /* Test against branded browsers. */
    {
      name: 'Google Chrome',
      use: { ...devices['Desktop Chrome'], channel: 'chrome' }, // or 'chrome-beta'
    },
    {
      name: 'Microsoft Edge',
      use: { ...devices['Desktop Edge'], channel: 'msedge' }, // or 'msedge-dev'
    },
  ],
});

The defineConfig is the method that Playwright uses to define the configuration upon which the Playwright tests are running.

The devices object from Playwright consists of the most commonly used browsers available in the market, this includes both the desktop browsers as well as the mobile view browsers because Playwright supports mobile viewport testing out of the box.

Apart from that playwright supports branded browsers like Microsoft Edge, Google Chrome etc.

Since we have not given any test match pattern, Playwright will run all the tests with the configuration mentioned in the project blocks by default.

To run the tests we can execute the following command.

npx playwright test

This will trigger all the tests in all specified browsers inside the config file. Since we added mobile viewports and branded browsers. The tests will run on these devices as well. This means that if we have one test, it will run seven times in different device configurations specified in the projects blocks of the playwright.config.ts file.

Apart from this, we can run tests only in specified browsers by passing the --project flag as below.

npx playwright test --project=chromium

Here chromium is the name of the project given in the above example.

By using the above command, we can run tests only in the chromium browser.

Test level cross browser testing

Let’s see how we can do cross-browser testing in test level. In-order to demonstrate, let’s add one test case.

import { test, expect } from '@playwright/test';

test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await expect(page).toHaveTitle(/Playwright/);
});

This test will run in the projects specified in the config file. Let's override it to run it in a specified browser within the test block.

import { chromium, test, expect } from '@playwright/test';

test('has title', async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://playwright.dev/');
  await expect(page).toHaveTitle(/Playwright/);
});

For the above test case irrespective of the projects configuration, it will run the test in the chromium browser.

Conclusion

Playwright supports cross-browser testing out of the box by modifying projects within the config file. This process aids in identifying compatibility issues arising from browser-specific rendering of HTML, CSS, and JavaScript, thereby helping developers detect potential issues earlier in the development cycle.