Selenium with JUnit(その5 Download File)

こんにちは, 数ヶ月ぶりにまた, Web 系のAutomation Testを書くことになりまして, Selenium をやっています。

今回ひっかかったのが, ファイルのダウンロードです。Buttonか何かを押して, Download の, ダイアログが表示されて, ファイルをダウンロードする。

このダイアログはモーダルで何かボタンを押さないといけないけど, HTML, JavaScript のコントロールからは逸脱しているので, コントロールがとれず, ボタンが押せない。

というのが, ありますが自動的にファイルのダウンロード, 保存までやってくれる方法があります。


1.  テストするブラウザそのものの設定を変える

2.  ブラウザオブジェクトの設定をコードで一時的に変える


1. をすると設定を変更することになり後々困るので, 今回は2でやりましょう。

※Selenium JUnit 関係をご存知ない方は以下のエントリでチェックしてください。
Selenium with JUnit
解説


以下がプログラミングの変更点です。今回のFirefox の例です。

FirefoxProfile profile = new FirefoxProfile();

profile.setPreference("browser.download.folderList", 2); // Custom Location
profile.setPreference("browser.download.manager.showWhenStarting", false); // Whether show dialog or not
profile.setPreference("browser.download.dir", new File(".").getAbsolutePath()); // Set Directory
profile.setPreference("browser.helperApps.neverAsk.saveToDisk", "text/plain"); // Set MIME type

追加したのは, 4行ほどになります。

Firefox のProfile インスタンスを作るときに, ダウンロードフォルダをセットすること, ダウンロードダイアログを見せないようにすること, MIMEタイプを指定して, このMIMEタイプの場合は, 処理方法を選択せず, そのままディスクに保存をするということをコードで追加しています。

実は, この設定を最初からブラウザにしこんでおくというのが 1 です。

あとは,

File file = new File("ファイルのパス");
Assert.assertTrue( file.exists() );

などでチェックすれば, テスト可能です。

Selenium with JUnit (その4 Firefox Portable)

こんにちは, 以前に , Firefox Portable でテスト環境をつくる という題で, Firefox ポータブルをリアルマシンに複数バージョンインストールする方法について書きました。

これを使って, ローカルマシンで,  Selenium のテストをFirefox Portable で走らせたいと思います。
Selenium でテストを書く方法ですが, 　Selenium with JUint をご覧ください。

プログラムは, 前に書いたものと変わりません。
ただし, Selenium のバージョンには注意する必要があります。

今回の環境
Windows 7  64bit
Selenium 2.13
Firefox Portable 8.0.1, 3.6Legacy, 3.5Legacy

※ 筆者は, Selenium 2.5 で Firefox Portable 8.0のテストを行ってみましたが,
TargetExceptionなるエラーが出てこれがどうしても取れませんでした。(ちなみに 3.6, 3.5は問題なく動作しました)

Selenium 2.20 -  Firefox Portable11.0 Japanese での動作を確認しました

行うことはただ1つ。
Java プログラムの実行時に , webdrive​r.firefox.bin というプロパティに, Firefoxの実行ファイルへのパスを渡す。

たったこれだけです。

Java VM のオプションに,

-Dwebdrive​r.firefox.bin="C:\Fir​efoxPortable\Firefox​Portable.exe"

上記のような感じで, Firefox ポータブル実行パス(例では c:\FirefoxPortable\FirefoxPortable.exe)
としてあげれば, Firefox ポータブルで実行されます。
(eclipse でも同じです)

Firefoxポータブルで実行されると, 必ずはじめに通常起動したときと同様に, Firefoxポータブルの画像がでてくるはずです。

プロパティは, プログラムに渡すことも可能です。
参考までに
http​://nomsdom.blogspot.​com/2011/06/simple-c​ode-for-unit-test-us​ing.html

Firefox Portable でテスト環境をつくる

Firefox Portable を使って複数のバージョンを同じマシンに共存させます。

Firefox Portableは, USBメモリなど外部メモリにインストールして, 持ち歩くというような場面で利用されるみたいです。

複数のバージョンを同マシンにインストールすることができるようなので, Selenium のテストで違うバージョンを走らせたりして, バージョン検証をやってしまおうというのが最終目標です。

今回は, インストールのみです。

環境
Window 7  64 bit
Firefox   Firefox6
Firefox Portable   8.0.1,  3.6Legacy

Firefox Poratbleは, 2バージョン(8と3.6)を用意しました。

Firefox Portable のサイトより, ダウンロードしてきます。

Down load ボタンがあります。その下に Language というリンクがありますので, そこをクリックすると,
各言語のページへ行けるようです。  古いバージョン 3.5, 3.6 などはページの下の方にリンクが張られています。

ダウンロードしたexe をクリックすると, インストール作業に入ります。

デフォルトでは, 適当な位置になっているので, しっかり自分のマシンにインストールするため
適当なフォルダを作ってインストール先を指定します。

例では C:\FirefoxPortable8\FirefoxPortable  としています。

インストール完了後, 先ほどのフォルダの中の C:\FirefoxPortable8\FirefoxPortable \FirefoxPortalbe.exe  を立ち上げると, 上の画像のように Firefox が起動しました。

実際の Firefox は,  FirefoxPortable\App\Firefox\firefox.exe です。
設定ファイルは, FirefoxPortable\Other\Source\FirefoxPortable.ini  です。

Firefox Portableで開くと, 最初にこれが必ず表示されるので, PortableでないFirefoxかそうでないかは区別がつきますね。

ちなみに, Firefox を起動しておいて, Firefox Portable を起動しようとすると,

こんなメッセージが。
ちなみに, Portableを起動して, Firefoxを起動すると, Portable clone が立ち上がります。
(Portable clone とは, Portableではないけど, Portableの設定で起動するFirefoxのことです)

さて次に, 3.6 がインストールしましょう。手順は同じです。

 C:\FirefoxPortable3.6\FirefoxPortableLegacy36   区別がつくようにこうしました。
Web ページでは, Upgrade しろよ～。と書いてありました。

同様に, FirefoxPortableLegacy36\FirefoxPortalbe.exe を立ち上げると起動します。

3.6が立ち上がりました。ちなみに, これも Portable でないFirefox を立ち上げ,これを立ち上げると
同じFirefoxが起動していますメッセージが出てきます。

Portable 同士でもバージョンが違うと, 同じメッセージが出てきました。

これで環境は完成です。同じマシンで, バージョンの違うFirefox を Portable 形式でインストールして共存させることができました。

次はこれを Selenium with JUnit(その4 Firefox Portable)につなぎます。

Selenium with JUnit(その3 Chrome)

前回, Selenium with JUnit という題で, Firefox のドライバを使った, JUnit のテストコードの解説を行いました。　今回は, Chrome でテストを行います。

Chromeでテストを行うには, 標準のドライバのみでは動作しません。Chrome の有志の方々が作成してくださった, ChromeのSupport ドライバを入れることで動作させます。

http://code.google.com/p/chromium/downloads/list より各OSのChromeドライバを入手しましょう。

windows, mac, linux 版があるようです。 windows を解凍すると, 中に, chromedriver.exe があります。
これを利用します。

では WebDriver および, Selenium クラスをとってくるための初期設定のコードを書きます。

// Chrome Driverへのパス
public static String PATH = "C:\Selenium\chromedriver.exe";
 

ChromeDriverService sercice = new ChromeDriverService.Builder().usingChromeDriverExecutable(new File(PATH)).usingAnyFreePort().build();
WebDriver driver = new RemoteWebDriver(service.getUrl(),  DesiredCapabilities.chrome());
String baseUrl = http://www.google.com;
Selenium selenium = new WebDriverBackedSelenium(driver, baseUrl);

これで, WebDriver, Selenium がget でき, 前回同様のテストが書けます。

※Macで試したらどうもうまくいかず,エラーが出ます。時間あるときになんとかエラーを取るようにしたいです。

Selenium with JUnit(その2 解説)

Selenium のWebDriverを利用したJUnit(Java)によるプログラミングの解説です。

サンプルや, 設定などは前回のブログ　Selenium with JUnit を参照してください。

Web Driverのプログラムにおいて, 核となるクラス(インターフェイス)はたった2つです。(Waitも使いますが, とりあえず)

WebDriver   :  org.apache.selenium.WebDriver   インターフェイス,  Webブラウザのコントロールのコアクラス,  ブラウザの初期設定, ブラウザタイトルの取得, HTML 要素の取得などを行います。

Selenium :  com.thoughtworks.selenium.Selenium クラス   Selenium IDEで利用していた関数をそのまま使えたりします。 つまり, click やtype などのブラウザ操作に利用できます。

※WebDriverは実際には,  FirefoxDriverであったり, RemoteWebDriverであったり具体的なクラスが入ります。

プログラミングの細かい点を見ていきましょう

●初期化(Firefox)
Firefox profile = new Firefox
WebDriver driver = new FirefoxDriver(profile);
String baseURL = "http://localhost/index.html";
Selenium selenium = new WebDriverBackedSelenium(driver, baseURL);    // これでSelenium のインスタンスが利用できる

※Firefoxでの初期化です。WebDriverをつくって, 最終的に Selenium のインスタンスを取得します
selenium でopen などを行って移動してくと, WebDriverは自動的に, そのページの情報を取得していきます


●要素の取得
WebElement element = driver.findElement(By.id("1st-id"));    //  id属性が 1st-id の要素を取得

List<WebElement> element = driver.findElements(By.id("multi-id"));

※findElementsだと複数取得できます。findElementの場合, 上から最初の要素となります

要素の特定には, By.xxx(""); を使いますおもなものをあげておきます。

By.id("");                    //  ID属性
By.linkText("");          //  link つまり  <a> の href属性
By.tagName("");         //  <div>  div などのタグの名前
By.className("");      //   class属性
By.xPath("");              //  XPath
By.cssSelector("");     //  CSS セレクタ
By.name("");              //   name属性


●URLを開く
selenium.open("/");    //   /　ルート(baseURL)を開く
selenium.waitForPageToLoad(TIMEOUT);

/ と指定した場合は, baseURLで設定した, URLを開きます。
base URLは通常は, テストしたい, Webページを書きます
"" 中にURLを書きます

ページをopenするときは, 必ず, waitForPageToLoadを入れましょう(引数はtimeout時間(ms)です)
ページのロード(描画)を待ちます。


●ボタンをクリック
selenium.click("name=fine");    // name属性が fineのボタンをクリック

※　引数は, Selenium IDEであった4つの方法と同じ書き方になります。

●入力ボックスに値を入れる
selenium.type("//input[@class='test']", "Test");    // <input type="text" class="test"> にTestと入力   

●終了処理
終了処理を行わないと, Webブラウザが開きっぱなしの状態になるので, JUnit (サンプルでは, @Afterで処理しました)以外の部分で利用する場合は, 必ず finally　ブロックの中に入れましょう。
Selenium のインスタンス, WebDriverのインスタンスそれぞれclose()します

try
{
      //   ...   Seleniumの処理
}
finally
{
     selenium.close();
     driver.close();
}

いかがでしたでしょうか, 次回は, Chromeの設定方法です。

Selenium with JUnit

今回は, Selenium と Java の Unit テスト JUnit を使ってWebアプリケーションをテストする方法についてです。(Selenium のJUnit テストは, client のドライバを使うことから, WebDriverという言葉がしばし用いられます, 今後WebDriverによるテストと何度か使うかもしれません)

環境   MacOS X   Windows7   Firefox はいずれも7.0.1
(プログラムの動作はMacで確認いたしましたが,普段Windows7でもプログラムを作成して動作しているので問題ありません)

WebDriver によるプログラミングは, Javaのほかにも C#, Python, Ruby, Perl, PHPなどでも可能です。 ブラウザは, Defualt で Firefox , そのほか拡張Driverを利用すれば, IE, Chrome, Safari, Opera, などでも可能です。(今回は, Firefoxで試してみます, Chromeもいずれの機会に)


Selenium は, すでに予備知識がある前提といたします。また, JUnit の設定も同様とします。 Selenium に関しては,  筆者のIDEに関する記述をご覧ください。

Selenium IDE その1
Selenium IDEその2(コマンド)
Selenium IDEその3(Locators)
Selenium IDEその4(Ajax)

では,さっそく準備をしましょう。

1. Selenium のライブラリのダウンロード
2. JUnit のコードを書く


SeleniumのWebページより, Selenium Client Drivers の項目から, JavaのClientライブラリ一式を
ダウンロードします。(2011/10/23時点でVersion2.9)

このフォルダを解凍すると,  selenium の中に, core である selenium-java-.x.x.x.jar があります。
依存ライブラリは, lib の中にあります。

筆者が確認したところ, WebDriverのプログラムに必要な, Minium Requirements は以下になります。
commons-logging-1.1.1.jar
guava-r09.jar
httpclient-4.1.2.jar
httpcore-4.1.3.jar
json-20080701.jar
selenium-java-2.9.0.jar


※バージョン 2.13.0 では, さらに commons-exec-1.1.jar が必要なようです 
2.20 でも2.13と同じことを確認いたしました(2012/03/22)

です。 これらをJUnit のプログラムの Build Path に入れていただく必要があります。

次に, JUnit4　を使ってプログラムを書きましょう。今回はSelenium IDEその1でも利用した, Googleのサーチを使ったテストです。

テスト手順
1.  Google のWebサイト(http://www.google.co.jp)を開く
2.  検索Box に "AKB48" と入力
3.  自動検索を待ち, AKB48公式サイトの文字が出るまで待機
4.  AKB48公式サイトのリンクをクリックしてページを表示
5.  Web ページのタイトルが 「AKB48公式サイト」であることを確かめる


プログラムを動かすと, 自動的に Firefox を立ちあげ, テストを行います。
JUnit のプログラムなので, Breakpointを追加して止めることも可能です。
Selenium IDEと違って, verify, assert 系の関数はないので,  JUnit の Assert.assertXxxx 系の関数を使用しましょう。

プログラムは  WebDriver interface と Selenium class を利用して, テストを書きます(これらの説明は次回)

WebDriver を使用して立ち上がったFirefox には, 右下に, WebDriverと表記しています。

今回使用したプログラムは以下です。詳しいコードの解説は次回に
●Test のメインクラス   SearchTest.java

package com.atmarkplant.test.selenium.sample;

import junit.framework.Assert;

import org.junit.After;
import org.junit.Before;
import org.junit.Test;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebDriverBackedSelenium;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.firefox.FirefoxProfile;

import com.thoughtworks.selenium.Selenium;

public class SearchTestCase
{
WebDriver driver;

Selenium selenium;

private static String TIMEOUT = "5000";

private static String SEARCHTEXT = "AKB48";

@Before
public void setup()
{
FirefoxProfile profile = new FirefoxProfile();
driver = new FirefoxDriver(profile);
String baseURL = "http://www.google.co.jp";
selenium = new WebDriverBackedSelenium(driver, baseURL);
}

@After
public void tearDown()
{
if ( selenium != null )
{
selenium.close();
}
if ( driver != null )
{
driver.close();
}
}

@Test
public void searchTest() throws InterruptedException
{
// Open base URL
selenium.open("/");
selenium.waitForPageToLoad(TIMEOUT);

// Input something in search text box
selenium.type("id=lst-ib", SEARCHTEXT);
WaitUtils.waitText(selenium, SEARCHTEXT, 5000);

// Click link
selenium.click("link=AKB48公式サイト");
selenium.waitForPageToLoad(TIMEOUT);

         
Assert.assertEquals("AKB48公式サイト", driver.getTitle());
Thread.sleep(4000);  // For testing
}
}


●Ajax 対策用  Textが出現するまで待つ用途のクラス
TextWait.java


package com.atmarkplant.test.selenium.sample;

import com.thoughtworks.selenium.Selenium;
import com.thoughtworks.selenium.Wait;

public class TextWait extends Wait
{
Selenium selenium;
String text;

public TextWait(Selenium selenium, String text)
{
this.selenium = selenium;
this.text = text;
}
@Override
public boolean until()
{
return selenium.isTextPresent(text);
}
}

● 上記のクラスを利用するためのUtility関数のためのクラス
WaitUitls.java

package com.atmarkplant.test.selenium.sample;

import com.thoughtworks.selenium.Selenium;
import com.thoughtworks.selenium.Wait;

public class WaitUtils
{
public static void waitText(Selenium selenium, String text, long timeout) throws InterruptedException
{
Wait wait = new TextWait(selenium, text);
synchronized(wait)
{
wait.wait(timeout);
}

}
}

Selenium IDEを使ってみる(その4 Ajax)

こんにちは,今回はSelenium IDE の一区切りとして, Ajax 対策についてです。

Selenium IDEを使ってみる(その1)
でも少し, 触れましたがWebページの全体をロードすることなく, request, response を繰り返すAjaxでは
少しテクニックが入ります。

通常のテストを行うとき, ページの遷移, 表示を待つには

コマンド	対象
waitForPageLoad	timeout(ms)

といったように waitForPageLoad でページのロードを待ちます。
(タイムアウトを指定する)

※この場合, 表示というのは JavaScript でいうところの  window.load()
JQueryでは, $(function(){}); 　にあたる。

しかし, このページロードでは, 非同期通信で,ページの一部を変更したりする処理では, 無視されてしまいます(確認済み)。


そこで, Ajax の通信終了を待ってテストを実行したい場合は何かしらの方法で待たなければなりません。

そこで登場するのが, wait系コマンドです。 残念ながら,すべての非同期通信に対応するコマンドはいまのところありません。 Selenium IDEのコマンドは, JavaScript ですから, JavaScriptで実装できれば自作して追加してみてはいかがでしょうか？

それはさておき, wait 系の関数を利用して, 非同期通信終了後に起こる何かしらの変更を検出するまで待っているという処理を追加すればよいのです。

ケース1 )  非同期通信後, ページに  Hello が表示される

コマンド	対象
waitForTextPresent	Hello

waitForTextPresent というテキストが出現するまで待つというコマンドで, Helloが表示されるまで待つ

ケース2)  非同期通信後  <input type="button" id="rena"/>  id=rena を持つボタンが出現

コマンド	対象
waitForElementPresent	id=rena

waitForElementPresent というElement が出現するまで待つというコマンドです。対象は前回説明した Locatorsを利用します。

wait 系のコマンドは　120　くらいあります(半分は Not　がつくだけですが)
その中でも, waitForTextPresent,  waitForElementPresent,  JavaScript の命令を直接埋め込める waitForCondition とかをよく使います。

waitFor と Selenium IDEのコマンド欄にうつとリファレンスが参照できるので, 興味のある方は
調べてみてください。

※wait系のコマンドでタイムアウトがない場合, 一生待ち続けるのでテストがFailする場合, テストが続いていかないといった残念なケースもあります。

筆者は, WebDriverを利用した, JavaのJUnit を使っていますが, そこではWait 系の関数は少ないので, 自作しています。機会があればいつかこれについても書きたいと思います。

Selenium IDEを使ってみる(その3 Locators)

こんにちは, 今回は Selenium IDE の Locator についてです。前回までに Selenium IDEの簡単な使用方法と, コマンドについて述べました。 これでコマンドの利用方法は, わかりましたが 実際にテストするときには, DOM 要素からinner のテキストをとってきたり,  とあるボタンをクリックしたり,  リンクをクリックしたりします。

ここで登場するのが, ターゲット(対象)  たとえば <input id="marikosama" type="button"/> といった要素を
特定して, クリック。　この要素を特定するのが,  Locators です。

Locators  : コマンドが参照するHTML要素を特定するもの。Elementを探してテストに使用する

Selecnium IDEで用意されているのは, 以下の5つです。

1.  ID属性
2.  name 属性
3.  link  ( <a>のhref のこと)
4.  XPath
5.  CSS

1.  ID 属性
DOM の id=""  ID属性のことです。 Selenium IDE 上では,

コマンド	対象	値
clickAndWait	id=marikosama

のように id=ID名を書きます。(上のボタンの場合)

2.  name 属性

DOM のname 属性のことです。 <input name="ske" type="button" value="栄"/>

この場合

コマンド	対象	値
click	name=ske

となります。

3.  link いわゆる　href

DOMの<a> タグの  href つまり, リンク先のURLのことです。

<a href="http://www.blogger.com">Bloggerだぜ</a>

とすると,

コマンド	対象	値
click	link=Bloggerだぜ

となります。

※ jQuery も高速になることですし, id属性をしっかり活用しましょう。

4.  Xpath 

ここまで来ても, やはり 複雑な要素は特定できません。table の(4,5) をクリックしたいんだ

とか, <div> の中の<p> のその中の...  のような場合は, このXpath が便利です。

※個人的には, CSSより, XPathがいいなと思います。

XPath の記法の詳細は, 他で参照していただければと思います。

コマンド	対象	値
click	/html/body/div[2]/div[3]/input

こんな感じです。 <html><body> の中の 2番目の<div>の中の3番目の<div>の input をclick

他の例)

//div[@id='find']       div で id属性が find のもの

//table[4]/tbody/tr[2]/td/table/tbody/tr/td[2]/img   4つめの<table>の<tbody>の2番目の<tr>の中の

<td> の中の<table>の中の<tbody>の中の <tr>の中の2番目の<td>の中の <img> 

とかなり複雑な対象を選択する方法が可能です。

5.  CSS

CSSの記法でDOMを特定します。

ex)

input[value='chocolate']   <input> タグで, valueがchocolateのもの

こちらも, XPath同様に, 複雑な選択ができます。

ここで余談ですが, 4, 5の方法で書く場合,  Firefinder という Firefox の Firebug というツールの

アドオンがあります。　これで, Web ページの  XPath や, CSSを正しくかけているかをチェックすることができます。(Version 1.1 )

次回以降で使い方を説明しましょう。

以上で今回の内容は終了です。実際に筆者はできるだけ 1 を使うように,  まぁ jQuery のセレクタを高速化するためにもできるだけ, id 属性を入れるようにして, テストもしやすく一石二鳥としています。

また, どうしてもだめな場合は, 一度 IDE で記録しておいて, XPathの記法をチェックして, その記法をまねして他のテストにも活用しています。 最後に, Firefinder でチェックして, テストケースの完成です。

※Firefinder ですが, Firefox 10 - Firebug 1.9 では動作しなくなってしまいました。 どうやら,8, 9 あたりかららしいです。

Selenium IDEを使ってみる(その2 コマンド)

Selenium IDE についての続編です。
前回はざっくりと使い方を説明しました。今回はコマンドです。

コマンド =  操作
です。


Selenium IDEでは, このコマンド(操作)を順々に行うことでテストを行います。
コマンド1つ1つはJavaScript の命令となっており, Max　2つの引数をとります。
これが, 対象と値です。

対象というのは,コマンドを実行するターゲットのことを指します(英語版ではTarget)。
値というのは, 入力する値や選択する値などです。

※しかしながらコマンドによっては, ただの第一引数, 第二引数だったりします。

今回紹介するコマンド

コマンド名	概要
open	Webページをオープンする
type	入力欄などに値を入れる
click	対象をクリックする
verify系	値を検証する(Failしてもテスト続行)
assert系	値を検証する(Failすると, テストも終了)
select	リストの中から選択する
check	チェックボックスにチェックを入れる
uncheck	チェックボックスのチェックをはずす

コマンドをひとつひとつ見る前に, まずリファレンスを見てみましょう。

コマンドのボックス欄にopenと打ってみましょう。すると, 下のタグの中のリファレンスがオープンします。
すると, open コマンドの説明がでてきます。

open( url )      となっており, この場合  対象がurl になります。

他に,select と打つと, 同様に
select ( selecLocator, optionLocator )  となっており,  selectLocatorが対象, optionLocator が値の部分になります。

使い方のわからないコマンドは, このようにリファレンスを活用しましょう。(ただしどのコマンドが存在するかが探せないのでコマンドに何があるのかがわからないとどうしようもないのが残念)

※ちなみに筆者は,日本語のFirefoxを使っているはずですが,リファレンスは英語になっています。
(他は日本語なのに, ところどころ訳されていないみたいです)

・ open
open(url) 

url に指定されたWebページを開きます。  (文字列)
Base URLが設定されている場合, 相対パスもいけます。

例)  google を開く
コマンド  open   対象  http://www.google.co.jp

例)  Base URL に http://localhost/ を指定していて, index2.html にとぶ
コマンド  open   対象  /index2.html

・ type
type( locator, value )

locator に指定された対象に,value を入れる

例)  入力ボックス<input type="text"> 要素のid が mayuyu に,  みんなの目線をいただきまゆゆ
を入力する
コマンド  type   対象  id=mayuyu   値  みんなの目線をいただきまゆゆ

例) 入力ボックス <input type="text"> name属性が yukirinに, 夢中にさせちゃうぞを入力する
コマンド  type   対象  name=yukirin 値  夢中にさせちゃうぞ

・ click
click ( locator )

locator に指定された対象をクリックする。  ボタン<input type="button" /> <input type="submit" />をはじめリンク <a> や <img> などクリックできるものが対象になります。

例)  リンク <a href="http://google.com>Go Google</a> をクリック

コマンド   click  対象   link=http://google.com  

例)    <input type="button"  id="abc"/> をクリック

コマンド  click  対象   id=abc

・verify 系
verify 系のコマンドは, 要素に含まれる値や, Webページに表示する値などを取得して検証を行います。　JUnit では, asset系関数と同じ意味です。
ちなみに100種類以上あります。

主なverify コマンド
-  verifyTextPresent(対象)
対象であるテキストがページ内に存在するか検証する

-  verifyText(対象, パターン)
対象である要素のテキストが値(パターン)と一致するか検証する

-   verifyTitle(対象)
対象であるパターンがタイトルに一致するかを検証する

- verifyElementPresent(対象)
対象である要素がページ内に存在するか検証する

- verifyVisible(対象)
対象である要素が 見えるか(もしくは,  visible="true"  visible 属性がtrue か falseでないか )

- verifyAlert ( 対象 )
直前に出現した alert ダイアログに, 対象であるパターンが一致するか？

- verifyAttribute(対象, パターン)
対象である属性が  パターンに一致するか検証する


もうひとつ verifyTable というのが使うかもしれませんが, table 内のテキスト検証ですが, 個人的は
対象を xpath などで拾ってその値をverifyTextなどで検証する方法がよいのかなと思っています。

・assert系
assert系コマンドは, verify と同じです。ただし assert系のコマンドはこのコマンドでテストケースが
失敗した場合, このテストケースは続いてテストがあるのにもかかわらず, テストを停止します。

コマンドは verifyXXX の部分のverify をassertに変えたものです。

・select ( 対象, オプションの選択方式)
select はリストなどの複数ある項目の中から選ぶときに利用します。
そう,<select><option> のセットのやつです。

対象は, idや　name属性などで選択,  オプションの選択は, label(表示されているもの) や, オプションのvalue 属性などで選択します。

<select id="AKB">
  <option value="1">あっちゃん</option>
  <option  value="2">ゆうこ</option>
  <option   value="3">ゆきりん</option>
</select>

ex) 上記のやつを labelで選択
コマンド  select 対象  id=AKB   値  label=あっちゃん


ex) 上記のやつを  value で選択
コマンド   select 対象  id=AKB   値   value=2

※ 個人的には,  value をお勧めします。というのは, labelは言語によって変わる可能性が
あるからです。 英語版で Acchanだと 当然 label=あっちゃんではテストはFail します。
その点value は違う可能性が低いので。

・ check / uncheck
対象にチェックを入れる


ここまで書きましたが, やはりリファレンスが圧倒的に詳しいです。コマンドをざらっと確認して, 実際のテストでは, コマンドリファレンスを見ながらテストを入力しましょう。

次回は,クリックしたり, 入力したり, 検証したりするために必要な
対象(ターゲット),  英語では, Target とか Locator といった, コマンドを行使する 要素
をどのように選択するのかです。

Selenium IDEを使ってみる(その1)

Selenium IDEを使ってWebアプリのテストを行う方法についてです。

・検証環境
Window 7 64bit Firefox 6.0
Mac OS X Firefox 6.0             　※公式では, 5.0まで確認したそうです。7.0でも動作確認済

Selenium IDEは, Firefox のアドオンです。
Selenium のWebサイトよりダウンロードします。

Mac の場合, ツールのところに Selenium IDEがあります。
Windows の場合, Firefox のメニューのWeb開発のところにあります。

Selenium IDEを開くとこんな感じです。
開くとすぐテストケースの記録が開始されますのでとりあえず一息つくために, 右上の赤いマークをクリックして記録を止めます。

画面を簡単に説明しますと, Base URL　というのがテストをスタートするURLです。
画面では, googleのWebページになっています。
通常はここに, テストしたいWebアプリのURLを突っ込みます。自分のマシンで開発中ですと,
http://localhost とかになるでしょう。

その下の緑や黄色赤のボタンなどがある部分がツールボタン群です。

左のFast Slow スライダは テストの実行スピードの調節です。Webアプリのクリックなどを試すので,速いと普通の人間では, そのスピードについていけません。ので, 目視する場合はスピードを調節します。

その右の→つきのものは, テストスイートの実行です, そしてその右がテストケースの実行です

(テストスイート:  テストケース群, 通常テストの実行は, 各テストケースを1つのスイートにまとめたりします)

(テストケース:  1つのテストのこと。1機能文のテストを1ケースと読んだり, verifyする項目1つ分をテストケースといいます。JUnit でいうと, TestCase クラス1つもしくは function　1つです)

その右が停止ボタンです。 これでステップ実行が可能なわけです。

そして, 右端にある赤いボタンがテストの記録・停止ボタンで, ここでテストの手順を自動記録していきます。

さて, ここで記録という言葉がでましたが, このSelenium IDEの素晴らしいところは テストを自動記録
できることです。
すなわち, Webブラウザ上で行った動作そのものがテストになります。
そして, その記録して保存したものを何度も実行できます。

というわけで, Selenium IDEを使った手順は以下のようになります。

1.  テストケースの作成
2.  Selenium IDEを使ってテストをブラウザ上で記録・保存
3.  検証項目を追加
4.  Selenium IDEでテストケースを実行

では, 1. より順に行きましょう。

今回はあくまで練習です。
テストケースはこんな感じです。

・google にアクセス
・検索ボックスに, AKB48 と入力
・検索の上位にある AKB48公式ページを開く

以上です。

2. ブラウザ上で記録

はい, 記録するとこのようになりました。
ここで, IDEの真ん中のテーブルという欄に, 項目が追加されました。

コマンド  :     実行するコマンド(操作)
対象       :     コマンドを何に対して行うか, (ページの名前であったり, 要素の特定であったりする)
値            :     typeであれば, タイプする値であったりする

上の説明はものすごくざっくりしています。実際には, 下にあるリファレンスという項目を開くと
コマンドの詳細説明になっています。

コマンドというのは, JavaScript の関数になっていて, 対象, 値というのは, そのJavaScript 関数の第一引数, 第二引数です。

上のテストでは
open         /                             /   つまり, base URL(google)を開きます。
type         id=1st-id    AKB     DOM要素で, idが 1st-id になっているものにAKBという値をinputします
clickAndWait  link=AKB48公式サイト       DOM要素でlink つまり<a> のHTML要素がAKB公式サイトであるものをクリックして, ページがロードされるのも待ちます。

次に, このテストケースを保存しましょう。
保存は, Ctrl + S でできます。
保存前は, テストケースの下のUntitled という名前になっています。(保存しなければ破棄されます。

保存を行おうとすると, 拡張子なしで保存されようとしますが, できましたら, .html  といったように
HTMLで保存してあげてください。

といいますのも, このテストケースファイルは,  HTMLファイルです。

Selenium IDEのテーブルという項目の横にソースというのがあります。これがこのテストケースファイルの実体です。開いていただくと, コマンド等々がHTMLのタグ達になっているのがわかります。

Selenium IDEは, このコマンドたちを読み込んで, 実行しているわけです。実際に, HTML形式で保存していただいて, 後で, 別のブラウザで開いても, HTMLファイルとして, 開くことができます。
(拡張子なしだと気持ちわるいですよね...)

firstTest.html として保存しました。これにさらにテストケースを追加や削除する場合は, 右クリックメニューで行います。

では, 次に テストらしく検証項目を入れましょう。

検証には, verifyXXX や, assertXXX といったコマンドを利用します。(違いについては, 次回に回します)

ここでは, あるテキストが存在するかどうか確かめるために verifyTextPresent を利用します。
AKB公式サイトで発売になったCD のタイトルフライングゲットという文字がかならずあるはずなので, これを対象にします。

コマンド                             対象
verifyTetxtPresent               フライングゲット

と追加しました。

さて, これで実際にテストケースが完成し, 実行してみると。。。。
あれ?  動かない。ということになったります。

理由は, Google の検索がリアルタイム検索(非同期通信)だからです。
そうAjax です。
検索欄にタイプしている間に非同期通信して検索結果を表示しているので タイプしている間に,
AKB公式サイトというリンクを探して, クリックしようして失敗というわけです。

このように, Ajaxを利用している場合ページロードを待たずして次の処理を実行して, 次の操作が見つからず(特に連動して動く選択ボックスなど) Fail するケースがあります。

今回は, この対策として, wait系のコマンド waitForTextPresent を使って,
AKB48公式サイトというリンクが見つかるまで待つというコマンドを入れて対策をとりました。

はい, これで⇒ボタンを使ってテストを再現できました。
これで, Selenium IDEを一通り使ってみたことになります。


いかがでしたでしょうか？ まずは, ダウンロードして利用してみましょう。
次回は, コマンドの詳細や複雑なテストについて , さらにAjax対策もかけるといいな。

Selenium テスト手法のまとめ

こんにちは, 今回はWebアプリケーションのテストツール,Selenium についてです。
IE単独では,IE Automation などがありますが, クロスプラットフォームで利用できるWebテストのツールとして, 大変有名だと思います。

数回にわたり, Selenium の使い方について書いていきたいと思いますがその予告編です。

Selenium におけるテストの種類を上げてみました。私が調べたのは, 以下の4種類です。

1.   Selenium IDE を使ったテスト  ( Firefox のみ )
2.   Selenium Standalone プログラム(java jar ファイル) を利用したテスト( IEをはじめ, Firefox, Chrome, Safariなど...) テストケースは, 1 と同じ HTMLを利用する方法

3.    Selenium Standalone  プログラムを利用して, テストケースはJava, C#, Pythonなどのプログラムで書く

4.   Client サイド(Web Driverを利用) も Java, C#, Pythonなどで書く。

難易度順に書いてみました。 1が最弱, 4がMax
1 は, Firefox だけを利用します。UI操作と, 一部JavaScriptの知識が必要です。

2. は, Standalone jar ファイルが必要です。(1つのjarのみ)  テストケースは, 1.を参考にして, HTMLで書きます。 結果もHTMLで保存できることと, ブラウザの種類をコマンドラインで指定できるところが素晴らしい。

3. は, 2 のjar　ファイルを実行し, jetty Server を起動しておきます。　プログラムから, このプロセスにAttachしてテストケースを走らせます。プログラムでテストケースをつくることができます。
Javaなら, JUnit 中にプログラムを書けます。

4. は, 単独で, standalone jar ファイルの役割を Web Driver に果たしてもらうことで実行できます。
Firefox の設定は比較的簡単ですが, IEや Chrome の設定はやや面倒です。ですが, プログラム
だけで走らせることができるので, 3. の煩わしさもなく, Java なら, JUnit のプログラムを走らせるだけで, 終わりです。(コードへのリンク)


●おまけ
Selenium は, Webアプリケーションのテストです。

サーバーサイドのプログラムを走らせておき, SeleniumをClientとして,Web UI をたたいてテストしていきます。
Selenium は Client の働きをするわけです。
では, 1から順に次回より説明していきましょう。