Best Browsers for Cross-Browser Testing
Test Chromium, Firefox, and WebKit as a practical baseline, then add branded browsers, operating systems, and devices based on your users and support needs.
Short answer: Start with Chromium, Firefox, and WebKit. That gives your automated suite coverage across three major browser engines. Add stable Google Chrome or Microsoft Edge when you need to match those branded browsers, their enterprise policies, or their media-codec behavior. Choose operating systems, versions, and devices based on your supported audience and product requirements instead of multiplying test combinations without a reason.
Playwright can run projects across Chromium, Firefox, WebKit, branded Chrome and Edge, and emulated mobile or tablet devices. A browser matrix is useful when each target answers a real compatibility question; it is expensive and slow when it only repeats the same engine coverage.
Start with browser engines
A browser engine does the work of interpreting HTML and CSS, laying out pages, and running browser behavior. Browsers that share an engine can still differ in branding, release channel, platform integration, and configuration, but testing multiple Chromium-derived browsers does not establish coverage of Firefox or WebKit behavior.
| Baseline target | Why include it | When to add more |
|---|---|---|
| Chromium | A practical automated baseline and the engine family behind Chrome and Edge. | Add branded Chrome or Edge if exact browser behavior matters. |
| Firefox | Covers a separate major browser engine. | Select OS and version targets from your supported audience or release policy. |
| WebKit | Covers another major engine family, relevant to WebKit-based browser behavior. | Add actual device validation if your requirements call for it; emulation alone does not establish equivalent real-device coverage. |
This is a practical starting matrix, not a universal ranking of browsers. Playwright’s project configuration lets you define and run multiple browser projects. Its browser documentation explains browser families, branded channels, and browser installation.
When to test Chrome or Edge specifically
Playwright’s bundled Chromium and stable branded Chrome or Edge answer different questions. Bundled Chromium follows Playwright’s browser version and can be ahead of a stable branded release, which can help expose changes users may encounter later. Stable Chrome or Edge is appropriate when you need regression coverage against the publicly available branded browser.
- Use bundled Chromium for the engine baseline in a Playwright suite.
- Add Chrome when Chrome-specific behavior, a supported Chrome release, or a release regression is part of your product requirement.
- Add Edge when customers use Edge, enterprise policies affect behavior, or you need a specific Edge regression target.
- Consider official browser binaries for media-codec testing when codec availability or behavior is the issue being tested.
Do not count Chrome and Edge as substitutes for Firefox or WebKit in an engine-coverage plan. Microsoft describes Playwright as providing “cross-browser automation through a single API” in its Microsoft Edge guidance; that describes Playwright’s API, not a claim that every browser behaves identically.
Build a matrix that reflects your users
Browser coverage has several independent axes. Decide which combinations matter before adding projects:
- Engine: Chromium, Firefox, and WebKit form the broad baseline.
- Browser brand and channel: Add stable Chrome or Edge for branded-browser requirements; use a release channel that matches the regression question.
- Operating system: Cover platforms your product supports or where platform-specific behavior is a known concern.
- Version: Set versions according to support policy, customer requirements, and release risk.
- Form factor: Include desktop, emulated mobile, or emulated tablet projects where layout and interaction requirements call for them.
| Question | Matrix choice |
|---|---|
| Do we need broad engine coverage? | Run Chromium, Firefox, and WebKit. |
| Do we promise support for a specific branded browser? | Add that browser and the relevant stable version or channel. |
| Do customers use a particular OS or enterprise setup? | Add the OS/browser combinations that represent that support commitment. |
| Does responsive layout need automated checks? | Add emulated mobile or tablet projects at the viewports you support. |
| Must behavior be confirmed on an actual device? | Plan real-device validation separately; device emulation is a configuration, not proof of identical physical-device behavior. |
More projects increase execution time and maintenance. A focused matrix that follows product requirements is easier to keep fast and meaningful than a large matrix assembled without a decision rule.
Runnable Playwright setup
The following JavaScript example configures the three-engine baseline plus optional branded browser and mobile projects. The core projects run by default; use the environment variable to opt into extra projects when needed. Install Playwright Test and its browser binaries using the official getting started instructions.
import { defineConfig, devices } from '@playwright/test';
const includeExtended = process.env.EXTENDED_BROWSER_MATRIX === '1';
export default defineConfig({
testDir: './tests',
projects: [
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
{ name: 'firefox', use: { ...devices['Desktop Firefox'] } },
{ name: 'webkit', use: { ...devices['Desktop Safari'] } },
...(includeExtended ? [
{ name: 'chrome-stable', use: { ...devices['Desktop Chrome'], channel: 'chrome' } },
{ name: 'edge-stable', use: { ...devices['Desktop Edge'], channel: 'msedge' } },
{ name: 'mobile-chromium', use: { ...devices['Pixel 7'] } },
{ name: 'mobile-webkit', use: { ...devices['iPhone 14'] } },
] : []),
],
});
Example test file at tests/home.spec.js:
import { test, expect } from '@playwright/test';
test('home page loads and primary navigation is visible', async ({ page }) => {
await page.goto('https://example.com');
await expect(page.getByRole('heading', { name: /example domain/i })).toBeVisible();
await expect(page.locator('body')).not.toBeEmpty();
});
Run the default engine baseline with npx playwright test. Run the expanded set with EXTENDED_BROWSER_MATRIX=1 npx playwright test. Use npx playwright test --project=firefox to run a single target. Browser channel names and available device profiles can vary with the installed Playwright version; consult the official browser and device documentation when updating dependencies.
Hosted browser coverage
Local Playwright projects are a useful starting point. If your required operating-system and browser-version combinations exceed what you can practically install and maintain locally, a hosted grid can provide additional targets. BrowserStack documents supported Playwright browser, version, and OS combinations in its Playwright support documentation and browser support list. Choose a hosted service based on your own required combinations and workflow; these sources do not establish a universal best provider or comparative pricing.
Capture screenshots for visual review
Automated assertions catch functional problems; screenshots can help review rendering differences across targets. Keep browser, OS, viewport, and test data consistent when comparing captures. A full-page image can reveal page-wide layout shifts, while a focused element capture can make a component easier to inspect.
ScreenshotNeo is a screenshot API and MCP server from Yorker Media. It can return PNG, JPEG, WebP, or PDF captures through one GET request, and its API supports browser-related capture options including device presets and arbitrary viewports. Its capture API is useful for producing page screenshots, while Playwright browser projects remain the way to run the cross-browser test matrix described above. See the ScreenshotNeo website and API documentation.
Or skip the browser setup
For a website screenshot without installing and maintaining a browser locally, call the ScreenshotNeo API. This example saves a WebP screenshot of the page:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp
Python:
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
open("shot.webp", "wb").write(r.content)
Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);
Before capture, ScreenshotNeo accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers indicate the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. Every feature is available on every plan. The API is for screenshot capture and does not replace running automated assertions across a browser matrix.
Sign up for 1,000 free screenshots a month, with no card required.
Performance, reliability, and cost
- Keep the default matrix small: Three engines are a useful baseline; add branded browsers, OSes, and devices only when they cover a requirement or known risk.
- Separate broad checks from targeted checks: Run the core suite across engines, then run a focused project for a platform-specific regression when appropriate.
- Pin and update deliberately: Playwright browser binaries are tied to the Playwright release. Updating Playwright can change browser versions, so review baseline changes and failures as part of upgrades.
- Account for infrastructure: More projects mean more browser processes, execution time, and CI capacity. Hosted grids add a service dependency and should be evaluated against needed platform coverage.
- Make failures diagnosable: Preserve the project name, browser version, OS, and viewport with artifacts so a rendering discrepancy can be reproduced.
- For screenshot API cost: ScreenshotNeo bills only clean shots; failed or blocked outcomes and cache hits are not billed. Plans range from 1,000 free monthly shots to paid tiers beginning at $5 for 3,000.
Troubleshooting
| Symptom | Likely cause | Fix |
|---|---|---|
| Tests pass in Chromium but fail in Firefox or WebKit | Engine differences in layout, browser APIs, timing, or assumptions in the test. | Inspect the failing project and browser trace; avoid assuming a Chromium result proves cross-engine behavior. |
| Chrome or Edge channel launch fails | The branded browser is not installed or the channel is unavailable in the environment. | Install the required browser using Playwright’s installation guidance or run the project in an environment that provides it. |
| Mobile project has unexpected layout | The selected device profile changes viewport, scale factor, or mobile settings, while the app may also depend on real hardware behavior. | Verify the configured profile and test actual devices when the product requirement depends on them. |
| Screenshot comparisons vary between runs | Dynamic content, animation, fonts, network state, or viewport differences affect rendering. | Stabilize test data and viewport, wait for the relevant content, and disable or account for animation in visual checks. |
| Hosted run cannot use a desired browser/OS pair | The combination may not be offered for the selected Playwright integration. | Check the provider’s current supported browser and OS lists and adjust the matrix or execution environment. |
| ScreenshotNeo request returns a non-image response or fails | The URL may be invalid, the page may be blocked or blank, the request may time out, or credentials may be wrong. | Check the API response and its X-Page-Verdict and X-Billed headers, confirm the access key and URL, and review the API docs. |
Frequently asked questions
Is Chromium enough for cross-browser testing?
It is enough only if Chromium is the sole target your product supports. For a cross-engine baseline, add Firefox and WebKit.
Should I test both Chrome and Edge?
Only when both branded browsers matter to your support, release, policy, or codec requirements. Their presence does not replace Firefox and WebKit coverage.
Does mobile emulation replace testing on a phone?
No. Playwright supports emulated device projects, but use real-device validation when your requirements depend on actual devices.
How many browser projects should CI run?
There is no universal number. Start with the three-engine baseline, then add projects tied to supported users, product promises, and known risks.
Can ScreenshotNeo run my Playwright tests?
ScreenshotNeo captures pages and offers MCP tools for screenshot, page-info, and PDF tasks. The browser test configuration above runs through Playwright.


