「第3回Selenium談話会 in Slack」 のまとめ

More than 3 years have passed since last update.


Selenium談話会 in Slackとは


参加方法


前回のまとめ


「第3回Selenium談話会 in Slack」のざっくりとした議事録


  • 日時


    • 2015/06/16(Tue)



  • 参加者


    • 10名程度



  • 今回はSeleniumIDEネタだったので#ideで進めました


    • #general : 連絡事項がある場合に使用するチャンネル

    • #ide : SeleniumIDEを中心とした話題をするチャンネル

    • #webdriver : SeleniumWebdriverを中心とした話題をするチャンネル

    • #appium : appiumを中心とした話題をするチャンネル

    • #random : 雑談用チャンネル




第3回のお題


①SeleniumIDEを使ってみんなでお題のテストを作ってみる

<正常ケース>

1.明日の予約ができる
⇒入力した値が確認画面で正しく表示されていること
<例外ケース>
1.宿泊日が3ヶ月以上先の場合、予約できない
⇒エラーメッセージが「宿泊日には、3ヶ月以内のお日にちのみ指定できます。」と表示される
2.宿泊日が不正(13月とか)、予約できない
⇒エラーメッセージが「宿泊日が間違っています」と表示される
3.不正なデータフォーマットでは予約できない(日付に全角文字を含むなど)
⇒エラーメッセージが「年月日、期間、人数いずれかの値が半角英数の範囲外です」と表示される
4.予約者名が入力されていない
⇒エラーメッセージが「お名前が指定されていません」と表示される


  • どちらのアプリもテストを考慮された見事にIDがふってあるものだったので、ロケーション指定は困りようがないほどでしたw


作ったテストコード(HTML)をSlackにはる方法


  • 入力欄にコードをペーストすると右下に表示される"create snippet"を押下するとスニペットで書くことができるスニペット.png

  • コメントも書ける


アプリ1


  • 極普通な入力フォームなので自動記録だけでもできてしまうレベルなので割愛

  • 個々での違いはロケーション指定がCSSだったり、xpathだったりくらい


CSS VS xpath どちらを使うのがよいか

css_xpath.png


IDEを使ったリリースサイクルネタの話題

質問ですが、IDEを使ってリリースサイクルを回す場合、次の流れになるんでしょうか?

初回:
1. IDEで記録してテストスクリプトを作る
2. できたテストスクリプトをWebDriverにエクスポート
3. WebDriverでIEやChromeを含めてテストする
4. リリース
2回目以降:
1. 仕様変更は、記録し直すのではなく、テキストを更新する
2. 更新したテストスクリプトをWebDriverにエクスポート
3. WebDriverでIEやChromeを含めてテストする
4. リリース


  • 2の時点で エクスポートした言語ベースで更新かなと思います


    • では、Rspecなどに起こしたら、Rspecとしてメンテしてくんですね



  • では初回の記録にしか使わないということなんですね


    • ロケーションを拾い上げる負荷の軽減になるので、その使い方がよいのではと思います



  • ということは初回のテスト作成と、メンテナンスで二回の知識習得が必要になるんですね


    • そうですね。ただ、IDEの場合は記録だけと考えると知識習得はそれほど無いようにも思います




変数化ネタ


  • storeEvalを使った変数定義

<tr>

<td>storeEval</td>
<td>new Date().getFullYear()</td>
<td>reserve_year</td>
</tr>
<tr>
<td>storeEval</td>
<td>new Date().getMonth()+1</td>
<td>reserve_month</td>
</tr>


  • UImapを使う方法


    • ロケーション指定をテストスクリプトから分離するという意味ではwebdriverのpageobjectパターンに似ている

    • スクリプトみてみるとわかりやすくていい



<tr>

<td>getEval</td>
<td>
var map = new UIMap();
map.addElement('reservePage', {
name: 'reserve_year'
, description: 'reserve year'
, locator: "css=#reserve_year"
});
</td>
<td></td>
</tr>
<tr>
<td>type</td>
<td>ui=reservePage::reserve_year()</td>
<td>2014</td>
</tr>


storeCSV


アプリ2


  • 日付がカレンダーになったり、選択項目がセレクトボックスに変わっている

  • 自動記録モードだと再生しても正常に動かないので手を加える必要がある

  • CSSの:contaninsを使って指定した例


    • 「css=.day:contains('30') この書き方ずっと探してたんですよね〜」

    • ⇒ 紹介してよかった^^

    • contaninsはJavascriptのcssライブラリーで定義されていた > http://sizzlejs.com/



<tr>

<td>click</td>
<td>css=.day:contains('30')</td>
<td></td>
</tr>


  • チェックボックスはclickではなくcheckコマンドを使おう


    • 正直挙動は同じに見えるがどう違うのかrspecでエクスポートしてみてみた

    • clickの場合トグルなので、セレクトボックスやチェックボックスはちゃんとcheckやselect使ったほうが良いよと



# clickの場合

@driver.find_element(:css, "#plan_b").click

# checkの場合
if @driver.find_element(:css, "#plan_b").selected?
@driver.find_element(:css, "#plan_b").click
end


  • jQuery系を使われてどうしてもどうにもなら無い場合の力技!!

<tr>

<td>getEval</td>
<td>
selenium.browserbot.findElement('reserve_day').value=storedVars.reserve_day;
</td>
<td></td>
</tr>


②ShouldBeeを利用して同じことを試してみる


  • ShouldBee : http://shouldbee.at/


    • ShouldBeeについては上記サイトを見るだけでわかると思います




  • @reoring さんが用意してくださいました




  • @suin さんが用意してくださいました



  • テスト作成もすごく簡単であることと、事前知識はあまりなくてもかけるところがすばらしい

  • スクショも自動で残してくれるので、用途はたくさんありそうです

  • これをみて考えたことの1つに一個一個ページを手作業で開いて確認していく手動テストがこれ使うとスクショだけみればよくなるので効率がよくなりそう


以下は、時間の都合上持ち越しに・・・


③普段使う機会が少ないコマンドを使ってみる


第4回の企画



~ただの宣伝~


  • 全国のSeleniumer必読

  • Selenium, SauceLabs, Travis, Jenkinsに関するノウハウ書いているのでよかったら参考にしてみてください