アプリとSeleniumの2つのDockerコンテナでE2Eテスト

概要

Protractor＋SeleniumによるE2Eテスト導入
→AngularアプリをDocker化
→あれ、E2Eテスト動かなくなってる・・！
となっていたので、Selenium Server, Angularアプリをそれぞれ異なるコンテナ上で起動してテストできるようにしました。
Docker初心者として苦労したので、その時の方法を共有します。
（Protractor、Seleniumコンテナ、docker-composeの詳細は別の記事を参考にしてください）

参考

• docker-selenium 使って見た
  • Seleniumコンテナの基本的な使い方を大いに参考にしています

行ったこと

• docker-composeで以下の構成を作りました

  • 
  • テストコードからE2Eテスト実行環境としてSeleniumサーバを指定
  • E2Eテスト対象としてアプリを指定

• Selenium Serverはdocker-seleniumのselenium/node-chrome-debugをそのまま使っています

docker-composeにSelenium Serverを追記してup

• DB, 環境変数

docker-compose.yml

version: "3.3"
services:
  selenium:
    container_name: selenium_test
    image: selenium/standalone-chrome-debug
    networks:
      - network1
    ports:
      - "4444:4444"
      - "15900:5900"
  app:
    build: ./app
    container_name: app_test
    networks:
      - network1
    ports:
      - "3000:3000"
    volumes:
      - ./web:/app
    environment:
      SELENIUM_HOST: selenium_test
      SELENIUM_PORT: 4444
      E2E_TARGET_HOST: app_test
      E2E_TARGET_PORT: 3000
    tty: true
    stdin_open: true
    restart: always
networks:
  network1:
    driver: bridge

Seleniumコンテナが単体で動くことを確認

• http://localhost:4444/wd/hub をブラウザから開いてみる。下のような画面が表示されたらOK
  • 
• vnc://localhost:15900 に接続してみる。下の画面が表示されたらOK
  • 

テストコード修正

• 設定ファイル

conf.js

exports.config = {
  seleniumAddress: `http://${process.env.SELENIUM_HOST}:${process.env.SELENIUM_PORT}/wd/hub`,
  specs: ['login.js']
};

• テストファイル

login.js

const loginUrl = `http://${process.env.E2E_TARGET_HOST}:${E2E_TARGET_PORT}/login`;

describe('ログインテスト', function() {
  beforeEach(function() {
    browser.ignoreSynchronization = true;
    browser.get(loginUrl);
  });
  it('ログイン用の画面が正しく表示できる', function() {
    expect(browser.getTitle()).toEqual('Sample Title');
  });
});

テスト実行

• Selenium Server, Angularアプリを起動しておく
• テストコードのあるAngularアプリコンテナ内でテストコマンド（今回は protractor conf.js ）を実行
• vnc://localhost:15900 を覗くと、Chromeでテストが行われているのが見えるはず