Table of Contents

• What Are The Major Browsers?
• Method That Works For Linux, macOS, Windows

What Are The Major Browsers?

In this post you’re going to learn how to check your site look great in every major browser including Chrome, Firefox and Safari regardless if you’re using Linux, macOS or Windows.

If you look at the browser market share worldwide Chrome is leading at 64% while Safari has close to 20% and Firefox 4% of the market share (rest in peace Internet Explorer 💐).

Why are these the major browsers demanding our attention?

The reason is because these browsers have the highest market share but each has their own browser engine (the browser engine is responsible for rendering the page on your screen) that makes it different enough resulting in having to test for it.

Most browsers such as Brave and Microsoft Edge among other browsers are Chromium-based — the same browser that Google Chrome uses meaning they are the same in that regard:

• Chrome uses Blink developed as part of the Chromium project as a fork of WebKit
• Firefox uses Gecko developed by Mozilla
• Safari uses WebKit developed by Apple

This explains why we test for these browsers but the problem is that only Chrome and Firefox are available on all platforms but Safari is macOS only, so you’re out of luck if you’re a Linux or Windows user — so what can you do?

Method That Works For Linux, macOS, Windows

If you’re a Linux user you’re in luck because you can use a WebKit based browser such as Epiphany and it works great without any setup — it’s not going to match all the features of Safari but the browser engine they use is the same.

Windows on the other hand doesn’t have any WebKit based browser you can use as far as I’m aware of, so you would have to use a virtual machine or use the latest Windows Subsystem for Linux that can use a graphical user interface and use Epiphany.

Instead of doing that you can use Playwright which is used for automated testing and has the ability to test every browser — this works because Playwright ships a binary for every browser including Chromium, Firefox and WebKit using their open source builds.

This is also useful to have a clean browser testing environment without extensions that can cause interference.

If you’re not familiar with the JavaScript ecosystem you’re going to need Node.js for the npm package manager.

⚠️ For Linux use Epiphany to test for Safari because Playwright only supports Ubuntu 20.04 LTS at the time of writing this, so you would have to use Boxes on unsupported Linux distributions.

Here is how to set up Playwright.

1. Initialize a new project inside an empty repository.

  npm init -y

2. Install @playwright/test as a development dependency.

  npm i -D @playwright/test

3. Install the default browsers.

  npx playwright install

4. Update package.json

The Playwright CLI has some interesting options we can use like --headed and --browser=webkit to specify the browser so we can add these as scripts to package.json.

{
  "scripts": {
    "test:chrome": "npx playwright test --headed --browser=chromium",
    "test:firefox": "npx playwright test --headed --browser=firefox",
    "test:safari": "npx playwright test --headed --browser=webkit"
  },
  "devDependencies": {
    "@playwright/test": "^1.22.1"
  }
}

🐿️ The npx command avoids having to install a package globally by downloading and executing the binary.

5. Add a test for Playwright

This is only so you can specify what page to visit and pause the browser so you can inspect the page — if you comment out the page.goto line it’s going to open a blank tab.

import { test } from '@playwright/test';
 
test('test browser', async ({ page }) => {
  // point this to wherever you want
  await page.goto('http://localhost:3000/');
 
  // keep browser open
  await page.pause();
});

6. Run the test using one of the scripts.

  npm run test:safari

That’s it! 🎉