概要

Docker + Selenium + Headless Chrome な環境で feature spec を実行する時に、ブラウザの開発者ツールを使ってデバッグしたかったので調べた。

こんな感じで使える↓

サンプルコードはこちら
https://github.com/yszk0123/selenium-docker-rails-example

今回の例では Chrome を使ったが、Firefox も可能なはず。

検証環境

macOS (High Sierra 10.13.3)
Docker for Mac (18.02.0-ce-mac53)
Docker
- ruby (2.5.0-alpine)
- selenium/standalone-chrome-debug (3.9.1-actinium)
Gem
- rails (5.1.5)
- rspec-rails (3.7.2)
- capybara (2.18.0)

やり方

ブラウザ・Selenium サーバー・VNC サーバーなどが同梱されたselenium/standalone-chrome-debug という docker イメージを使う¹。
Docker for Mac には
VNC クライアントが同梱されているので²、特別な設定なしにコンテナの外からブラウザを操作できる。

今回は次の２つのコンテナに分ける。

テストを実行するコンテナ app
Selenium サーバー用のコンテナ chrome

また、テスト用に以下のホスト・ポートを使用する (docker-compose のネットワーク機能を活用)。

アプリケーションサーバー http://app.com:3000
Selenium サーバー http://chrome.com:4444
VNC サーバー http://localhost:5900 (ホストマシンからアクセス)

docker-compose の設定

docker-compose.yml

version: "2"
services:
  # テストを実行する Rails サーバー。Dockerfile は以下のリンク
  # https://github.com/yszk0123/selenium-docker-rails-example/blob/master/Dockerfile
  app:
    container_name: app
    build: .
    ports:
      - 3000:3000
    volumes:
      - .:/app
    networks:
      test-network:
        aliases:
          - app.com
  chrome:
    container_name: chrome
    image: selenium/standalone-chrome-debug:3.9.1-actinium
    ports:
      - 4444:4444
      - 5900:5900
    networks:
      test-network:
        aliases:
          - chrome.com
networks:
  test-network:

RSpec (Capybara) の設定

spec/rails_helper.rb

require 'rspec/rails'
require "capybara/rails"
require "selenium/webdriver"

if ENV["LAUNCH_BROWSER"]
  Capybara.configure do |config|
    # docker-compose で設定した alias を使い
    # chrome コンテナ側から app コンテナ内のサーバーを参照
    config.server_host = "app.com"
    # ポートはデフォルトではランダムに割り当てられるが、設定を簡単にするため固定
    config.server_port = 3000
    config.javascript_driver = :selenium_chrome_headless
  end

  Capybara.register_driver :selenium_chrome_headless do |app|
    Capybara::Selenium::Driver.new(
      app,
      # 別コンテナで動かしている Selenium のリモートサーバーを操作
      browser: :remote,
      # Chrome 以外は適宜設定を変える
      desired_capabilities: Selenium::WebDriver::Remote::Capabilities.chrome(
        chromeOptions: {
          args: [
            "window-size=1024,512",
          ]
        }
      ),
      url: "http://chrome.com:4444/wd/hub",
    )
  end
end

実行方法

$ docker-compose up -d
# VNC クライアントを起動
$ open vnc://localhost:5900
# ここでパスワードを求められるので secret と入力
# テストを実行
$ docker exec -it app sh -c 'LAUNCH_BROWSER=true bundle exec rspec'

後は止めたいところに pry.binding などを仕込めばOK。

spec/features/sample_spec.rb

require "rails_helper"

RSpec.feature "Sample", js: true do
  scenario "sample" do
    visit sample_path

    binding.pry

    expect(page).to have_content("Hello, world")
  end
end

おまけ (JavaScript でテストを書く場合)

サーバーサイドは Rails だけど JavaScript でテストを書くケースもありそうだったので軽く調べた。
以下は selenium-webdriver を使った例。

$ docker-compose run --rm app sh -c 'bin/rails s'
$ docker-compose run --rm chrome
$ docker-compose run --rm node

docker-compose.yml

+  node:
+    container_name: node-test
+    image: node:9.6.1-alpine
+    command: sh -c 'cd /app && yarn init -y && yarn add selenium-webdriver && node test.js'
+    volumes:
+      - ./test.js:/app/test.js
+    networks:
+      test-network:
   chrome:
     container_name: chrome

test.js

const { Builder } = require('selenium-webdriver');

function wait(delay) {
  return new Promise(resolve => setTimeout(resolve, delay));
}

(async () => {
  const driver = new Builder()
    .forBrowser('chrome')
    .usingServer('http://chrome.com:4444/wd/hub')
    .build();

  try {
    await driver.get('http://app.com:3000/sample');
    await wait(3000);
  } finally {
    await driver.quit();
  }
})();

おわりに

Rails と Selenium にはあまり詳しくないため、間違いがあればご指摘いただけると助かります。

Docker 上で実行した feature spec をデバッグする方法

概要