ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

SeleniumIDEを使ってフォームテストを行う方法

ITTIウェブディレクターのSです。オリンピックイヤーから一転、コロナウィルスで大変な年になりましたね。

ブラウザのオートメーションツール「SeleniumIDE」を使ってフォームを自動でテストします。

SeleniumIDEは、Chrome、FirefoxでSeleniumを使いやすくしたプラグインです。

エクセルのマクロや、Photoshop、illustoratorのアクションのように動作を記録して、再生させることができます。記録したデータを後から修正することも可能です。

制作したウェブサイトの動作確認を何度も行う時には便利なプラグインです。
ChromeとFirefox版があるので、インストールします。

今回はChromeでの操作方法となりますが「プロジェクトの保存」でバクっぽい不具合があるので、回避方法もお伝えします。

記録方法

SeleniumIDEを起動して「Create a new project」をクリックします。


プロジェクト名を記載します。

SeleniumIDEの画面で、デフォルトで用意されているテストの名前を変更します。
テストするフォームの名前を記入すると良いでしょう。


ここで一旦、プロジェクトを保存しておきましょう。拡張子は「.side」になります。

ファイル名を付けて保存できる場合は問題ありません。

稀にファイル名を付けて保存できないバグが発生することがあります。この場合、SeleniumIDEを閉じて初めからやり直します。


playback base URL」記録を開始するURLを記入して「REC」ボタンを押して、記録を開始します。


フォームに入力していき「完了」まで、一連の動作を記録できたら「停止」ボタンを押して記録を終了します。

記録方法は以上で完了です。
上書き保存を忘れずに。

再生方法

記録したテストを再生して、フォームのテストを自動でおこないます。

再生させるURLを選択して「Run current test」ボタンを押すと、自動的にフォームを記入して送信してくれます。

一瞬で送信完了となるため、ゆっくり動作を確認したい方は横の「ストップウォッチ」ボタンから変更できます。

テストを追加する方法

1つのプロジェクトファイルには、複数のテストを記録することができます。

「+」マークをクリックします。


テストの名称を記入します。

後は、記録方法と同じ操作で操作を記録します。

記録したコマンドを編集する

記録したメールアドレスや、無駄なコマンドを削除、追加することができます。

編集するコマンドを選んで、ドットボタンを押すと、削除や新しいコマンドの追加などのメニューが表示されます。


記録されたメールアドレスを変更することもできます。


コマンドを挿入することもできます。

「Insert new command」で、コマンドを挿入して「Command」「Target」「Value」を記入します。

納品前のウェブサイトはテストを頻繁に行うため、自動化ツールで効率化を図りたいですね。

新しい記事

新宿のWEB制作会社イッティ

新宿のWEB制作会社イッティ