Cross-Browser Testing

Learning objectives#

• Choose browsers and devices from data
• Run tests across browsers with Playwright
• Scale with Selenium Grid or cloud labs
• Test responsive layouts

Explanation#

Use your analytics to pick the browsers and devices that cover most users (e.g. Chrome Android, Safari iOS, Chrome desktop, Edge).

Playwright projects run the same tests in Chromium, Firefox and WebKit (Safari’s engine) and emulate devices.

Selenium Grid or cloud services (BrowserStack, Sauce Labs, LambdaTest) provide real browsers and devices in parallel.

Responsive checks: key pages at phone, tablet and desktop widths with no horizontal scrolling.

Code example: Browser and device matrix#

1projects: [
2  { name: 'chrome',  use: { ...devices['Desktop Chrome'] } },
3  { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
4  { name: 'safari',  use: { ...devices['Desktop Safari'] } },
5  { name: 'android', use: { ...devices['Pixel 7'] } },
6  { name: 'iphone',  use: { ...devices['iPhone 14'] } },
7],
8

9// Responsive check inside a test
10// await page.setViewportSize({ width: 360, height: 800 });
11// const scrollWidth = await page.evaluate(() => document.documentElement.scrollWidth);
12// expect(scrollWidth).toBeLessThanOrEqual(360);

The same smoke tests run on five browser/device combinations in parallel, plus a no-horizontal-scroll check at 360 px.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. Pick targets from real usage data.
2. Define one project per target.
3. Run critical journeys on all; full suite on the main browser.
4. Add viewport checks for responsive layouts.

Real-world use case#

Common mistakes#

Best practices#

• Choose targets from analytics
• Critical journeys on every target
• Real devices for final checks
• Automated responsive checks

Remember this#

Practice exercise#

1WebKit.

Mini quiz#

Want more? Practise all Automation Testing MCQs · Automation Testing interview questions

Related topics#

My notes#

Saved in this browser.