Selenium WebDriverを各言語(Java, Ruby, node.js, Python, C#)で使ってみた時の概要 元はオープンソースカンファレンス2014 Kansai@Kyoto 用に企画したものだが、ローカルを優先するという理由により落選したのでTechOyajiで発表。

1. WebDriverで
遊ぼう
東平洋史

2. 自己紹介
• 名前
東平洋史(とうへいひろふみ)
• 職業
ある会社のテスト設計者
• Selenium使用歴
2014/3/4(月)~
• 前歴
NTT 武蔵野通研→NTTコミュニケーショ
ンズ→某社→CTCシステムオペレーショ
ンズ

3. Seleniumとは?
• 原子番号34の元素
• 元素記号はSe
• 第16族元素
– 酸素と同族
– ハロゲンの隣
• 灰色セレン
– 金属セレン
– 六方晶系
– 融点は217.4℃
• 赤色セレン
–単斜晶系

4. では
なくて

5. Seleniumとは?
http://docs.seleniumhq.org/
• Webベースアプリケーション用テスト
自働化ツール
• ライセンスはApache 2.0 License

6. Seleniumで出来ること
• ユーザが行なった操作の記録・スク
リプト化
–クリック、ダブルクリック
–文字入力
など
• ユーザが行なった操作の再現実行
⇒ブラウザのテスト、自動実行

7. Selenium IDE(1)
• Seleniumのテストケース開発用ツー
ル
• Mozilla Firefox の add-on
http://docs.seleniumhq.org/downloa
d/

8. Selenium IDE(2)
ツールバー
テストケースペイン
ログ/リファレンス/UI-Element/Rollupペイン
メニューバー

9. Selenium IDE(3)
• ツールバー
1. Speed Control
実行速度調節
2. Run All
スクリプトをすべて
実行
3. Run
選択されているス
クリプトを実行
4. Pause/Resume
一時停止/再開
5. Step
コマンドをステップ
(一つずつ)実行
6. Record
ブラウザの操作を
記録
1
2
3
4
5 6

10. Selenium IDE使用例

11. ここで
実習

12. 実習内容
次のテストを行なうスクリプトの作成
1. Googleで「小江戸らぐ」を検索
2. 次のページを表示
OSS支える！コミュニティー訪問~小江戸らぐ
- 川越を中心にゆるく活動するLinuxユー
ザー会
3. 写真をクリックして拡大表示

13. Selenium IDEでの自動実行の手順
コマンド 対象 値
open /
type id=lst-ib 小江戸らぐ
click name=btnK
waitForElementPr
esent
//a[@href='http://itpro.nikkei
bp.co.jp/article/COLUMN/201
31003/508665/']
clickAndWait //a[@href='http://itpro.nikkei
bp.co.jp/article/COLUMN/201
31003/508665/']
click css=img[alt="小江戸らぐ
"]

15. 機能は
貧弱

16. Selenium IDEの貧弱さ
• 大域変数しかない
– テストケースすべてで同じ変数しか使えない
• 編集機能は貧弱
• Webブラウザしか操作できない
– Mozilla Firefoxのadd-onだから
• Mozilla Firefoxでしか使えない
– Mozilla Firefoxのadd-onだから

17. という
わけで

18. Selenium WebDriver
http://docs.seleniumhq.org/projects/webdriver/
• プログラムからWebブラウザ制御
• 制御可能ブラウザ
– Internet Explorer、Mozilla Firefox、Google Chrome、
Opera、Android標準Webブラウザ、Safari(iOS)
• 使用可能言語
– Java、C#、Ruby、Python、Javascript(Node)

19. Selenium WebDriverは高機能
• 局所変数使用可能
• 強力なIDEで編集可能
– Eclipse, IntelliJ IDEA, …
• Webブラウザ以外も操作可能
– プログラムだから
• Mozilla Firefox以外のブラウザも操作可能
– プログラムだから

20. Selenium WebDriver の仕組
プログラム
Firefox
Driver
Chrome
Driver
Internet
Explorer
Driver
driver server
Mozilla
Firefox
Google
Chrome
Internet
Explorer
Web Browser

21. ここで
実習

22. 実習内容
次のテストを行なうプログラムの作成
1. Google Chrome 起動
2. Googleで「小江戸らぐ」を検索
3. 次のページを表示
OSS支える！コミュニティー訪問~小江戸らぐ
- 川越を中心にゆるく活動するLinuxユー
ザー会
4. 写真をクリックして拡大表示

23. 次の組み合わせで作りました
Java Ruby node.js Python C#
Google
Chrome
Mozilla
Firefox
Internet
Explorer

24. どうやって
作るの?

25. 導入方法
1. 言語の処理系インストール
2. プログラミングの環境インストール
3. Selenium WebDriver のライブラリインス
トール
4. 各ドライバのインストール
5. Selenium Server のインストール
6. プログラミング

26. 各言語の処理系(1)
• Java SE Development Kit(JDK) 8
http://www.oracle.com/technetwork/java/javase/d
ownloads/jdk8-downloads-2133151.html
• Ruby
– https://www.ruby-lang.org/ja/downloads/
– http://rubyinstaller.org/ (Windows用)

27. 各言語の処理系(2)
• node.js
– http://nodejs.org/download/
• Python
– https://www.python.org/
Python versions are 2.7, 3.2, 3.3 and 3.4
• C#
– Microsoft Visual Studio Express 2013 for Windows
Desktop
http://www.visualstudio.com/ja-jp/products/visual-
studio-express-vs.aspx

28. プログラミングの環境
• eclipse(Java)
https://www.eclipse.org/
• IntelliJ IDEA(Java)
http://www.jetbrains.com/idea/
• GNU Emacs(Ruby, node.js, Python)
http://sourceforge.jp/projects/gnupa
ck/releases/

29. 各言語用ライブラリ(1)
• Java
–http://docs.seleniumhq.org/docs/03_
webdriver.jsp
• Ruby
–https://code.google.com/p/selenium/
wiki/RubyBindings

30. 各言語用ライブラリ(2)
• WebDriverJS(node.js)
–https://code.google.com/p/selenium/
wiki/WebDriverJs#WebDriverJS_User’s
_Guide
• Python
–http://selenium-
python.readthedocs.org/en/latest/ind
ex.html

31. Selenium WebDriver(Java)
• http://docs.seleniumhq.org/d
ownload/ から selenium-java-
2.42.2.zip を取得し、
CLASSPATHに追加

32. Selenium WebDriver (Ruby)
• 次のコマンドを実行
gem install selenium-
webdriver

33. Selenium WebDriver (Python)
• 次のコマンドを実行
pip install selenium
http://selenium-
python.readthedocs.org/en
/latest/index.html

34. Selenium WebDriver(C#)
• NuGet Install-Packageで次のパッケージ
をインストール
–Install-Package Selenium.RC
–Install-Package Selenium.WebDriver
–Install-Package
Selenium.WebDriverBackedSelenium
–Install-Package Selenium.Support
http://docs.seleniumhq.org/download/

35. Selenium WebDriver (node.js)
WebDriver.js を使う場合は次のコマンドを
実行
npm install selenium-webdriver

36. node.jsのライブラリ
• WebDriverJS(公式)
• jwebdriver
• webdriver.js
• wurnout
• wd
http://www.slideshare.net/ssuser3eb8
d69/javascriptwebdriver より

37. Selenium Server/Driver
各ドライバ/Selenium Server のインストール
1. ダウンロードする
http://docs.seleniumhq.org/download/
2. パスの通ったところに実行形式(exeなど)や
jar ファイルを置く
– Selenium Server
– Internet Explorer Driver
– Chrome Driver

38. まとめ
• Selenium
– Webブラウザ自動実行用テストツール
– Apacheライセンス
• Selenium IDE
– Seleniumスクリプト作成用統合環境
– Mozilla Firefoxのアドオン
• Selenium WebDriver
– Webブラウザの自動実行制御

39. おしまい
(^.^)/~~~