SI-Toolkit for Web Testing (SIT-WT)のハンズオン勉強会で使用したものです。 勉強会ではSIT-WTの以下の機能を使います。 * 画面操作を記録してテストスクリプトを作成 * 表示中の画面からテストスクリプトを生成 * マルチブラウザでテストを実行 * 並列にテストを実行

1. SI-Toolkit for Web Testing
ハンズオン勉強会

2. このスライドは
• SI-Toolkit for Web Testing (SIT-WT)のハンズオン勉強会で使
用したものです。
• SI-Toolkit => http://sitoolkit.org/
• 勉強会ではSIT-WTの以下の機能を使います。
• 画面操作を記録してテストスクリプトを作成
• 表示中の画面からテストスクリプトを生成
• マルチブラウザでテストを実行
• 並列にテストを実行

3. ハンズオンシナリオ
• セットアップ
• Redmineをインストール
• Redmineプロジェクト「myproject」を作成
• SIT-WTプロジェクトのセットアップ
• テストスクリプト作成
• 画面操作からテストスクリプトを作成
• Seleniumテストスクリプトを実行
• テストスクリプト編集
• SIT-WTのテストスクリプトを編集
• 表示中のページのテストスクリプトを生成
• テストスクリプトから別のテストスクリプトの実行
• 正規表現でVerify
• 変数とEL式の使用
• マルチブラウザテスト
• 並列テスト実行

4. 資料の見方
• コマンドプロンプト(Windows)、ターミナル(OS X)をいずれも
「ターミナル」と表記します。
• 灰色角丸四角はターミナルでのコマンドです。
• 水色角丸四角はディレクトリ、ファイルです。
command for both Windows and OS X
[Windows]
command for Windows
[OS X]
command for OS X
directry
└─directory
file

5. セットアップ

6. Redmineのインストール
リンク先からインストーラをダウンロードして実行します。
https://bitnami.com/stack/redmine/installer
設定はデフォルトでOKです。管理者のユーザーID、パスワードは
後で使用するので忘れないようにしてください。

7. Redmineプロジェクト「myproject」を作成
「プロジェクト」＞「新しいプロジェクト」からプロジェクト
「myproject」を作成します。

8. Redmineプロジェクト「myproject」を作成

9. SIT-WTプロジェクトのセットアップ
プロジェクトディレクトリ「sit-wt」を作成します。
sit-wt ディレクトリに移動し、SIT-WTのpom.xmlをコマンドでダ
ウンロードします。
mkdir sit-wt
cd sit-wt
[Windows]
powershell -Command "Invoke-WebRequest -Uri
https://raw.githubusercontent.com/sitoolkit/sit-wt-
all/master/distribution/pom.xml -OutFile pom.xml"
[OS X]
curl -O https://raw.githubusercontent.com/sitoolkit/sit-wt-
all/master/distribution/pom.xml

10. SIT-WTプロジェクトのセットアップ
[Redmine 3系のためのSIT-WTの設定]
SIT-WTのプロパティファイルを作成し、ウィンドウ幅に901以上
の値を設定してください。
プロパティファイルはsrc/main/resourcesディレクトリに配置し
てください。
mkdir srcmainresources
echo window.width=950> srcmainresourcessit-wt.properties

11. checkpoint:セットアップ

12. テストスクリプト作成

13. 画面操作を記録してテストスクリプトを作成
Selenium IDEを使用してRedmineの画面操作をテストスクリプト
に記録します。
シナリオ
1. ログイン
2. プロジェクト「myproject」を選択
3. チケットを作成
4. チケット一覧から作成したチケットを選択
5. チケットを更新

14. 画面操作を記録してテストスクリプトを作成
• Selenium IDE操作イメージ

15. 画面操作を記録してテストスクリプトを作成
[Redmine 3系のテストスクリプト作成の注意]
「＋」リンクはマウスオーバーではなくクリックして 「新しいチ
ケット」リンクを表示させてください。
「新しいチケット」リンクは「＋」リンクのマウスオーバーでも表示されますが、マウスオーバーはスクリプト
として記録されません。このためスクリプトを自動実行すると「新しいチケット」リンクが見つからないという
エラーになります。

16. 画面操作を記録してテストスクリプトを作成
記録したテストスクリプトはプロジェクトディレクトリにHTML形
式で保存します。
sit-wt
CreateAndUpdateTicket.html
pom.xml

17. Selenium IDEテストスクリプトを実行
Mavenのverifyフェーズを実行します。
mvn verify

18. 補足：Selenium IDEテストスクリプトの実行の
仕組み
Selenium IDEのテストスクリプト(html)は、target/testscript以
下にSIT-WTのテストスクリプト(xlsx)に変換されています。
テストではこのSIT-WTのテストスクリプト(xlsx)を実行していま
す。
sit-wt
│ CreateAndUpdateTicket.html
│
└─target
│
└─testscript
CreateAndUpdateTicket.xlsx

19. checkpoint:テストスクリプト作成

20. テストスクリプト編集

21. SIT-WTのテストスクリプトを編集
SIT-WTのテストスクリプトを実行ディレクトリに移動します。
Selenium IDEのテストスクリプトは実行されないようにリネーム
します。
sit-wt
└─testscript
CreateAndUpdateTicket.xlsx
[Windows]
move targettestscript .
move CreateAndUpdateTicket.html CreateAndUpdateTicket.html_
[Mac]
mv target/testscript .
mv CreateAndUpdateTicket.html CreateAndUpdateTicket.html_

22. SIT-WTのテストスクリプトを編集
CreateAndUpdateTicket.xlsxを開き、issue_tracker_idをselect
するテストステップにブレークポイントを設定します。

23. 表示中のページのテストスクリプトを生成
SIT-WTをデバッグモードで実行します。
テスト実行がブレークポイントで一時停止します。
mvn verify -P debug

24. 表示中のページのテストスクリプトを生成
一時停止中にコンソールウィンドウで「e」＞「Enter」とタイプし
ます。

25. 表示中のページのテストスクリプトを生成
生成されたテストスクリプトが開きます。
生成されたテストスクリプトにはページ内の全操作項目のテストステップが出力され
ています。ハンズオンでは不要なため、トラッカー以前のテストステップを削除し、
ケース_001のデータをCreateAndUpdateTicket.xlsxと同じ値に設定します。

26. テストスクリプトから別のテストスクリプトの
実行
ページから生成したテストスクリプトをもとのテストスクリプトか
ら呼び出すテストステップを追加します。
操作:include
ロケーター:新しいチケット - myproject - Redmine.xlsx
ケース_001:001

27. 補足：テストスクリプトの配置ディレクトリ
テストスクリプトを配置するディレクトリの用途は以下の通りです。
sit-wt
│ pom.xml
│
├─pageobj
│ 新しいチケット - myproject - Redmine.xlsx
│
└─testscript
CreateAndUpdateTicket.xlsx
pageobj : 生成したテストスクリプトの出力先
include操作で指定するパスのルート
testscript : 「mvn verify」で実行対象となるテストスクリプトのルート

28. 正規表現でverify
verify操作のケースデータには正規表現が使用できます。使用方法
はSelenium IDEと同じで、先頭に「regexp:」を付けます。
ここではチケット番号に正規表現を使用します。
CreateAndUpdateTicket.xlsx

29. 変数とEL式の使用
ケースデータを変数として保存できます。また、ケースデータ内で
はEL式が使用できます。
ここでは乱数を生成するテストステップを追加します。
項目名:乱数
操作:store
ロケーター:rand
ケース_001:#{ T(org.apache.commons.lang3.RandomStringUtils).randomNumeric(4) }
新しいチケット - myproject - Redmine_.xlsx

30. 変数とEL式の使用
storeした変数はEL式の中でparams[‘変数名’]で使用できます。
ここではチケットの題名に乱数を含めます。
新しいチケット - myproject - Redmine_.xlsx
CreateAndUpdateTicket.xlsx

31. テストスクリプトの変更を反映
テストスクリプトをデバッグ実行中に保存すると自動的に再読込さ
れます。
「S」＞「Enter」とタイプして一時停止を解除します。

32. checkpoint:テストスクリプト編集

33. マルチブラウザ

34. Selenium Driverのセットアップ
ブラウザごとのSelenium Driverを以下のサイトのリンク先からダ
ウンロードし、プロジェクトディレクトリに配置します。
http://www.seleniumhq.org/download/
sit-wt
chromedriver.exe
IEDriverServer.exe
pom.xml

35. Firefox以外のブラウザでテスト実行
VM引数driver.type、webdriver.{driver.type}.driverを指定して
Mavenコマンドverifyフェーズを実行します。
mvn verify -Ddriver.type=chrome -Dwebdriver.chrome.driver=chromedriver.exe
mvn verify -Ddriver.type=ie -Dwebdriver.ie.driver=IEDriverServer.exe
mvn verify -Ddriver.type=edge -Dwebdriver.edge.driver=MicrosoftWebDriver.exe

36. checkpoint:マルチブラウザ

37. 並列実行

38. テストスクリプトを複製する
CreateAndUpadateTicket.xlsxのケース列をコピーし、ヘッダー行
を「ケース_002」とします。
CreateAndUpadateTicket.xlsxをコピーし、ファイル基底名の末尾
に1、2を付加します。
sit-wt
│ pom.xml
│
└─testscript
CreateAndUpdateTicket1.xlsx
CreateAndUpdateTicket2.xlsx

39. 並列実行
parallelプロファイルを指定してSIT-WTを実行します。
mvn clean verify -P parallel

40. checkpoint:並列実行

41. Follow us!
• プロジェクトホームページ
• http://sitoolkit.org/
• GitHub
• https://github.com/sitoolkit/sit-wt-all
• Twitter
• @si_toolkit
• Doorkeeper
• https://sitoolkit.doorkeeper.jp/