Selenium 再入門

5/7/2018 Selenium �� - slidepdf.com

http://slidepdf.com/reader/full/selenium--559aba95a2a23 1/102

Selenium再入門

日本PHPユーザ会

鈴木則夫



自己紹介

•日本

PHPユーザ会に所属

• 鈴木則夫

• twitter.com/suzuki



自己紹介

• 日本PHPユーザ会とSelenium

• 特に関係ありません :-)



自己紹介

• 自社Webアプリケーションの開発・運用

• 品質管理部署を立ち上げたは良いが

• テストの専門家ではない

• Seleniumの専門家でもない



この発表の対象者Selenium-IDEを知って、すげーと思って、自分の操作

を記録して再生したら、あれ？うまくいかないぞ？

でも今は調べている時間がないから、後で時間が

あったら使ってみようと思ってそのままになっている人



アジェンダ

Seleniumの紹介

Selenium-IDEでの壁

Selenium-IDEの先へ



ソフトウェアライフサイクル

• ソフトウェアはリリースして終わり？



特にWebサービスにおいては

リリース

リリース

リリース



変わらないことが大切

• ソフトウェアの成長で必要なこと

• 変えたいところを変える

• その他のところは変わらない（変えない）



Seleniumとは

Webアプリケーションのテスト自動化



自動化が有効

• Seleniumの公式ドキュメントによると

• 頻繁なレグレッションテスト

• 開発期間内での素早いフィードバック



自動化はいつも正しい？

• いつも自動化が正しいとは限らない

• 時間がなかったり

• UIの大きな変更が予定されていたり



Selenium-IDE



Selenium-IDEでの壁

• Selenium-IDEで記録→再生

• あれ？うまくいかない



http://croogo.org/



http://twitter.com/fahad19

http://twitter.com/makies

Croogoの作者

Croogoの日本語リソース作成









テストシナリオ

• テストのシナリオ

• ログイン

• blogを追加

• blogを更新

• blogを削除



シナリオ：ログイン操作

ログイン画面を表示

Username・Passwordを入力

Log Inをクリック



シナリオ：ログイン検証

“You are logged in as Admin”

が表示されているか？



シナリオ：blog追加操作

Blog入力画面へ移動

タイトル・Slug・Bodyを入力

Submitで保存



シナリオ：blog追加検証

“Blog has been saved”の

メッセージが表示されて

いるか？

入力したタイトルが表示

されているか？



シナリオ：blog編集操作

編集画面に入る

公開済タブへ移動

公開済／トップページに

表示するをクリック

Submitで保存



シナリオ：blog編集検証



いるか？

公開画面にBlog記事が表

示されているか？



シナリオ：blog削除操作

削除リンクをクリックし、

Blog記事を削除する



シナリオ：blog削除検証

ノード削除と表示される


されていないか？



Demo

• Selenium-IDEで操作を記録して保存

• ログインとBlog記事の追加を実行



TIPS

• テストケースは小分けに

• ログインとBlog追加で2つに分ける

• 小分けにしても「テストスイート」単位

で実行できる

• テストスイートはメニューから明示的

に保存しないとダメ



用語

• テストケース

• 操作や検証が含まれたひとつの単位

• 操作や検証を<table>で表現

• ひとつのHTMLファイル



用語

• テストスイート

• 複数のテストケースをまとめたもの

• テストケースのHTMLファイルのリン

ク（<a>タグ）を<table>で表現

• これ自身もHTMLファイル



Demo

• 保存したテストスイートの再生



壁：画面遷移に失敗

Click に失敗

人間の操作スピードとマシ

ンの操作スピードに違い

ClickAndWaitに変更



壁：Bodyに値が入らない

Bodyにも入力したはず

なのに...




Firebugで対象を確認

<iframe id=”NodeBody_ifr”>

<html>

<head>

<body id=”tinymce”>




• Body入力部はテキストエリアではない

• <iframe>によるインラインフレーム

• その<body>内に入力する形式




• typeコマンドでは入力できない

• JavaScriptで無理やり対応する...




getEvalコマンドで

JavaScriptの実行が可能

「対象」にコードを記述




• Firebugのコンソールで動作確認

document

.getElementById('NodeBody_ifr').contentWindow

.document

.getElementById('tinymce').innerHTML = 'こんにちは';







• Seleniumで実行するにはもう少し工夫

this.page().getDocument()

.getElementById('NodeBody_ifr').contentWindow

.document

.getElementById('tinymce').innerHTML = 'こんにちは';




これでBody

へ入力できるようになった

だいぶ無理矢理な感じはあるが...



時間の都合で

• 編集／削除は事前に用意したテスト

ケースを利用します

• ログイン、Blogの追加、編集、削除の

一連の流れが完成



検証の追加

• ここまで作ってきたのは「操作」

•テストスイート全体の実行が失敗せず

終了すればOKではあるが...

• もう一歩進めるために、個々のテスト

ケースに検証を追加する



検証を追加する前に

• 新規入力する「タイトル」や「Body」

の内容を変数に代入する

• その変数を使って、検証をする



変数の利用

• 「対象」と「値」の関係がわかりにくい...

• 「値」が変数名、「対象」が代入する値

グ



シナリオ：ログイン検証

“You are logged in as Admin”

が表示されているか？

グ検証



ログイン検証

• assertTextPresent

• 「対象」の文字列が存在するか？を検証

リオ追加検証



シナリオ：blog追加検証



いるか？


されているか？

追加検証



blog追加検証

• verifyTextPresent :失敗しても停止しない

• ${blog_title} : storeした変数の記述方法

ナリオ編集検証



シナリオ：blog編集検証



いるか？

公開画面にBlog記事が表

示されているか？

編集検証



blog編集検証

• 「Webサイトを見る」のリンクをクリック

• ${blog_title} / ${blog_body}の存在確認

シナリオ削除検証



シナリオ：blog削除検証

ノード削除と表示される


されていないか？

削除検証



blog削除検証

• assertTextNotPresent :テキストが存在しない

検証のまとめ



検証のまとめ

• assertTextPresent

• verifyTextPresent

• テキストが存在すれば成功

• assertTextNotPresent

• verifyTextNotPresent

• テキストが存在しなければ成功

その他の検証



その他の検証

• assertChecked

• チェックボックス／ラジオボタンが

チェックされているか？

• assertElementPresent

• 要素が存在するかどうか？

その他の検証



その他の検証

• assertTitle

• <title>※</title>が期待値かどうか？

• assertValue

• value=”※”が期待値かどうか？

その他の検証



その他の検証

• assertCookieByName

• 指定の名前のCookieが期待値か？

• assertMouseSpeed

• mousemoveスピードが期待値か？

DEMO



DEMO

• 検証まで含めたテストスイートを

実行してみる

壁：違う場所の「編集」を



壁：違う場所の「編集」を

「編集」リンクが

並んだときどうする？

自動生成のテストケースでは



自動生成のテストケースでは

要素の指定方法




• 「link=編集」は<a>編集</a>のこと

• 他にも指定方法がある

• id=⃝⃝ / name=⃝⃝ / css=⃝⃝





• DOM

• dom=⃝⃝

• XPath

• xpath=//input[@value='Submit']

他の「編集」をクリックしたい



他の編集」をクリックしたい

link=編集

では、こちらはクリックできない！

リンク先をよく見ると



リンク先をよく見ると

<a href=”/croogo/admin/nodes/edit/27”>

<a href=”/croogo/admin/nodes/edit/21”><a href=”/croogo/admin/nodes/edit/20”>



IDさえ取得できれば

なんとかなりそう

指定タイトルのIDを取得




• 取得方法

• コンテンツ一覧のテーブルを特定

• 指定タイトルの行を特定

• 行のID列から値を取得





• 他のテストケースでも使えるように、

ユーザ拡張として作成してみる

ユーザ拡張



ユザ拡張

• user-extentions.js

• 独自の JavaScriptが追加できる





• 取得方法

• コンテンツ一覧のテーブルを特定

• 指定タイトルの行を特定

• 行のID列から値を取得



実装（前半）



実装（前半）

function getIdFromContentTitle(title) {

var id = 0;

var doc = selenium.page().getDocument();var form = doc.getElementById('NodeAddForm');

var table = form.getElementsByTagName('table');

var tbody = table[0].getElementsByTagName('tbody');

var tr = tbody[0].getElementsByTagName('tr');

実装（後半）



実装（後半）

for (y = 1; y < tr.length; ++y) {

var td = tr[y].getElementsByTagName('td');

var text = td[2].getElementsByTagName('a')[0].innerHTML;

if (text == title) {id = td[1].innerHTML;

break;

}

}

return id;

}

ユーザ拡張の利用



ザ拡張利用

ユーザ拡張の利用



ザ拡張利用

echoはログに書き出すコマンド

user-extentionsのポイント



function getIdFromContentTitle(title) {

var id = 0;

var doc = selenium .page().getDocument();var form = doc.getElementById('NodeAddForm');

var table = form.getElementsByTagName('table');

var tbody = table[0].getElementsByTagName('tbody');

var tr = tbody[0].getElementsByTagName('tr');

user-extentionsのポイント



var doc = selenium .page().getDocument();



this.page().getDocument()

ユーザ拡張

selenium.page().getDocument()

selenium内部

どちらもテスト対象の

documentを指し示す

XPath



• //input[@value=”Submit”]

• valueに「Submit」という値を持つ

<input>の意味

XPathの探し方



• Firebugの要素の調査機能を使う

• XPathを調べたい要素をクリック

XPathの探し方



• FirebugがHTMLソースのポイントを特

定してくれるので、そこで右クリック

XPathの探し方



• XPathをコピー

XPathの探し方



• コンソール等に貼りつけると

XPathが分かる

XPathの探し方



• コンソール等に貼りつけると

XPathが分かる

• //input[@value=”Submit”]と違う？

• 絶対パスと相対パスの違いに似ている

XPathの探し方



• XPathが正しいかどうかもFirebugで検証可能

• $x(“ XPath “)

XPathの探し方



• コンソールの「実行」をクリック

• 左側のウインドウに結果が表示される

XPathの探し方



• 結果をクリックするとその要素が強調される

Selenium-IDEの先へ



• エクスポート機能でSelenium-RCへ

• プログラミング言語で実行することに

より「繰り返し処理」の記述が楽に

エクスポートの罠



• すべてのテストケースを「正しく」

プログラミング言語へエクスポートで

きるわけではなさそう

PHP用にエクスポート



function testMyTestCase() {

// 変数定義

blog_title = "こんにちは、北海道";

blog_slug = "hellow_hokkaido";

blog_body = "北海道の冬は寒いのでしょうか？

";}

エクスポートの書式変更



• Selenium-IDEの設定変更すれば可能

• オプション→設定...→フォーマット

• PHP→ソース

• オリジナルのソースは編集不可

• コピーして別名で保存

実際のコード



• ごめんなさい、まだ勉強中です :-)

Selenium AES



• Selenium Auto Exec Server• http://www.enjoyxstudy.com/selenium/autoexec/

Selenium AES



• テストスイートを毎日定時実行

• 実行結果をメールで報告

• Subversionと連携

• 最新のソースをリポジトリから落とし、

テスト実行が可能

まとめ



• Seleniumは非常に強力なツール

• 「変わらないこと」のチェックが

安心につながる

• 積極的に使っていきましょう

• そして私にも情報をください :-)

まとめ





表紙には目立つように書か

れていないがSeleniumの章

がある

参考サイト



• Seleniumリファレンスガイド（日本語版）

http://wiki.openqa.org/display/SEL/Selenium+0.7+Reference+(Japanese)

• Selenium中級者になろう

（変数＋XPath＋ JavaScriptを，テストケース中で利用する方法）

http://d.hatena.ne.jp/language_and_engineering/20090818

• その他多数のサイトを参考にさせて頂きました

Photograph Credits



• 表紙

http://www.flickr.com/photos/jonbro/3356460039/

• 対象者http://www.flickr.com/photos/elvire-r/2451784799/

• アジェンダ

http://www.flickr.com/photos/citycaucus/4260121599/

Photograph Credits



• サボテン

http://www.flickr.com/photos/racatumba/88846892/http://www.flickr.com/photos/laszlo-photo/286757494/

• JEDIhttp://www.flickr.com/photos/ggunter/539625103/

謝辞



• ご清聴ありがとうございました

Documents

Selenium 再入門