Run crossbrowser e2e testing on GitHub Actions

GitHub Actions can use windows and mac for ci container so I think, "IE11
and Safari work on CI?". Speaking from conclusion, it works!

I succeeded to run windows/ie11 mac/safari windows/chrome windows/firefox on GitHub Actions.

My working example is here. https://github.com/mizchi/frontend-gh-action-playground

Setup

I use node.js selenium-webdriver and jest(-ts).

yarn add jest ts-jest selenium-webdriver chromedriver geckodriver -D

(... Setup your own jest.config.js. example)

Simple e2e scenario for browsers

// e2e/runWithSelenium.ts
import webdriver from "selenium-webdriver";
import assert from "assert";
import path from "path";

let driver: webdriver.WebDriver;

beforeAll(async () => {
  let capabilities: webdriver.Capabilities;
  switch (process.env.BROWSER || "chrome") {
    case "ie": {
      // HACK: include IEDriver path by nuget
      const driverPath = path.join(
        __dirname,
        "../Selenium.WebDriver.IEDriver.3.150.0/driver/"
      );
      process.env.PATH = `${process.env.PATH};${driverPath};`;
      capabilities = webdriver.Capabilities.ie();
      capabilities.set("ignoreProtectedModeSettings", true);
      capabilities.set("ignoreZoomSetting", true);
      break;
    }
    case "safari": {
      capabilities = webdriver.Capabilities.safari();
      break;
    }
    case "firefox": {
      require("geckodriver");
      capabilities = webdriver.Capabilities.firefox();
      break;
    }
    case "chrome": {
      require("chromedriver");
      capabilities = webdriver.Capabilities.chrome();
      capabilities.set("chromeOptions", {
        args: [
          "--headless",
          "--no-sandbox",
          "--disable-gpu",
          "--window-size=1980,1200"
        ]
      });
      break;
    }
  }
  driver = await new webdriver.Builder()
    .withCapabilities(capabilities)
    .build();
});

afterAll(async () => {
  await driver.quit()
});

it("Google", async () => {
  await driver.get('http://google.com');
  assert.equal(await driver.getTitle(), "Google");
});

You can run this script with BROWSER=chrome jest e2e/runWithSelenium.ts.

Setup workflows

I will use it on github actions on windows and mac.

# .github/workflows/xbrowser.yaml
name: xbrowser

on: [push]

jobs:
  e2e-ie:
    runs-on: windows-latest
    steps:
      - uses: actions/checkout@v1
      - uses: warrenbuckley/Setup-Nuget@v1
      - uses: actions/setup-node@v1
        with:
          node-version: 12
      - run: yarn install
      - run: nuget install Selenium.WebDriver.IEDriver -Version 3.150.0
      - run: yarn jest e2e/runWithSelenium.test.ts
        env:
          BROWSER: ie
  e2e-safari:
    runs-on: macos-latest
    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v1
        with:
          node-version: 12
      - run: yarn install
      - run: |
          sudo safaridriver --enable
          safaridriver -p 0 &
      - run: yarn jest e2e/runWithSelenium.test.ts
        env:
          BROWSER: safari
  e2e-firefox:
    runs-on: windows-latest
    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v1
        with:
          node-version: 12
      - run: yarn install
      - run: yarn jest e2e/runWithSelenium.test.ts
        env:
          BROWSER: firefox
  e2e-chrome:
    runs-on: windows-latest
    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v1
        with:
          node-version: 12
      - run: yarn install
      - run: yarn jest e2e/runWithSelenium.test.ts
        env:
          BROWSER: chrome

It works like this https://github.com/mizchi/frontend-gh-action-playground/pull/5/checks

Comments

[Konstantin Vyatkin]

I'm having trouble running Safari on GitHub Actions as Selenium fails with error that Remote Automation is not enabled. Are your tests still passing well?

[Mykyta Khmel]

Just a note:
in you example jest.config.js missing note about jest-circus