Docker上でSeleniumを利用し、遠隔操作の様子をVNCViewerで視覚的に確認する

Docker上でSeleniumを利用することで、ブラウザ自体やそれに対応するドライバをインストールする必要がなくなり、簡単に導入・廃棄をすることができる
しかし、そのままだとブラウザが動く様子が見えないので、VNCViewerで様子を確認する方法を以下に示す

前提

• macOS Mojave 10.14.6
• Docker Desktop 2.1.0.3
• Node.js 10.15.0

手順

SeleniumのChromeノード準備

以下ファイルにて、Selenium-HubとChromeノードのコンテナを定義する
ChromeノードはChromeブラウザ1プロセスに対応し、Selenium-Hubは複数のノードを制御するものである
今回はChrome1プロセスのみを用いるが、複数プロセスによる並列実行が可能である

docker-compose.yml

version: '3'

services:
  hub:
    image: selenium/hub
    ports:
      - 4444:4444
  chrome:
    image: selenium/node-chrome-debug
    environment:
      - HUB_PORT_4444_TCP_ADDR=hub
      - HUB_PORT_4444_TCP_PORT=4444
    ports:
      - 5900:5900
    depends_on:
      - hub

以下コマンドにて、コンテナを起動しておく

docker-compose up -d

VNCViewerを起動し、Chromeノードにホストlocalhost、パスワードsecretで接続する
VNCViewerは各種存在するが、ここではRealVNCViewerを用いている

Node.jsのテストコード作成

次に、Node.jsを用いてYahooのポータルサイトを自動操作するサンプルを作成する
まず、依存関係や実行コマンドの定義のために以下ファイルを作成する

package.json

{
  "main": "index.js",
  "scripts": {
    "test": "mocha index.js --timeout 10000"
  },
  "dependencies": {
    "mocha": "^6.2.0",
    "selenium-webdriver": "^4.0.0-alpha.4"
  }
}

実際のテストコードを以下のように作成する

index.js

const webdriver = require("selenium-webdriver");
const { Builder, By, until } = webdriver;

const TIMEOUT_MILLISEC = 10000;

let driver;

describe("Yahooポータルサイト", () => {
  before(() => {
    driver = new Builder()
      .forBrowser("chrome")
      .usingServer("http://localhost:4444/wd/hub")
      .build();
  });

  after(() => {
    return driver.quit();
  });

  it("検索ボックスに入力する", async () => {
    await driver.get("https://www.yahoo.co.jp/");

    INPUT_XPATH =
      '//*[@id="wrapper"]/header/section[1]/div/form/fieldset/span/input';
    await driver.wait(
      until.elementLocated(By.xpath(INPUT_XPATH)),
      TIMEOUT_MILLISEC
    );
    await driver
      .findElement(By.xpath(INPUT_XPATH))
      .sendKeys("DockerでSeleniumを使う");
  });
});

以下コマンドにて依存関係をインストールする

npm install

テスト実行

以下コマンドにてテストを実行する

npm run test

以下のように、ブラウザが自動で操作される様子を見ることができる

後処理

終了時は、コンテナ群を削除しておく

docker-compose down