世界一簡単なUIテスト自動化〜2020年4月時点のSelenium〜

# はじめに

皆さん、UIに関するテスト、自動化してますか？
自分で打鍵したほうが早いと思ってないでしょうか？

その概念を覆すべく、Selenium（今日はSelenium IDEのみ）を紹介したいと思います。
Seleniumに関する情報はネット上に多数あるのですが、最新どうなっているのか？という観点も含めQiitaに残します。

# 急いでいる人へのまとめ
- Selenium IDEをダウンロードして実行するだけで自動化できます
- record-and-playback形式をサポートしているので、一度打鍵操作で記録するだけで
何度でも同じ操作を再生、テストとして値の確認ができるので楽です

# 始め方

Seleniumのサイト( https://www.selenium.dev/ )に行き,Selenium IDEのダウンロードボタンを押します。

<img width="419" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113217/03f2be31-051d-c3c4-27f9-6f7570e29cd6.png">

下の方にSelenium IDEに関して、ChromeかFireFox向けのダウンロードリンクがあるので
お好きなブラウザの方リンクから、ブラウザの拡張機能/アドオンとしてインストールして取り込みます。

<img width="963" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113217/60229429-2157-f349-26a0-8f4a1ea23b55.png">

右側のChromeに追加、ボタン押下でOKです。

<img width="1040" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113217/54b84bae-9082-0501-f564-c5e177f86490.png">

権限を確認して導入します。


導入すると、ツールバーに「Se」のアイコンが表示されます。

<img width="1194" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113217/a17be320-1404-8cae-4c4f-c358ccd830ca.png">

押すと、以下画面が出ますので、これでSelenium IDEの立ち上がりとなります。
インストール完了です！

<img width="357" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113217/732c3705-3fa5-6dd9-cffd-dba926b988ea.png">

新規テストプロジェクトの記録として、Record a new test in a new projectを押します。
名前は、テストファイル保存の際の論理名となります。ここではsampleとしておきます。

<img width="347" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113217/4ef5f602-0c94-5946-2d9a-ddcbd7583240.png">

次にBaseURLを聞かれます。これは、テストしたいシステム、サイトの初期画面のURLを入れます。
ここではgoogleのサイトのURLを入れておきます。

<img width="347" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113217/bbf2d7bd-2ce5-fda3-b5f6-6e4a19ead199.png">

その後、Start Recordingを押すと、ブラウザの右下に以下表示がでます。
ブラウザ上での操作を記録していますよ、、のサインです。
過去のバージョンでは出てなかったので、わかりやすくなってますね。

<img width="472" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113217/3fc0418c-53e2-6354-e45b-907688f6e24a.png">

MDCという文字列を検索してみます。

<img width="818" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113217/fc406f33-1d54-47dd-63a5-4a7ab90f7ed1.png">

アサーション（出た結果の確認）については、右クリックでSelenium IDEというメニューから実施することができます。
ここでは、ブラウザのタイトル（表示）を確認します。

<img width="1241" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113217/a82b169c-da7d-24c3-9b9a-4907f86971d6.png">

これで録画（record)は終了にします。
ブラウザのウィンドウから、IDEを選んで、正しく録画できているか確認してみましょう。

<img width="258" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113217/204960b2-a684-4083-e90e-1649ce7ad56d.png">



<img width="739" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113217/4793b1cd-b07f-f8be-039d-f293d3faa3a9.png">
Commandがブラウザの一つ一つの操作や、Asersionを示しています。
録画を終えるために、右上の録画停止ボタンを押します。
これです。
<img width="35" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113217/e3ae81e1-5fba-8f41-42b5-a824d484ad77.png">
押すとテストに名前をつけて、と言われるので適当にいれて、OK押します。
<img width="465" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113217/7ea286b7-0380-e70d-ab5c-ed2a223268fe.png">


テストの実行は再生ボタンを押します。これです。
<img width="30" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113217/50783723-9ffa-5793-8224-033d1e6d7ad3.png">

押してみると、ブラウザが立ち上がり、勝手に操作されるかと思います。

![gamen_test3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113217/45ed3a30-5082-aecb-f6e4-dce20529a290.gif)

できましたね！

# このあと
テストファイルをファイルとして保存、次回取り込むことで再実施できます。
コマンドライン上でも実行できます。

# その先
Selenium IDEによるレコードは簡単な一方、この表示ならどうするといった分岐や
大量生産には不向きです。エンジニアであれば、コードで書きましょう。その場合はIDEではなく
WebDriverを使います。
また、Selenium IDEは前のバージョンまでは画面キャプチャが取れるコマンドがあったのですが、今は無いです。
テスト結果を画面キャプチャを残すためにも、コード書きましょう。
さらに、前のバージョンではあった、IDEからソースコードのエクスポート機能が現在は無くなっています。
record → ソースエクスポート → ソースとして編集、展開
みたいなことをしたい場合は、現状であれば、Katalonを使うとよいかと思います。（それなりにユーザーは多そうです）

https://www.katalon.com/

UIはSeleniumIDEに似てますし、画面キャプチャも撮れます。

<img width="773" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113217/5889aa8f-bd40-b73d-2d75-326a6c524f9e.png">

気になるのは、Selenium公式では無いということでしょうか・・・

以上です。