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

# Selenium談話会 in Slackとは
* 私、@oh_rusty_nail が主催しているSlackを使ったオンライン勉強会です
 * https://seleniumjp.slack.com
 * 地方に住んでいて勉強会に行くのも遠征しないときびしい！といった方には特におすすめです
* 月１回程度の頻度で計画しています
* [日本Seleniumユーザーコミュニティ](https://groups.google.com/forum/#!forum/seleniumjp)で開催の案内を出しています
* 2015/06/19現在の登録ユーザ数：35名

# 参加方法
* 以下どれからも可能です
 1. https://seleniumjp.herokuapp.com から登録してください
 1. TwitterID: @oh_rusty_nail をフォロー後にDMで受信可能なメールアドレスをお知らせください
 1. takonoyawarakaage@gmail.com宛に受信可能なメールアドレスをお知らせください

# 前回のまとめ
* [「第１回Selenium談話会 in Slack」 のまとめ](http://qiita.com/oh_rusty_nail/items/21e0014c40853571c87b)
* 開催日時：　2015/04/22(Wed) 21:00～
* [「第２回Selenium談話会 in Slack」 のまとめ](http://qiita.com/oh_rusty_nail/items/ccf40fe2d3381ad0ce4f)
* 開催日時：　2015/05/13(Wed) 21:00～

# 「第３回Selenium談話会 in Slack」のざっくりとした議事録
* 日時
 * 2015/06/16(Tue)
* 参加者
 * 10名程度
* 今回はSeleniumIDEネタだったので#ideで進めました
 * #general　：　連絡事項がある場合に使用するチャンネル
 * #ide　：　SeleniumIDEを中心とした話題をするチャンネル
 * #webdriver　：　SeleniumWebdriverを中心とした話題をするチャンネル
 * #appium　：　appiumを中心とした話題をするチャンネル
 * #random　：　雑談用チャンネル

# 第３回のお題
## ①SeleniumIDEを使ってみんなでお題のテストを作ってみる
* アプリ１とアプリ２でそれぞれテストを作ってみる
 * アプリ１：http://example.selenium.jp/reserveApp/
 * アプリ２：http://example.selenium.jp/reserveApp_Renewal (アプリ１のUI変更版)
* テスト内容は以下

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

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

### 作ったテストコード(HTML)をSlackにはる方法
 * 入力欄にコードをペーストすると右下に表示される"create snippet"を押下するとスニペットで書くことができる![スニペット.png](https://qiita-image-store.s3.amazonaws.com/0/19778/5f7e45cc-a528-df44-3fa4-707a8bea358e.png)
 * コメントも書ける

### [アプリ１](http://example.selenium.jp/reserveApp/)
* 極普通な入力フォームなので自動記録だけでもできてしまうレベルなので割愛
* 個々での違いはロケーション指定がCSSだったり、xpathだったりくらい

### CSS VS xpath どちらを使うのがよいか
![css_xpath.png](https://qiita-image-store.s3.amazonaws.com/0/19778/dd398152-fd31-8717-6c63-914b48ed158a.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を使った変数定義

```html
<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パターンに似ている
 * スクリプトみてみるとわかりやすくていい

```html
<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
* http://wkbd.ickx.jp/se/

### [アプリ２](http://example.selenium.jp/reserveApp_Renewal)
* 日付がカレンダーになったり、選択項目がセレクトボックスに変わっている
* 自動記録モードだと再生しても正常に動かないので手を加える必要がある
* CSSの:contaninsを使って指定した例
 * 「css=.day:contains('30')　この書き方ずっと探してたんですよね〜」
 * ⇒ 紹介してよかった^^
 * contaninsはJavascriptのcssライブラリーで定義されていた > http://sizzlejs.com/

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

* チェックボックスはclickではなくcheckコマンドを使おう
 * 正直挙動は同じに見えるがどう違うのかrspecでエクスポートしてみてみた
 * clickの場合トグルなので、セレクトボックスやチェックボックスはちゃんとcheckやselect使ったほうが良いよと

```rb
# 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系を使われてどうしてもどうにもなら無い場合の力技！！

```html
<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 さんが用意してくださいました
 * http://qiita.com/reoring/items/7b27b2deb6e7074b9d21
* @suin さんが用意してくださいました
 * https://www.youtube.com/watch?v=SCL5XBZURvQ&feature=youtu.be
* テスト作成もすごく簡単であることと、事前知識はあまりなくてもかけるところがすばらしい
* スクショも自動で残してくれるので、用途はたくさんありそうです
* これをみて考えたことの１つに一個一個ページを手作業で開いて確認していく手動テストがこれ使うとスクショだけみればよくなるので効率がよくなりそう

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

## ③普段使う機会が少ないコマンドを使ってみる
* [selenium IDE で使ったことがないコマンドを洗い出してみる](http://qiita.com/gluelan2013/items/0f69ca4d74286c966816)であがっているコマンドを使ってみる
* マウスイベント系もあまり使われていなさそう
* この使ったことないコマンドを次回みんなでさわってみるのも面白そう

## 第4回の企画
* 月１ペースで何かをやろうと思っています
* 開催案内はSlackでの案内だけでなく、[日本Seleniumユーザーコミュニティ](https://groups.google.com/forum/#!forum/seleniumjp)のページにも投稿しています

----

# ～ただの宣伝～
* [全国のSeleniumer必読](http://qiita.com/oh_rusty_nail/items/b8ba525d31ea7c522856)
* Selenium, SauceLabs, Travis, Jenkinsに関するノウハウ書いているのでよかったら参考にしてみてください