Posted at

だめだ、Headlessじゃどこでエラー起きてるかわかんなかった。(Rails on DockerのSeleniumテストのブラウザを見たい)


Abstract

普段はRails on Dockerにて、Headless ChromeでSystem Testをやってみた。に書いたようにHeadless Chromeを使ってRails on Dockerのテスト自動化をしているのですが、「とりあえずブレスト」の開発中に、どうしてもテストがパスしない原因がわからない事象があり...

VNCを使えばブラウザ上で操作されている様子がわかるという記事が何個かあったので、前の記事をベースにVNCの導入手順をまとめました。


VNCの入ったDocker Imageを使う

前の記事では「selenium/standalone-chrome」を使っていたのですが、GitHubをみると「selenium/standalone-chrome-debug」にはVNCが入っているとのこと。

早速Dockerfileを書き換えます。


Dockerfile

version: '3'

services:
db:
image: postgres
volumes:
- ./myapp/db:/var/lib/postgresql/data
web:
build: .
command: bundle exec rails s -p 3000 -b '0.0.0.0'
volumes:
- .:/myapp
ports:
- "3000:3000"
depends_on:
- db
- chrome
chrome:
image: selenium/standalone-chrome-debug:3.141.59-fluorine
ports:
- 4444:4444
- 5900:5900

変更点は

- chromeimagestandalone-chromeからstandalone-chrome-debugに変更

- chromeports5900:5900を追加

の2つだけ。


VNCを準備

ひとまずbuildとupしとく。

$ docker-compose build

$ docker-compose up -d

VNCは以下のコマンドで立ち上げる。パスワードは"secret"。

$ open vnc://localhost:5900


あとはテストを流すだけ。

$ docker-compose run web rspec


Conclusion

VNCでブラウザ上でどう動いているのかみることができました!

基本はheadlessでいいけど、それでもわからない時はやっぱりsleep入れながらブラウザで確認するのが一番効率がよい気がした。


Reference