Selenium IDEでWordPressのテストをする

WordPress Advent Calendar 2013 全部オレ ついに最終日、25日目のどうしても俺です。

今日は久しぶりに使ったSeleniumがFirefoxの拡張機能になってて、なかなか素敵だったのでご紹介します。

WordPressのサイトを管理してる人にとっては、WordPress本体やプラグイン、テーマを最新に保つためのアップグレード作業は必須です。

まぁアップグレード作業自体はWordPress本体に自動アップグレード機能が付いたり、複数サイトを一括で管理してアップグレードできちゃったりするサービスもあったりしてだいぶん楽にはなってきてるんですが、エラーになってないかとか、なんかスタイルが崩れてないかとか、コンタクトフォームはちゃん送れてるかとか、まず問題ないことがほとんどなんですが、やはり一応は確認しとかないと心配です。

自分の1つや2つのサイトだけならページ開いて表示を確認して、コンタクトフォームをテストで送ってみるのも手間じゃないですが、お客さんのサイトとかたくさんあったりすると面倒ですよね。そこでSeleniumですよ、そこの奥さん。

で、Seleniumとは何かというと、

Selenium automates browsers.
Selenium はブラウザを自動化します。

http://www.seleniumhq.org/ より

と言われても分かんないですが、要はブラウザでウェブページを開いたり、フォームに入力して送信したり、ボタンをクリックしたりする動作を自動的にやって動作や表示をテストするためのものです。

今回はこれを使って、

  1. ウェブページを開いてキャプチャを撮る
  2. コンタクトフォームに適当な文字列を入れて送信する

というところまでざっと紹介します(まぁ、ほんというとまだ使い始めたばかりで他の機能まで把握してないんですけどね)。あ、Mac & Firefox使用が前提です。ウインドウズや他のブラウザでの使い方も同じようなものだと思いますが、そのへんは適宜おググりください。

ダウンロード

ダウンロードのページを開くとなんか色いろあるんですが、今回使うのはSelenium IDEです。「Download latest released version 2.4.0 なんたかんたら」の数字の部分をクリックするとFirefoxの拡張がインストールされます。

操作を記録する

とりあえずブラウザの操作を記録してみましょう。

Selenium IDEをFirefoxにインストールすると右上の端っこにSeleniumボタンが追加されてると思います(されてなかったら「ツールバー」カスタマイズとかで追加してください)ので、それをクリックします。

s01

するとこんなウインドウが表示されるはずです。

s06

これの右上のボタンが操作の記録開始、記録停止ボタンですんで、このボタンをぽちっとクリックします。

s04

ブラウザの画面にもどって適当にページを開いたりリンクをクリックしたりしてみてください。

そんでもってまた最初のSeleniumのボタンを押してSeleniumのウインドウを前に出してみると、

s05

このように今開いたページとかが記録されているはずです。とりあえずさっきの記録開始/停止ボタンを押して記録を停止しときましょう。

でこんどは、左上の実行ボタンを押してみます。

s07

そうすると、今記録した操作の通りにブラウザが自動的に動きませんか? もし動いてなかったら、、、どっかでだれかに聞いてくださいw。

こんどはキャプチャを撮ってみましょう。上のSeleniumのウインドウで「コマンド」から「captureEntirePageScreenshot」を選択して「対象」に保存するファイル名のパス(例えば、~/SeleniumSC/test.png)を入れます。残念ながら存在しないフォルダは作ってくれないので、例で言うと「~/SeleniumSC」は先に作っておく必要があります。

s10

上のようになってると思うので、また実行ボタンを押してみると、~/SeleniumSC/test.pngができてませんか? もし撮れてなかったら、、、どっかでだれかに聞いてくださいw。

こんどはコンタクトフォームのテスト送信を自動化してみましょ。

さっきのSeleniumの記録開始ボタンを押してテストするサイトのコンタクトフォームのページを開いて、適当に入力、送信ボタンを押してみます(けっしてわたしのサイトのコンタクトフォームを練習先にしないように!w)。

s02

んでもって、またSeleniumのウインドウに戻ってみると、以下のようになってるはず。なってなかったら、、(以下略。

s12

でで、また実行ボタンを押してみると、ブラウザが自動的に動いてフォームを送ってくれるはず。

あとはだいたい分かりますよね? ブラウザの操作をしなくても、例えばコマンドで「open」を追加して「対象」にURLを入れるとそのURLのページを開いてくれます。

試しにここでメニューの「ファイル」から「テストケースを保存」を押してこのテストケースを保存してみてください。で、保存したファイルをテキストエディタで開いてみると、、、中身はhtmlで、テストの項目がtableに入ってますw!

ブラウザの操作をが面倒になったらこのhtmlを直接編集してもいいでしょう。また、メニューのエクスポートからRubyやPythonやJavaで書き出すことができるので、サイトのURLとかは別ファイルにまとめてループで1つずつ処理していくのも簡単なはずです。

ということで、このテストケースを自分の管理してるサイトの分だけ用意すれば、そのあとでWordPressのアップグレードがあったときにこのテストケースを実行するだけで、画面のキャプチャを自動で撮ってくれて、フォームも自動で送ってくれるようになります。

以上です。

なんかさらっと終わりましたwが、みなさん、よいお年を! Happy holidays!