DEV Community

Koutaro Chikuba
Koutaro Chikuba

Posted on

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

Top comments (2)

Collapse
 
tinovyatkin profile image
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?

Collapse
 
hmelenok profile image
Mykyta Khmel

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