Selenium IDE を気軽に試してみる

# はじめに

数年ぶりに業務系アプリ開発を行っていますが、Webアプリからデータ投入する作業があり、至極めんどくさいと思ったため、数年ぶりに Selenium を復習しています。

とりあえず今回はブラウザ拡張機能で提供される、 Selenium IDE を動かしてみました。

# 必要なもの

* Mozilla Firefox
公式サイトからインストーラーをダウンロードの上、インストールしてください。
https://www.mozilla.org/ja/firefox/new/

* Selenium IDE 
Firefox の拡張機能からインストールします。
説明はこの後。

* TiddlyWiki
お手軽ローカル Wiki アプリ。
Node.js とインターネット接続環境があれば簡単にセットアップが可能です。
インストール手順はこちらを参照ください。
[TiddlyWiki5でお手軽Wikiサーバー構築](https://qiita.com/ko2a/items/7b989987ab5c18aa6a4d)

# Selenium IDE のインストール

Mozilla Firefox を起動して、拡張機能のインストールの「アドオンを探す」に「Selenium」と入力します。
![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49240/c78510fa-11ce-67e1-e4c0-c7ace73c10a8.png)
検索結果の「Selenium IDE」を選択します。
![003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49240/3c0c41fa-bb2e-c130-502d-55c11e7524a3.png)
「Firefox へ追加」を選択します。
![004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49240/858433a6-0091-2cf9-478a-98a3a990c3e0.png)
「Selenium IDE を追加しますか？...」のポップアップで「追加」を選択します。
![005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49240/36dfcf2b-fd54-ede0-8945-48746e2d99ae.png)
「Selenium IDE が追加されました。」が表示されたら「OK」を選択します。
![006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49240/1cb6b0cc-0fbc-5724-6233-3889a9103752.png)
Firefox の拡張機能アイコンを選択して、「Selenium IDE」の設定から「ツールバーにピン留め」をチェックしておきます。
![007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49240/83983d6f-4aab-b5df-a9f6-ee40cfd67b63.png)

# Selenium IDE の使い方

実際に TiddlyWiki で Wiki を投稿する操作を Selenium IDE に記録させ、記録を元に操作を実行してします。

## 操作の記録

Selenium IDE で操作を記録するサイトの URL を控えておきます。
![009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49240/b27df134-948c-cd34-78d5-8cfd6b0e7045.png)
Firefox の拡張機能の「Selenium IDE」のアイコンを選択します。
![008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49240/17720909-29f7-582b-b193-ab4c2e5c2ab7.png)
「Create a new project」を選択します。
![010.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49240/7177ecb1-a38b-351f-8e2c-c3652b0f04a0.png)
プロジェクト名を入力して「OK」を選択します。
（今回は「SeleniumTest」と入力）
![011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49240/b0b3c827-f29a-6844-8f46-34eb0ce82d2a.png)
そうすると Selenium IDE 画面が表示されます。
表示されたら画面右上の「REC」アイコンを選択します。
![012.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49240/c5ac75a6-e43e-82bc-22c0-a890538e7e3d.png)
プロジェクトのベース URL を設定します。
控えておいた TiddlyWiki の URL を入力して「START RECORDING」を選択します。
![013.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49240/9ee8451b-d867-cf01-62dc-56933bf0cb1a.png)
「Selenium IDE is recording...」と表示されたブラウザが起動しますので、記録したい操作を行います。
記録が終わったら、 Selenium IDE 画面右上の「REC」アイコンを再度選択して記録終了します。
![014.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49240/c3adbd50-12d7-7258-1448-8d24d8fd93a1.png)
記録終了するとテスト名が入力できるようになるので、適宜入力して「OK」を選択します。
![015.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49240/612ab7df-a221-3505-079f-6d14321a4402.png)
Selenium IDE に記録された操作が一覧表示されます。
![016.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49240/f63a9cae-f62d-670d-36d4-89c2f7ebc893.png)

## 記録の編集、実行

記録した内容を編集して、実行してみます。

TiddlyWiki に入力した Wiki のタイトルと内容をちょい変しました。
![018.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49240/2c218791-df94-cefc-f684-805b1d5cc455.png)
 5 type "SeleniumTest" -> "Selenium IDE Test"
13 type "Hello, Selenium IDE." -> "Hello, Selenium IDE on Firefox."

記録を編集するときか、項目を選択して、記録リスト下の「Value」を変更します。 

変更が終わったら、左上の実行アイコン(Run current test)を選択します。
問題なく実行できるとログに「'テスト名' completed successfully」と表示されます。
![019.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49240/bfa0068d-2c34-35b7-6f24-a9ce10274dc0.png)
TiddlyWiki にも編集した内容で Wiki が作成されています。
![021.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49240/ae79f4c2-6157-a5ab-685c-c3dec5be8d03.png)

## Selenium IDE 動作デモ

![SeleniumIDEDemo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49240/062feb82-1650-f419-75af-b160aaef8d79.gif)

# おわりに

前回触ったのが 2015 年頃だったので、当時に比べて Selenium IDE が格段に使いやすくなっていたのは驚きでした。
業務というか研修でおさわりした程度なんすけどね(^_^;)

当時は Selenium IDE とセットで Java でスクリプトを組むこともやっていたので、時間があればスクリプト組むのも試してみたい。
当時は Eclipse 使ってたけど、今なら IntelliJ IDEA でもできるかな。