DriversRecommendedOutdated drivers can make a good PC feel brokenScan driver issues before chasing fixes manually.Scan NowOctober DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsSlow PC?RecommendedPC slow today? Run a repair scan before it gets worseResolve common Windows issues and optimize system performance.Scan Now×
Skip to content
World desk6 min

How to Do Cross-Browser Testing With Playwright

Run one Playwright Test suite across Chromium, Firefox and WebKit. Learn how to configure projects, emulate devices, target CI and troubleshoot failures.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Use Playwright Test projects to run the same suite in Chromium, Firefox and WebKit. Install the browser binaries that match your Playwright version, define the browser matrix in playwright.config.ts, then run every project locally or in CI. Add branded Chrome, Edge or mobile emulation only when your product’s support requirements call for them.

What Playwright cross-browser testing covers

Playwright Test projects are named configuration groups. A project can select a browser, device profile and other settings; the same tests run under each configured project by default. You do not need to duplicate test files to create a basic browser matrix. See the Playwright projects documentation.

The core engine options are Chromium, Firefox and WebKit. Playwright also supports installed branded Chrome and Edge channels. Its bundled WebKit build is not the Safari application, and its Firefox build is distinct from the branded Firefox browser. Playwright describes WebKit as derived from WebKit’s main branch; behavior can also depend on the operating system, including for media codecs. If you need a close comparison with Safari on macOS, run WebKit on macOS rather than treating a Linux WebKit run as equivalent. The current details and supported channels are in the browser documentation.

Install Playwright and its browsers

  1. Add Playwright Test to your project using the package manager and language already used by your application. Keep the package version pinned through your project’s normal lockfile workflow.

    Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
  2. Install the browser binaries with npx playwright install. The binaries are tied to Playwright releases, so after upgrading Playwright, run the installation step again. On Linux CI, use npx playwright install --with-deps when the runner also needs system dependencies.

  3. Confirm that your project’s package scripts invoke Playwright Test, then add the configuration below. The official browser installation guide documents installation options and release matching.

Configure a Chromium, Firefox and WebKit matrix

Create or edit playwright.config.ts and define one project for each engine. This is a starting point using Playwright’s desktop device profiles:

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

export default defineConfig({
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
  ],
});

The profile names are configuration presets; they do not turn Playwright’s WebKit build into the Safari app. Keep project names explicit so test output and reports identify which browser configuration failed.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Add branded channels only when needed

If your support commitment includes branded Chrome or Edge, add projects using the appropriate installed channel. For example:

{
  name: 'chrome',
  use: { ...devices['Desktop Chrome'], channel: 'chrome' },
}

Install the browser channel as required by the browser documentation. The standard Chromium project is a sound default for many cases; use branded channels when the distinction is relevant to the product you support.

Choose a useful test matrix

More projects mean more execution time and more results to triage. Choose coverage from your actual support commitments and high-risk behavior, not from a desire to maximize the number of rows in a config file.

Run all projects or select a subset

With the configuration in place, run the complete matrix:

npx playwright test

All configured projects run by default. To run just Firefox:

npx playwright test --project=firefox

To select multiple projects, repeat the option:

npx playwright test --project=chromium --project=webkit

During development, headed mode opens the browser window, while UI mode helps inspect and rerun tests. For exact options, see the test CLI reference and running and debugging tests guide.

Emulate device and regional settings deliberately

A device profile can set characteristics such as user agent, viewport, screen dimensions and touch support. Playwright can also configure locale, timezone, geolocation, permissions and color scheme. These are emulated settings, not proof that a test ran on the corresponding physical device or in a real user’s network and location. See the emulation documentation.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Add only the settings your application uses. For example, a localized checkout may need locale and timezone coverage; a touch-oriented interaction may need a mobile profile. Keep the engine and OS visible in the project matrix when those factors affect results.

Run the matrix in continuous integration

  1. Install the project’s locked dependencies using the package manager and lockfile.

  2. Install Playwright browsers before tests. For Linux runners that need operating-system packages, use npx playwright install --with-deps.

  3. Run npx playwright test so the configured projects execute.

    Free tools Windows power users keep installed

    One-click scans. No signup required.

    Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
  4. Start with one worker on a constrained CI agent. To add throughput, shard the suite across jobs and aggregate results as appropriate for your CI setup.

    Rank #4
    The Web Testing Handbook
    • Used Book in Good Condition

These are the core recommendations in the Playwright CI guide. Keep the Playwright version and its browser installation step aligned in the CI workflow; an upgraded package with missing or mismatched browser binaries can fail before useful test results appear.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Diagnose failures by project before changing the app

A red test in a browser matrix does not automatically mean the application is broken in that browser. Check the failing project and classify the cause before changing product code.

Playwright’s best practices and debugging guide provide additional advice on reliable tests and failure investigation.

Or skip the browser setup

For website screenshots rather than interactive browser tests, ScreenshotNeo offers a one-request screenshot API and an MCP server. A screenshot request does not replace Playwright’s cross-browser test assertions, but it can produce a page image without managing browser binaries yourself. See the ScreenshotNeo API documentation.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.

Frequently Asked Questions

Can I run only one browser project locally?

Yes. Use npx playwright test --project=firefox, replacing the project name with the one in your configuration.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Does Playwright WebKit guarantee Safari compatibility?

No. It is a Playwright WebKit build, not the Safari application. Platform-sensitive behavior may require a macOS WebKit run and, where required, testing Safari itself.

Do device profiles test real phones?

No. They emulate selected device characteristics; they do not reproduce every hardware, OS or network condition of a physical device.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

More from the Wire

  1. Shenzhen desk3 min
    HONOR Expands Beyond Smartphones With Humanoid Robot RevealHONOR said it unveiled its first humanoid robot at MWC 2026 and named shopping assistance, workplace inspections, and supportive companionship as intended uses. Later Robotics D1 claims and a reported…
  2. Cupertino desk5 min
    Apple Unveils AirPods Max 2: The Upgrade That Should Have Happened Years AgoAirPods Max 2 adds H2-powered audio features and Apple claims up to 1.5× more effective ANC, but its design, Smart Case, and 20-hour battery rating are unchanged. Wired lossless audio…
  3. Cupertino desk4 min
    Apple’s OLED Touch MacBooks Are Coming—but the Dynamic Island Is the Real GambleApple has not announced an OLED touchscreen MacBook, but reports point to high-end models arriving in late 2026 or early 2027. The reported Mac Dynamic Island could be useful, but…
Recommended PC Tool
Recommended PC Tool
Windows Errors? Fix Them Before They SpreadFree repair scan
Outdated Drivers Are Slowing You DownFree scan - exact matches

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.