PercyとSelenium（Python）でVisual Testingに触れてみる

Visual Testing ツールのPercyを触ってみます。

[Percy | Visual testing as a service](https://percy.io/)

## 前提事項

- percyへのユーザ登録が済んでいること
- Selenium+Pythonで自動テストが書ける（スキル的にも環境的にも）こと
- node.js、Pythonの環境構築済
- Windows 10

## 手順

### インストール

基本的には[Selenium for Python](https://docs.percy.io/docs/python-selenium)の通りに進行ですが、
一部公式の通りに行っても失敗するところがあったので補足しつつ。


まずPercyを触ってみる用のフォルダを作って、その中で以下コマンドを実行して`@percy/cli`をインストール。

```
$ npm install --save-dev @percy/cli
```

そして、Percy上で生成されたTOKENを環境変数にsetします。

TOKENは、Percyでプロジェクトを作ると以下のような画面になるので

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/e41ecac8-ee0d-69e4-1884-3c5c3c19fe16.png)

画面下部の

```
$ set PERCY_TOKEN=hogehogehogehoge
```

をコマンドプロンプトで実行します。

Powershellの場合は

```
$env:PERCY_TOKEN=hogehogehoge
```
です。

### テストを書く

URL開いてスクショを撮るだけのサンプルを書きました

``` python:test-hotel.py
from selenium import webdriver
from percy import percy_snapshot
from webdriver_manager.chrome import ChromeDriverManager

driver = webdriver.Chrome(ChromeDriverManager().install())

driver.get('https://hotel.testplanisphere.dev/')
driver.implicitly_wait(10)

percy_snapshot(driver, 'HOTEL PLANISPERE TOP')
```

テスト対象には[HOTEL PLANISPHERE - テスト自動化練習サイト](https://hotel.testplanisphere.dev/)を使わせていただきました。

### Percyで実行する

これをこのまま`python hoge.py`で実行しても、ブラウザが起動して遷移するだけでおわりです。
Percyのコマンドで実行してあげる必要があります。

公式ドキュメントには以下のようにかかれています。

```
$ percy exec -- python tests.py
```

手元だとこれでは「percyなんて無い」と言われてしまいました。
`npm install`のときにdevオプションをつけてローカルインストールしただけなので、node_modulesフォルダにパスが通っていません。

面倒（）なので直接percyのファイルを叩くよう、以下のコマンドで実行しました。

```
$ .\node_modules\.bin\percy exec -- python .\test-hotel.py
```

実行結果は以下。

``` powershell
PS C:\Users\yoshiki.ito\GitHub\percy-selenium-python> .\node_modules\.bin\percy exec -- python .\test-hotel.py
[percy] Chromium not found, downloading...
[percy] 153.8MB (812845) [====================] 100% 0.0s
[percy] Successfully downloaded Chromium
fatal: not a git repository (or any of the parent directories): .git
fatal: not a git repository (or any of the parent directories): .git
[percy] Percy has started!
[percy] Created build #1: https://percy.io/hogehoge123/my-sample/builds/0123456
[percy] Running "python .\test-hotel.py"


[WDM] - ====== WebDriver manager ======
[WDM] - Current google-chrome version is 89.0.4389
[WDM] - Get LATEST driver version for 89.0.4389
[WDM] - Driver [C:\Users\yoshiki.ito\.wdm\drivers\chromedriver\win32\89.0.4389.23\chromedriver.exe] found in cache

DevTools listening on ws://127.0.0.1:53432/devtools/browser/ev266427-0ae4-4f5f-9e13-htr60db4c0f8
[8788:6340:0402/113849.984:ERROR:device_event_log_impl.cc(214)] [11:38:49.985] USB: usb_service_win.cc:389 Could not read device interface GUIDs: 指定されたファイル
が見つかりません。 (0x2)
[percy] Snapshot taken: HOTEL PLANISPERE TOP
[percy] Stopping percy...
[percy] Waiting for 1 snapshot(s) to finish uploading
[percy] Finalized build #1: https://percy.io/hogehoge123/my-sample/builds/0123456
[percy] Done!
```

初回だと（スクショを撮るためと思われます）Chromiumをインストールします。
WebDriver managerはPercyと直接関係ないので無視。
USB云々のWarningもPercy関係ないので無視で大丈夫です。

### Percy上で結果を確認

実行すると自動でPercyにアップされ、ログの末尾にあるURLからアクセスできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/607144ee-e9e7-dda0-fc66-70ea573783dd.png)


まだ１度実行しただけなので、1つが「Unreciewed」で登録されている状態です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/0f945613-6d0b-519e-02ed-39f31da16456.png)

開いてみた画面がこちら。

これだけだと面白くないので、もう一度実行してみましょう。ただし、今回のテスト対象は静的なサイトなので、このまま実行しても結果は変わらず、画面差分がありません。

そこで、[HOTEL PLANISPHERE - テスト自動化練習サイト](https://hotel.testplanisphere.dev/)をクローンしてちょっとだけ変更した[HOTEL PLANISPHERE - テスト自動化練習サイトのコピー](https://yoshikiito.github.io/hotel-example-site/)にURLを変更して実行してみます。

差分は、以下画像の赤線を引いた部分。
本家じゃないよ、という旨を書いてあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/b936ba75-353d-bd55-0cce-9c0dca1c0d3c.png)


### 画像の差分表示

URLを変えて再度実行した結果が以下。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/6c81e000-a67f-6d69-6f8e-b80b08e4edd0.png)

## おわりに

という具合に、ドキュメントに従って少し手を動かせば簡単にPython-Seleniumを使ったテストで簡単に画像差分が見られるようになりました。

実際に仕事で使うにあたっては、クラウド上にスクショがアップされることが許容できるか否かや、既存のSelenium+Pythonの自動テストが沢山ある状態でひとつひとつに`percy_screenshot`処理を入れていくの辛いのでは問題など、検討するポイントが多々あります。

とはいえ、そのへんクリア出来れば、手軽にWebの自動テストに画像比較を組み込めるので、個人的にはアリだなという印象。

2021/4/2現在、月に5000スクショまではFreeプランなので、無料で試すことができます。