How do I run Playwright tests in more than one browser?

Add one project per browser to the projects array in playwright.config.js, using the ready-made devices settings such as devices['Desktop Firefox']. Playwright runs every project by default, and --project=firefox runs just one.

This answer is one piece of Chapter 16: The Test Runner.

Test Structure & Lifecycle
playwright.config.ts Complete Reference
Test Organization at Scale
Tags, Grep, and the Suite You Actually Run
What Runs Where, and What Serial Costs
Practice and interview questions: Assertions & Test Runner

A project is a group of tests that run with the same configuration. Listing three projects with three browsers means each test runs three times, once per browser, with no change to the test code.

The devices registry supplies a sensible viewport, user agent and browser for each entry, so { ...devices['Desktop Safari'] } is all a project needs. Anything you put in the top-level use, such as baseURL, is shared by every project.

The browsers must be installed first with npx playwright install. A plain npx playwright test then runs all projects. While you are working on a test, --project=chromium keeps the loop fast; the full matrix can run on CI.

Projects are not only for browsers. The same mechanism gives you a mobile viewport project, a staging project with a different baseURL, or a setup project that signs in before the others (see qa-082).

In the example, one test ran three times, once each in Chromium, Firefox and WebKit, in parallel. The second run, with --project=firefox, ran it once.

playwright.config.js(https://practice.learnplayforge.com)

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

export default defineConfig({
  testDir: '.',
  reporter: 'list',
  use: { baseURL: 'https://practice.learnplayforge.com' },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
  ],
});

// cart.spec.js
import { test, expect } from '@playwright/test';

test('adding the grinder updates the cart total', async ({ page }) => {
  await page.goto('/catalog.html?mock=static&seed=42&autologin=1');
  await page.locator('article[data-sku="MRD-1003"]').getByRole('button', { name: 'Add to cart' }).click();
  await expect(page.getByTestId('cart-total')).toHaveText('₹11,900');
});

Output

$ npx playwright test
Running 3 tests using 3 workers

  ok 3 [chromium] › cart.spec.js:3:1 › adding the grinder updates the cart total (1.4s)
  ok 2 [webkit] › cart.spec.js:3:1 › adding the grinder updates the cart total (2.2s)
  ok 1 [firefox] › cart.spec.js:3:1 › adding the grinder updates the cart total (3.4s)

  3 passed (7.8s)

$ npx playwright test --project=firefox
Running 1 test using 1 worker

  ok 1 [firefox] › cart.spec.js:3:1 › adding the grinder updates the cart total (2.7s)

  1 passed (4.6s)

Test yourself

Your config lists chromium, firefox and webkit projects. You run npx playwright test on a file with two tests. How many test runs do you get?

AI can write the test now. The job is knowing whether it checks anything. That's what the course teaches, one chapter at a time.

163 lessons · 226 drills · start free

How do I run Playwright tests in more than one browser?

Related questions