アプリとSeleniumの2つのDockerコンテナでE2Eテスト
概要
Protractor+SeleniumによるE2Eテスト導入
→AngularアプリをDocker化
→あれ、E2Eテスト動かなくなってる・・!
となっていたので、Selenium Server, Angularアプリをそれぞれ異なるコンテナ上で起動してテストできるようにしました。
Docker初心者として苦労したので、その時の方法を共有します。
(Protractor、Seleniumコンテナ、docker-composeの詳細は別の記事を参考にしてください)
参考
-
docker-selenium 使って見た
- Seleniumコンテナの基本的な使い方を大いに参考にしています
行ったこと
-
docker-composeで以下の構成を作りました
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でテストが行われているのが見えるはず
- Seleniumコンテナの基本的な使い方を大いに参考にしています
-
docker-composeで以下の構成を作りました
Selenium Serverはdocker-seleniumのselenium/node-chrome-debugをそのまま使っています
docker-composeにSelenium Serverを追記してup
- DB, 環境変数
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
テストコード修正
- 設定ファイル
exports.config = {
seleniumAddress: `http://${process.env.SELENIUM_HOST}:${process.env.SELENIUM_PORT}/wd/hub`,
specs: ['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でテストが行われているのが見えるはず
Author And Source
この問題について(アプリとSeleniumの2つのDockerコンテナでE2Eテスト), 我々は、より多くの情報をここで見つけました https://qiita.com/okyk/items/d7a6a0cfc31776962619著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .