モブプロな人たちのブログ

Web サービス開発しているエンジニアの日記です。Python 大好き Flask 大好き。たまに Swift で iOS ゲーム開発も。

Docker + Selenium でスクリーンショットとってみる

こんにちは、kaorr です。

一人アドベントカレンダー2日目です。

はじめに

Web サービス開発をやっていると、定期的にスクリーンショットを取得、比較して、異常が発生していないかをチェックする場面があると思います。

手動で出来るレベルの量なら手動でやれば良いと思いますが、規模が大きくなってくるとやっぱり自動でやりたくなってきます。

というわけで、まずは半自動でやってみることにします。

f:id:kaorr_mob:20171202222409j:plain

環境、主要なバージョン情報

  • OS(ホスト/コンテナ両方) : Ubuntu 16.04.1

  • Docker : 1.12.3

  • Python : 3.5.2

  • Firefox : 51.0.1

  • Selenium : 3.0.2

手順

コンテナ整備

  • Docker をインストールする。詳細は↓が分かりやすいため、割愛。

  • 以下のコマンドを実行する。
# Ubuntu16.04 にてコンテナ構築。
docker run -it --name=“selenium_test” ubuntu:xenial

# ↓以降はコンテナ上での作業↓

# ひとまず各パッケージを最新化。
apt-get update && apt-get –y upgrade

# 必要パッケージ群をインストール。フォント系をインストールしないと文字化けする。
apt-get –y install python3 python3-pip xvfb wget vim firefox firefox-locale-ja fonts-ipaexfont-gothic fonts-ipafont-gothic

# Firefox ドライバをインストール。
wget https://github.com/mozilla/geckodriver/releases/download/v0.14.0/geckodriver-v0.14.0-linux64.tar.gz
tar zxvf geckodriver-v0.14.0-linux64.tar.gz
rm geckodriver-v0.14.0-linux64.tar.gz
mv geckodriver /usr/local/bin

# pip を最新化。
pip3 install –U pip

# 必要モジュール群をインストール。
pip3 install selenium pyvirtualdisplay

テストコード作成

  • 以下のコードを selenium_test.py としてコンテナ上に作成する。
# 各種モジュールを import
import sys
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from pyvirtualdisplay import Display
from time import sleep

# 取得対象URLと保存ファイル名を引数で渡す
URL = sys.argv[1]
FILENAME = sys.argv[2]

# 仮想ディスプレイを開始。
display = Display(visible=0, size=(1280, 960))
display.start()

# ブラウザ設定を日本語にして、Firefox を起動。
firefox_profile = webdriver.FirefoxProfile()
firefox_profile.set_preference("intl.accept_languages", "ja-jp")
firefox_profile.update_preferences()
driver = webdriver.Firefox(firefox_profile=firefox_profile)

# 対象URLページを取得。
driver.get(URL)

# 1秒待つ。(ページによっては、少し待った方が良い場合があったため追加。画像の非同期ロードなど。)
sleep(1)

# スクリーンショット取得。
driver.save_screenshot(FILENAME)

# Firefox と仮想ディスプレイを終了。
driver.quit()
display.stop()

実行

  • 以下のコマンドをホスト側で実行する。
# selenium_test.py を実行する
docker exec selenium_test python3 selenium_test.py https://www.google.co.jp/ screenshot.png

# スクリーンショットファイルをホスト側にコピーする
docker cp selenium_test:/screenshot.png .
  • 取得した画像を確認する。

  • 先ほどのコマンドを cron 等で自動化する。引数は適切なURLやファイル名にする。

おわりに

取得するまでは対応できましたが、現時点では目視確認が必須となっているのが課題です。

機械学習を絡めて、自動比較による異常検知が出来るようになると一気に楽になりそうな気がします。

f:id:kaorr_mob:20171202223309j:plain

ディープラーニング!