Edited at

GitHub Actions で Windows IE11 と Mac Safari を selenium-webdriver で動かす

最近得た天啓で、 「GitHub Actions はコンテナを windows / mac / ubuntu から選べるということは、 本物の safari と ie11 を selenium-webdriver で動かすことができるのでは?」 と思ってガチャガチャやってみたら、なんとできてしまったので、紹介します。

今回は node で。

npm install selenium-webdriver --save-dev


.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: node scratch.js
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
- name: Run safari driver
run: |
sudo safaridriver --enable
safaridriver -p 0 &
- run: node scratch.js
env:
BROWSER: safari


今回動かしてるスクリプト。 youtube にアクセスして、title を取得するだけ。


scratch.js

const webdriver = require("selenium-webdriver");

function buildCapabilities() {
switch (process.env.BROWSER) {
case "ie": {
process.env.PATH = `${process.env.PATH};${__dirname}/Selenium.WebDriver.IEDriver.3.150.0/driver/;`;
const capabilities = webdriver.Capabilities.ie();
capabilities.set("ignoreProtectedModeSettings", true);
capabilities.set("ignoreZoomSetting", true);
return capabilities;
}
case "safari": {
return webdriver.Capabilities.safari();
}
}
}

async function main() {
let driver;
try {
const capabilities = await buildCapabilities();
driver = await new webdriver.Builder()
.withCapabilities(capabilities)
.build();

await driver.get("https://www.youtube.com/");
const title = await driver.getTitle();
console.log("title", title);
} catch (e) {
console.error(e);
process.exit(1);
}
driver && (await driver.quit());
}

main();


パスの書き換えのところがちょっと Hacky なんですが、もっときれいに書けるかも

これが動いてる風景

https://github.com/mizchi/frontend-gh-action-playground/pull/4/checks?check_run_id=229164948


感想

えっこれ最高では。

(もうちょっと頑張れば Android Chrome と iOS Emulator も動かせる気がする…)