Cross-browser testing works best when you test the browsers and devices your audience actually uses, define what “works” means, and repeat important checks in automation and on real devices where needed. You do not need every possible combination: agree on a support matrix, cover the browser engines in it, and keep core tasks and accessible content usable across that range.
Decide which browsers and devices to test
There is no universal browser list that fits every site. Use your own audience data and user research to identify the browsers, operating systems, screen sizes, and assistive technologies that matter. A browser-share figure for another region or audience may not describe your users.
MDN notes that testing every browser and device combination is practically impossible. Write down the combinations you will support and why. That makes “tested” meaningful and helps the team spend effort where failures would affect real users.
Define what support means
Agree on the essential outcomes before choosing test cases. Core tasks and access to content should remain usable throughout the support range. Less essential visual effects may degrade gracefully on older browsers or constrained devices.
- List the browsers and versions, operating systems, screen sizes, and mobile configurations that matter.
- Identify the key user journeys, such as signing in, finding information, or completing a purchase.
- Include accessibility expectations, including keyboard access and screen-reader navigation.
- Record the matrix and revisit it when your audience or product changes.
Cover browser engines deliberately
Different browser products can share an engine, while browsers using different engines may expose distinct rendering or behavior issues. Playwright can run projects for Chromium, Firefox, and WebKit, use emulated device configurations, and target branded Chrome or Edge channels when their exact behavior matters. See Playwright browser documentation.
Playwright WebKit is not the branded Safari application. Platform-dependent capabilities, including some media codecs, can differ by operating system. Treat automated engine coverage as a valuable repeatable check, not proof that every branded browser and platform behaves identically.
Automate the journeys you repeat
Start with a small set of stable local browsers while building a feature. Add checks as the feature takes shape, then run the agreed matrix for important journeys in continuous integration. Do not leave all browser testing until the end of development.
Configure Playwright projects
A minimal configuration can run the same test suite against the three Playwright browser engines:
import { defineConfig } from '@playwright/test';
export default defineConfig({
projects: [
{ name: 'chromium', use: { browserName: 'chromium' } },
{ name: 'firefox', use: { browserName: 'firefox' } },
{ name: 'webkit', use: { browserName: 'webkit' } },
],
});Install Playwright and its matching browser builds, then run the configured tests:
npm install --save-dev @playwright/test
npx playwright install
npx playwright testFor branded Chrome or Edge behavior, add a project using the appropriate Playwright channel, for example channel: 'chrome' or channel: 'msedge', where that browser is installed and available to the test runner. For mobile layouts, add device profiles from Playwright’s device registry. A device profile emulates settings such as viewport and user agent; it is not a substitute for every check on physical hardware.
Rank #4
Keep browser binaries in sync
Playwright browser binaries are coupled to the Playwright package version. When updating Playwright, install the browser builds expected by that release as well; stale or missing builds can prevent tests from launching or produce misleading results. Consult the official browser installation guidance when updating your setup.
Check layouts and behavior on key devices
Responsive viewport tests and emulated device profiles provide broad, repeatable coverage. Use an actual device or a cloud device lab when the risk depends on hardware, browser chrome, touch input, media playback, or other platform-specific behavior.
Free tools Windows power users keep installed
One-click scans. No signup required.
Best Value
Remote services can provide browser, operating-system, and device combinations that are unavailable locally. Compare options against the coverage you need, their fidelity to real environments, how easily tests repeat in CI, setup and maintenance overhead, and cost. BrowserStack documents controls for choosing browser and device configurations, screen resolution, and mobile orientation; its available combinations can change. See BrowserStack’s browser and device selection documentation.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Build accessibility into browser testing
At minimum, test keyboard-only navigation and screen-reader navigation in the environments relevant to your users. Confirm that focus is visible and usable, that controls can be reached and operated, and that content is navigable with the assistive technology in use.
When reporting an accessibility issue, record the browser and version, operating system or platform, and assistive-technology version. W3C guidance recommends documenting supported usage and known limitations when describing accessibility support; see W3C’s accessibility support guidance.
Make browser failures reproducible
A useful defect report lets another person reproduce the problem in the same environment. Include the route, steps, expected and actual behavior, browser and version, operating system or device, viewport and orientation, and assistive technology where relevant. Attach a screenshot or short recording when it clarifies a visual or interaction problem.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsCapture screenshots for visual checks
A screenshot can make a layout difference easier to compare across browsers or viewport sizes, but it does not replace checking interactions, keyboard access, or screen-reader behavior. ScreenshotNeo is a website screenshot API and MCP server; it can capture screenshots or PDFs, and its clean-shot options remove known consent banners, newsletter popups, and chat widgets before capture. Learn more at ScreenshotNeo.
Or skip the browser setup
One GET request can return a screenshot. See the ScreenshotNeo API documentation for the request and response details.
Quick Recap
curl -G "https://api.screenshotneo.com/v1/shot"
-d access_key=YOUR_API_KEY
--data-urlencode url=https://stripe.com
-o shot.webpCookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots, and the free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for free.
Troubleshoot common test problems
- A browser does not launch: Check that the installed Playwright browser builds match the package version, then run
npx playwright install. - A test passes locally but fails in CI: Compare browser versions, operating system, viewport, environment variables, and test data. Make the CI environment explicit and repeat the same journey there.
- A mobile emulation passes but a user still reports a device issue: Reproduce on the relevant physical device where possible. Emulation does not establish behavior for hardware, touch, browser chrome, or platform-specific media.
- A visual difference appears only in one engine: Record the exact browser, version, OS, route, and viewport, then determine whether core behavior is affected or only a non-essential visual effect.
- An accessibility defect cannot be reproduced by another tester: Include the assistive-technology name and version as well as the browser and platform; keyboard and screen-reader behavior can depend on that combination.
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.
