2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-09-03

Applitoolsというツールがあります。

プロダクトがいくつか分かれているのですが、今回はApplitools Eyesを使ってビジュアルテスティングのさわりをやってみようと思います。

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

image.png

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

本記事の前提事項

以下の環境でやります。

  • Selenium for Python
  • Windows

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

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

手順

環境構築

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

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

image.png

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

image.png

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

マニュアルには

  • Mac: export APPLITOOLS_API_KEY="YOUR_API_KEY"
  • Windows: set APPLITOOLS_API_KEY="YOUR_API_KEY"

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

image.png

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

pip install eyes-selenium
pip install webdriver-manager

動作確認

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

サンプルはこちら→tutorial-selenium-python/tutorial.py at master · applitools/tutorial-selenium-python

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

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

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

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

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

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

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

eyes.api_key = "abcdefghijklmnopqrstuvwxyz0123456789"

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

pytest tutorial.py

コマンドにて実行。

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

見事失敗。

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

一旦、以下のように変更

# サンプルの通りだと動かないので
# 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")

また

pytest tutorial.py

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

image.png

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

補足

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

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

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

参考:Eyes.open | Selenium 3 Python | Eyes SDK

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

わりと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したうえで

rect = RectangleSize(800, 600)
eyes.open(driver, "Demo app - Selenium for Python - Classic", "Smoke Test - Selenium for Python - Classic", rect)

こちらも結果かわらず。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?