AI が Selenium を二度と失敗させない「 Test.AI 」の可能性
D.M. です。
AI を活用した開発者向けプロダクトを検証し、チームの生産性の向上を目指しています。
AIベースのE2Eテストツールを調査したのでご報告します。
TL;DR
・Test.AI SDK は Selenium を補助するライブラリ。画面要素を画像で認識させ動作を安定化させている。
・Test.AI Carbon は画面要素を自動認識して、自動テストの作成をサポートしてくれる。
AI を活用した開発支援ツールはテスト系が一番多い
AI を活用したプロダクトは世界的に見てどんどん新しいものが登場していると思いますが、開発者向けの AI ツールのなかで一番ホットなのはテストの領域です。以下の図は 2018 年の開発者向け AI プロダクトの状況を表したものですが、 B2B Ready つまり法人向けに製品化が完了している数が一番多いのは Testing の分野であることが示されています。
※元記事はこちら。https://medium.com/ai-for-software-engineering/ai-for-software-engineering-industry-landscape-12-aug-2018-e8e028628663
以下のベリサーブのレポートに書かれていた情報によると、TRIDENT（現MagicPod）の伊藤望様が記載している図がこのテスト系AIプロダクトの種別を解説しており、4 つの領域があることがわかります。
※引用元はこちら。大変に詳しく解説されています。https://www.veriserve.co.jp/asset/pdf/tim-verinavi-vol16.pdf
この 4 領域の中でテスト実行系が個人的に試しやすかったので、今回は Test.AI を検証してみました。
（前回のブログで Mabl を検証させていただきました。https://recruit.gmo.jp/engineer/jisedai/blog/e2e-test-saas-ai-mabl/）
Test.AI
Test.AI とは
Test.AI は 2015 年創業のスタートアップです。創業者の Jason Arbon 様は “How Google Tests Software” の著者で、技術コミュニティの AIST（ AI for Software Testing Association ）を立ち上げています。https://test.ai/
Test.AI の製品は、Web アプリ向け Selenium ＋スマホアプリ向け Appium の画面要素認識を AI で最適化して E2E テストを作成しやすくするツールになっています。
細かい制約はもちろんあるのですが、ありがたいことに Test.AI は無料で使い始めることができます。
Test.AI のイノベーション
Test.AI は、E2E テストで Selenium が画面要素を認識するため際に XPath ではなく「見た目の画像」を利用することをコア技術にしています。この画面要素判定は Computer Vision による認識と分類 Classification で AI を利用しているようです。
Test.AI の具体的な機能は2つあります。
１. Test.AI SDK による画面要素認識
Selenium による画面要素認識を行うライブラリです。Test.AI のサイトの管理画面で要素認識を設定できます。
２. Test.AI Carbon によるテスト作成
画像として認識されたテストを編集しテストを実行できるツールです。ローカルでWebアプリとして立ち上げると管理画面で操作ができます。SDKとは独立しており、ノーコードでE2Eテストを構築できます。
AI により Selenium が二度と失敗しない世界を作りだそうとしています。
それぞれ使ってみたので紹介したいと思います。
１. Test.AI SDK による画面要素認識
スゴイところ
いわゆる Selenium をはじめとしたブラウザ操作プログラミングで一番問題になるのは XPath の変更に激弱な点です。Xpath≒HTMLと考えてもらうとわかりやすいのですが、例えば画面の上部にバナーを入れました、となるとその段階でXPathは崩れてしまうので、Selenium のプログラムは修正が必要になってしまいます。
また以前に作った人が、異動・退職でいなくなってしまうと、「環境構築」「仕様把握」「修正」がコンボでコストとして降りかかってきます。（ Selenium は環境構築でなぜかいつもハマる。本当に億劫。）
この問題を解決するために Test.AI は独自の画面要素の認識機能を開発しました。XPath を使わず、見た目の画像で認識します。
めっちゃ簡単ですが新規登録リンクをクリックするだけの実装例を比較してみようと思います。（言語は Python ）
まず以下は XPath を用いたSeleniumの実装です。
import logging
import time
log = logging.getLogger(__name__)
logging.basicConfig(level=logging.INFO)
from selenium import webdriver
import chromedriver_binary
from selenium.webdriver.common.by import By
driver = webdriver.Chrome()
driver.get("https://point.gmo.jp")
time.sleep(2)
elem1 = driver.find_element(By.XPATH, '/html/body/header/div/div/ul[1]/li[1]/a')
elem1.click()
driver.close()
上記のソース、Seleniumの経験がない人はさっぱりだと思いますが、 XPath をベタ書きで指定しているところはわかると思います。当然 HTML が変更されるとここが変更されるので、都度ソース修正が必要になります。そして XPath を変えただけなのにまともに要素が認識されなくなったりすることもあります。そして次に Test.AI SDK を利用した Selenium の実装です。
import logging
import time
log = logging.getLogger(__name__)
logging.basicConfig(level=logging.INFO)
from selenium import webdriver
from test_ai import test_ai # ここで SDK のライブラリを指定
import chromedriver_binary
driver = webdriver.Chrome()
# Initialize test.ai
API_KEY = 'XXXXXXXXXXXXXXXXX' # Test.AI のユーザ登録をすると発行されるキー
driver = test_ai.TestAiDriver(driver, API_KEY)
driver.get("https://point.gmo.jp") # テスト用サイトです
time.sleep(2)
# ここで XPath を直で指定せず、任意の名前を指定しています
elem1 = driver.find_by_element_name( element_name='register_gmo_id' )
elem1.click()
driver.close()
この場合キモとなるのが register_gmo_id という名前を任意でつけて画面の要素を認識させているところです。Test.AI SDK はこの箇所を画像として取得し、管理画面で学習してくれます。初回は登録がないので画面要素認識は必ず失敗します。Test.AI の管理画面ではターゲットの画面全体の画像が出てくるので、人間が具体的に正解を選択して教えてあげることで学習して認識してくれるようになります。
失敗した後に管理画面で学習させるデモ動画です。
同じソースで2つのタイプの画面をテストできる
今回テストしたサイトは PC とモバイルで XPath が微妙に異なるため、分岐するか別のテストを書く必要があるのですが、Test.AI SDK の要素認識はこの差異を学習によって吸収してくれます。
PC →モバイルで同じソースを使って連続的に Selenimu のテストを動かしているデモ動画です。一瞬なのでわかりづらいのですが同じソースコードで2種類のテストができています。
こういう実装テクで工夫の余地があるのはとても面白い点だと思います。
もうちょっとなところ
ここでいきなりの話題として、最近のブラウザ操作プログラミングは Playwright を使うほうが一般的になってきているという話があります。残念ながら Test.AI SDK は現状では Selenium にしか対応していませんでした（2022年4月現在）。これからやるなら Playwright が使いたいので、公式のアップデートを待たなければなりません。２. Test.AI Carbon によるテスト作成
スゴイところ
上述の Test.AI SDK では自分で認識させたい画面要素を管理画面で学習させましたが、Carbon の機能では人間が操作して画面要素を選択すると自動的に学習して認識してくれます。利用者はまず一覧画面で認識された画面要素にタグで名前を付けてから、自分で管理画面上でペコペコ画面要素を並べてテストを作成します。（テスト項目自体を自動生成してくれるわけでないようでした）
開発者のテスト作成コストを極力減らそうという試みがうかがえます。
使い方
OS上で動作するWebアプリケーションをダウンロードしてローカルの Windows にインストールします。https://test.ai/download
これは一発で入りました。次にブラウザで管理画面を開いて、テスト対象のサイトの入力項目を埋めていきます。
ここでは１．Bot Mode （自動的にクローリングするモード）
２．Manual Mode （手動操作モード）
いずれにしても指定した URL 内の画面要素を取得して一覧化してくれます。（以下の真ん中のペインにある Elements ）
このままではただの画像ですので、テスト時に操作したい要素にはタグという形で任意の名前を付けていきます。（ここでは inp_shoppoing_search などを付けている）最後にテストケースとしてブラウザでの操作を設定します。
左の方のペインで、テストでどんな操作をするかを、タグ付けした画面要素を指定して設定していきます。（Test Casesの箇所）
こんな感じでとくにプログラムを実装することなく E2E テストが組めてしまいました。
上記の流れについて、ブラウザ操作によって画面の要素を取得して（クローリング）、一覧からテストを作成するデモ動画です。
ショッピングのページに行き、パンケーキで検索する操作を実行して、それをTest.AIに認識させてテストケースを作成しています。
テスト結果もテスト時の画面キャプチャ付きで表示されました。
もうちょっとなところ
まず画面要素の認識ですが、なぜか Firefox ではズレズレになってしまいました。結果 Firefox だと全くクリックの精度が安定しませんでした。また、ちょっと機能が弱いかなと感じたところとして、前回検証した Mabl では自動で生成した画面要素の認識箇所を人間によって Xpath や CSS の編集がある程度可能でした。Test.AI では完全に画像のみで認識しているような印象があり、要素認識の柔軟性をチューニングできませんでした。まだ具体的に認識不能なものに直面したわけではなかったのですが、Xpathとハイブリッドで認識してくれたほうが精度が高くなるのではと感じています。（ RPA のツールも経験的にハイブリッドが一番安定した）
そして、 Mabl にあった操作録画によるテスト作成がないのは痛いと思いました。（Selenium IDEでもPlaywrightでも録画できる）
目下 Playwright に対応するべく準備中となっていたので、そのタイミングで大きくアップデートされることが期待されます。
