Selenum(Python)+Applitoolsでビジュアルテスト～サンプルを動かすまで

[Applitools](https://applitools.com/)というツールがあります。

プロダクトがいくつか分かれているのですが、今回は[Applitools Eyes](https://applitools.com/products-eyes/)を使ってビジュアルテスティングのさわりをやってみようと思います。

なお、チュートリアルが用意されているものの、「今ある自動テストにどうやってビジュアルテスティングを組み込むか」的な話があんまり書かれていないのと、実際やってみるとエラーにあたったりするので、回避方法含めなるべくこの記事で説明します。
参考：[Tutorials](https://applitools.com/tutorials/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/985f0d28-86e6-0a06-e238-e9d2c12f3ae1.png)

画像の通り、様々な自動テストツールとの組み合わせにたいしてドキュメントがあります。

## 本記事の前提事項

以下の環境でやります。

- Selenium for Python
- Windows

また、チュートリアルにそって行うために、以下が必要になります。

- Applitools acount
    - 無料でOK
- Python3
- pytest
- Git
- Google Chrome
- ChromeDriver

## 手順

### 環境構築

まず、Applitoolsのアカウントを用意して、画面にログインします。

右上のアカウントのアイコンから「My API Key」をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/aee67d57-c3c4-1040-f9fa-05aa65d7f94e.png)

APIキーが表示されるので、コピーしておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/995d534b-d526-56ca-9b62-539e54ebd15a.png)

次に、コピーしたAPIキーをPCの環境変数に設定します。

マニュアルには

- Mac: `export APPLITOOLS_API_KEY="YOUR_API_KEY"`
- Windows: `set APPLITOOLS_API_KEY="YOUR_API_KEY"`

と書いてあるのですが、なぜか手元では設定がうまくいかなかったので「システム詳細設定」から直接環境変数追加しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/3ef395f8-de06-a907-0298-1eca9af85bfe.png)

次に必要なモジュールをインストールします。

``` cmd
pip install eyes-selenium
pip install webdriver-manager
```

### 動作確認

ここまで出来たら、チュートリアルにあるサンプルのコードを動かして、動作確認をしてみます。

サンプルはこちら→[tutorial-selenium-python/tutorial.py at master · applitools/tutorial-selenium-python](https://github.com/applitools/tutorial-selenium-python/blob/master/tutorial.py)

これ動かすのに私の環境ではつまづきポイントがいくつかあったので、同じので困った方は参考にしてみてください。

実行は、用意しておいたAPIキーを使って以下コマンドから動かします。

``` cmd
APPLITOOLS_API_KEY="[Your API Key]" pytest tutorial.py
```

・・・と、このようにチュートリアルには書いてあるのですが、なぜか手元の環境ではAPPLITOOLS_API_KEYを正しく読んでくれず。

仕方がないので、サンプルコード中の

``` python
eyes.api_key = os.environ["APPLITOOLS_API_KEY"]
```

の部分を、osの環境変数から呼ぶのではなくAPIキーを直接

``` python
eyes.api_key = "abcdefghijklmnopqrstuvwxyz0123456789"
```

のように書く暫定対応をしました。

``` cmd
pytest tutorial.py
```

コマンドにて実行。

``` cmd
FAILED test_tutoril.py::test_tutorial - applitools.common.errors.EyesError: eyes.open_base() failed
==================================================================== 1 failed, 1 warning in 53.59s ==================================================================== 
```

見事失敗。

どうも`eyes.open`でウィンドウサイズを指定の値にするところでこけているようです。

一旦、以下のように変更

``` python
# サンプルの通りだと動かないので
# eyes.open(driver, "Demo app - Selenium for Python - Classic", "Smoke Test - Selenium for Python - Classic", {"width": 800, "height": 600})

# 以下のように、サイズ指定無しに変更
eyes.open(driver, "Demo app - Selenium for Python - Classic", "Smoke Test - Selenium for Python - Classic")
```

また

``` cmd
pytest tutorial.py
```

で実行してみると、こんどは成功。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/72e99f97-c03f-606c-538c-efe0cd20a582.png)

Applitools上にスクリーンショットが登録されました。

## 補足

ここから先は読み飛ばし推奨ですが、「ウィンドウサイズを指定するとうまく動かない原因」が特定できませんでした。

特定出来なかったものの「これじゃなかった」を記載しておくことも一定価値があると信じて記載しておきます。

基本、公式ドキュメントのopenのところを見て調べました。

参考：[Eyes.open | Selenium 3 Python | Eyes SDK](https://applitools.com/docs/api/eyes-sdk/classes-gen/class_eyes/method-eyes-open-selenium-python_sdk4.html?Highlight=open)

### ディスプレイ解像度の設定

わりとGUIの自動化をしているとあるあるだと思うのですが、4Kモニタを150%表示で使ってる、みたいなときにウィンドウ操作まわりが失敗することがあります。

試しにフルHDの画面100%表示で動かしてみたものの、かわらずでした。

### openの前にウィンドウサイズを指定する

`eyes.set_viewport_size`というメソッドがあるようだったので、openの前にサイズ設定するようにしました。結果、変わらず。

### RectangleSizeオブジェクトで指定

openメソッドの最後の引数の説明に

> Type definitions
> ViewPort
> The type ViewPort is defined as: Union[Dict[Text,int],RectangleSize]

とあったので、RectabgleSizeオブジェクトでサイズを定義して渡すやり方をやってみました。

RectabgleSizeをimportしたうえで
``` python
rect = RectangleSize(800, 600)
eyes.open(driver, "Demo app - Selenium for Python - Classic", "Smoke Test - Selenium for Python - Classic", rect)
```

こちらも結果かわらず。