Cross-Browser Testing: One Test for Every Browser and Device

What is cross-browser testing?

Cross-browser testing is checking that a website or a web app works and looks right in every browser your users have.Cross-device testing does the same across screens and inputs: phones, tablets and desktop sizes, touch and mouse, portrait and landscape.Together, they answer one question.Does the page your team built work for the person who opens it on a phone, in another browser, in another language?

The question matters because a web page is not a fixed picture.Every browser draws the same HTML, CSS and JavaScript with its own engine.Every device gives the page a different screen to fit.A checkout that works on a wide monitor in Chrome can push its Pay button below the fold on a small phone.

Mobile web testing is the part that looks at a website on phones and tablets.Responsive testing is the part that checks a layout adapts to each screen size.

What changes between browsers and devices

A test that passes in one browser on one screen proves little about the others.These are the differences that break pages most often.

Viewport testing alone covers only the second row.A real cross-device check needs the screen size, the touch input and the pixel density together.

How do teams usually do cross-browser testing?

Manual checks come first.A tester opens the page in each browser and resizes the window.That works for one release and does not scale to every build.

Automated suites come next.Their shape is similar in every framework: a test written in code, then a configuration that runs it again for each browser or device.

Playwright projects and devices

Playwright groups tests into projects.A project is a group of tests that runs with one configuration, such as a browser or an emulated device.Playwright runs every project by default.Its device registry describes phones, tablets and desktops, with their screen size, user agent and touch support.

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'] } },
    { name: 'Mobile Chrome', use: { ...devices['Pixel 5'] } },
    { name: 'Mobile Safari', use: { ...devices['iPhone 12'] } },
  ],
});

Cypress browsers and viewports

Cypress supports Chrome-family browsers, Firefox and WebKit, chosen with the --browser flag.Its cy.viewport command sets the screen's size and orientation, with presets such as iphone-6 and ipad-2.Its documentation notes that the device pixel ratio is not simulated.It also suggests running some browsers less often, such as Firefox every night instead of on every commit, to save time and CI cost.

Selenium Grid

Selenium Grid runs WebDriver scripts on remote machines, in parallel, across browser versions and platforms.It is the classic way to do cross-platform testing with Selenium.Your team sets up those machines and keeps their browsers up to date.

Device clouds

Device clouds such as BrowserStack, TestMu AI (formerly LambdaTest) and Sauce Labs host the browsers and devices for you.BrowserStack and TestMu AI each list thousands of browser and operating system combinations.Sauce Labs offers emulators, simulators and real devices.Your coded tests run on their machines, and BrowserStack Automate counts its plans in parallel tests.

For a broader look at these tools, see the comparison study.

What a coded cross-device suite costs

The configuration is the easy part.The cost is everything each test has to know about each screen.

test('open the checkout', async ({ page, isMobile }) => {
  if (isMobile)
    await page.getByRole('button', { name: 'Menu' }).click();
  await page.getByRole('link', { name: 'Checkout' }).click();
});

Multiply that by every element that moves on a small screen.The cross-device part of a suite quickly becomes a second suite, with its own upkeep.

Cross-browser testing from one recording

GUI Test Studio, which automates end-to-end tests on Windows, takes another route.You record a web test once, by doing the workflow yourself in the browser you use every day.You tick the browsers, devices and conditions it should cover.GUI Test Runner-Recorder then generates a version of the test for each one, called a branch.

When you record a web app, tick Also generate this test for other browsers and devices under its address.The browsers are the ones installed on your computer: Chrome, Edge and Firefox.The devices are more than 80 phones, tablets and desktop screen sizes, grouped by maker.Each phone and tablet can be held upright, sideways or both.

Enlarge

The window says how many tests your choice makes, how long they take to generate and how much disk they use.Once the test is saved, the branches are generated in the background.Nothing is fixed at recording time: you can add browsers and devices later.

New to recording?Record a test shows the whole path.You can also describe the test in a prompt and name the browsers and devices in the same sentence: see Create a test from a prompt.

What each browser and device version does

A branch is not the recording replayed at the same coordinates.It is made by replaying the test on that browser and device, step by step, through the page's own elements.

That is the part a coded suite writes by hand.Here it comes from the page itself: the menu, the scroll and the new place of every element.

Each check of a branch is cut from what that device really shows, so a phone's own layout never reads as a failure, while a real regression on that phone still does.

When a step cannot be done on a device, the branch says so.It needs your attention, and GUI Test Studio marks the step and says why.

Responsive, localization and slow-network testing

Browsers and screens are half of what users bring.The other half is how their browser is set up.A branch can run under conditions, and each condition you tick is combined with the browsers and devices you chose.

Enlarge

Headless and side by side

A branch can run headless: the browser works without a window, so your screen and your computer stay yours.Phones, tablets and branches with a condition always run this way.Desktop branches do too when the test allows it, which is the default.The recorded test itself runs in a window, the way it was recorded.

Headless browser testing also makes parallel testing simple.The branches that need no window run side by side, up to four at once depending on your computer.

Click Run Test on such a test, and GUI Test Runner-Recorder asks which versions this run covers.Every generated branch is ticked, and the expected time sits under the list.It comes from how long each one took last time: a typical figure, not a limit.

Enlarge

At the end, one window lists every run's verdict, each with its report.See Run a test for the run itself.

Cross-browser testing in CI/CD

gtr-cli, the command line of GUI Test Studio, runs the same branches in any pipeline.--branch all runs the recorded test and every branch, each with its own entry in the JUnit file and its own history.gtr-cli generate makes the branches that are missing or out of date.

gtr-cli generate Checkout.GTS --branch missing
gtr-cli run Checkout.GTS --branch all --junit results\junit.xml

Run tests in your pipeline lists every option.The TeamCity example walks through a real pipeline, step by step, and works the same way with any CI/CD tool.

One report per browser and device

Every branch is a test of its own when it comes to results: its Confidence Report, its run history and its video.So a failure always says where it happened: in Firefox, on a phone held sideways, or in French.

In the Confidence Report, the Browsers & Devices button lists the recording and every branch with its last verdict.It opens the report of the one you pick.

Edits follow the same idea.When you save a branch after changing what a step does, GUI Test Studio asks whether the change is for every browser and device, or for this one only.When you change the recorded test, it offers to update every browser and device from it.

What to know before you start

A few limits, so you can choose with your eyes open.

Want the whole picture of what GUI Test Studio covers beyond the browser?See end-to-end testing.

Questions

Selenium, Playwright, Cypress, BrowserStack, TestMu AI, LambdaTest, Sauce Labs, Chrome, Edge, Firefox, Safari and iPhone are trademarks of their respective owners.