UIテストのセットアップに関して、説明します。
セットアップが完了すると、指定したurlを指定したブラウザーでスクリーンショットを作成できます。
BrowserStack APIを使用するため、BrowserStackのアカウントを取得してください。
以下の技術を使用しています。
サーバーサイドのJavaScriptです。
APIを利用してスクリーンショットをとっています。
APIを使用するためのnode moduleです。
画像の重ね合わせに使用しています。
実行環境を素早く構築するため使用しています。
- Docker
- Gengar
Docker for Mac (推奨) や Docker Toolbox をインストールしてdockerコマンドを使用可能にします。
Success
dockerコマンドが使用可能になります。
$ docker -v
Docker version 1.12.1, build 23cf638, experimental
Gengar本体を任意のフォルダにダウンロードして解凍します。
$ curl -LO https://github.com/monstar-lab/Gengar/archive/master.zip
$ unzip master.zip
$ rm master.zip
$ cd Gengar-master/
$ ls -l
README.md UItest compare gengar install screenshot
初期状態では下記のようなフォルダ構成になっています。
UItest/
├── README.md
├── bin/
│ ├── config/
│ │ └── .setting.js
│ └── ...
├── result
│ └── 00_design/
└── package.json
installを実行してGengarに必要な設定を行います。
$ ./install [or ./gengar -i]
BrowserStack Username ?> ********
BrowserStack Access Key ?> ****************
...
success
bin/config/setting.jsとnode_modules/が作成されます。
UItest/
├── README.md
├── bin/
│ ├── config/
│ │ ├── .setting.js
│ │ └── setting.js ← new!
│ └── ...
├── result
│ └── 00_design/
├── node_modules/ ← new!
└── package.json
$ ./screenshot [or ./gengar -s]
success
result/以下に日付フォルダが作成され、スクリーンショットが格納されます。
※1枚当たり1分程かかります。
UItest/
├── README.md
├── bin/
│ ├── config/
│ │ └── setting.js
│ └── ...
├── node_modules/
├── package.json
└── result/
├── 00_design/
└── MM_DD/ ← new!
├── page_name_1/
│ ├── browser_1.jpg
│ └── browser_2.jpg
└── page_name_2/
├── browser_1.jpg
└── browser_2.jpg
$ ./compare [or ./gengar -c]
success
result/以下の日付フォルダにcompareフォルダが作成されます。
UItest/
├── README.md
├── bin/
│ ├── config/
│ │ └── setting.js
│ └── ...
├── node_modules/
├── package.json
└── result/
├── 00_design/ ← 比較元の画像を入れてください。日付フォルダのpage_nameとを同じ画像名にしてください。
└── MM_DD/
├── page_name_1/
│ ├── compare/ ← new!
│ ├── browser_1.jpg
│ └── browser_2.jpg
└── page_name_2/
├── compare/ ← new!
└── browser_1.jpg
└── browser_2.jpg
bin/config/setting.jsを編集することで、対応ブラウザや、URLを変更することができます。