Robot Framework + Selenium2Libraryで、HTMLフォームまわりをテストする

前回、Robot Framework + Selenium2Libraryで、静的HTMLをテストしてみました。
Robot Framework + Selenium2Libraryで、静的HTMLをテストする - メモ的な思考的な

　
今回は、Robot Framework + Selenium2Libraryで、HTMLフォームまわりをテストしてみます。

　
2017/9/2追記

Selenium2Libraryですが、バージョン3からは SeleniumLibrary へと名称が変更されています。詳しくはこちらに書きました。
RobotFrameworkのSelenium2Libraryの名前が、SeleniumLibraryへと変更されてた - メモ的な思考的な

なお、本文はSelenium2Libraryのままにしてあります。

2017/9/2追記ここまで

環境
フォームの送信ボタンを押す場合
- フォームの送信ボタンをクリックする
- フォームの送信ボタンに対してEnterキーを押す
リンクをクリックする
- Click Element
- Click Link
type=textなinput要素に値を入力する
type=passwordなinput要素に値を入力する
ラジオボタンを選択する
単一値のみ選択可能なSelect要素の選択と検証
複数選択可能なSelectに含まれるOptionの選択と検証
チェックボックスの選択と確認
テキストエリアの入力と検証
type=hiddenなinput要素のvalue属性を取得する
ソースコード

環境

Mac OS X 10.11.6
Python 3.6.2
Google Chrome 60.0.3112.78 (stable)
ChromeDriver 2.31 (stable)
RobotFramework 3.0.2
Selenium2Library 1.8.1dev1
- GitHubから現在の最新版をインストール
- PyPIにある1.8.0では、Python3系だとエラーが出てインストールできない
Selenium 3.4.3
Bottle 0.12.13
- Webアプリ用

フォームの送信ボタンを押す場合

こんな感じでフォームの送信ボタンがあるとします。

<form id="id_form" action="/form" method="POST">
    <input id="id_submit" type="submit">
</form>

この送信ボタンを押す方法を考えてみます。

フォームの送信ボタンをクリックする

Click Buttonを使って、フォームの送信ボタンをクリックします。
Click Button | Selenium2Library

click button  id=id_submit

フォームの送信ボタンに対してEnterキーを押す

Press Keyを使って、フォームの送信ボタンに対してEnterキーを押すこともできます。

なお、Enterキーのコードは \\13 となります。

press key  id=id_submit  \\13

リンクをクリックする

フォームとは関係ないような気もしますが、画面遷移になるので、ここに記載します。

このようなリンクがあるとします。

<a id="back_to_top" href="/">トップへ戻る</a>

この時のリンクのクリック方法を考えます。

Click Element

Click Elementでリンクをクリックします。
Click Element | Selenium2Library

click element  id=back_to_top

Click Link

Click Linkでもリンクをクリックできます。
Click Link | Selenium2Library

click link  id=back_to_top

type=textなinput要素に値を入力する

<input type="text" id="id_subject" name="subject">

というHTMLの場合、

input text  id=id_subject  件名です

とすると、input要素に件名ですが入力されます。

type=passwordなinput要素に値を入力する

<input type="password" id="id_password" name="aikotoba">

というHTMLの場合、

input password  id=id_password  パスワードです

とすると、input要素にパスワードですが入力されます。

ラジオボタンを選択する

<p>
    <label for="id_apple">リンゴ</label>
    <input id="id_apple" type="radio" name="fruit" value="りんご">
    <label for="id_mandarin">ミカン</label>
    <input id="id_mandarin" type="radio" name="fruit" value="みかん">
    <label for="id_grape">ブドウ</label>
    <input id="id_grape" type="radio" name="fruit" value="ぶどう">
</p>
<p>
    <label for="id_big">大</label>
    <input id="id_big" type="radio" name="fruit_size" value="大きいもの">
    <label for="id_small">小</label>
    <input id="id_small" type="radio" name="fruit_size" value="小さいもの">
</p>

という2つのラジオボタングループがあった場合に、正しいラジオボタンを選択する方法を考えます。

Select Radio Button

Select Radio Buttonキーワードを使います。
Select Radio Button | Selenium2Library

select radio button  fruit  りんご

とすると、name=fruitなラジオボタングループのうち、value=“りんご"なラジオボタンを選択します。

Click Element

Click Elementキーワードでも選択できます。

click element  id=id_small

ラジオボタンの選択確認

ラジオボタンの選択確認はRadio Button Should Be Set Toキーワードを使います。
Radio Button Should Be Set To | Selenium2Library

radio button should be set to  fruit  りんご

単一値のみ選択可能なSelect要素の選択と検証

<p>
    <label for="id_quantity">個数</label>
    <select id="id_quantity" name="quantity">
        <option id="id_selected1_1" name="select1_1" value="1個">1</option>
        <option id="id_selected1_2" name="select1_2" value="2個">2</option>
        <option id="id_selected1_3" name="select1_3" value="3個">3</option>
    </select>
</p>

という、単一値のみ選択可能なSelect要素での選択と検証について考えます。

ラベルで選択する

ラベルとは、

<option>ここ</option>

でのここの値を指します。

　
ラベルの場合、Select From List By Labelを使います。
Select From List By Label | Selenium2Library

select from list by label  id=id_quantity  2

valueで選択する

option要素のvalue属性の値で選択する場合、Select From List By Valueを使います。
Select From List By Value | Selenium2Library

select from list by value  id=id_quantity  3個

indexで選択する

option要素のindexで選択する場合、Select From List By Indexを使います。
Select From List By Index | Selenium2Library

なお、indexは0始まりになります。

select from list by index  id=id_quantity  0

選択されているoption要素をラベルやvalue属性で確認する

List Selection Should Beを使います。
List Selection Should Be | Selenium2Library

なお、第二引数には、ラベルとvalue属性の値のどちらかを指定します。

# ラベル
list selection should be  id=id_quantity  2

# value属性
list selection should be  id=id_quantity  2個

選択したラベルを取得する

Get Selected List Labelを使います。
Get Selected List Label | Selenium2Library

以下の例では、一度変数に入れた後、内容を検証しています。

${選択ラベル} =  get selected list label  id=id_quantity
should be equal  ${選択ラベル}  3

選択したvalue属性を取得する

Get Selected List Valueを使います。
Get Selected List Value | Selenium2Library

こちらも、一度変数に入れて内容を検証する例になります。

${選択値} =  get selected list value  id=id_quantity
should be equal  ${選択値}  3個

Selectに含まれるOptionの件数を調べる

Optionの件数が動的に変わる場合、その件数を調べたくなるかもしれません。

その場合、2つの方法にて検証できます。
selenium webdriver - Check whether SelectBox has items, Robot-Framework, Selenium2Library - Stack Overflow

Get List ItemsとGet Lengthを組み合わせる

を組み合わせて検証します。

なお、Get List Itemsの戻り値はリスト型である一方、Get Lengthの引数はスカラ変数をとるため、波括弧の前を@から$へと切り替えます。

@{items} =  get list items  id=id_quantity
${list_length} =  get length  ${items}
should be equal as integers  ${list_length}  3

Get Matching Xpath Countを使う

XPathでの検索となりますが、Get Matching Xpath Countも使えます。
Get Matching Xpath Count | Selenium2Library

${list_count} =  get matching xpath count  //select[@id="id_quantity"]/option
should be equal as integers  ${list_count}  3

複数選択可能なSelectに含まれるOptionの選択と検証

<p>
    <label for="id_accessories">付属品</label>
    <select id="id_accessories" name="accessories" multiple>
        <option id="id_selected2_1" name="select2_1" value="paper">紙</option>
        <option id="id_selected2_2" name="select2_2" value="box">容器</option>
        <option id="id_selected2_3" name="select2_3" value="rope">ロープ</option>
    </select>
</p>

という、複数選択可能なSelect要素独特の選択と検証について考えます。

全選択する

Select All From Listを使います。
Select All From List | Selenium2Library

select all from list  id=id_accessories

選択をやめる

Unselect From ListやUnselect From List By [Index/Lable/Value]を使います。

なお、Unselect From Listに It's faster to use 'by index/value/label' functions. とある通り、by系の方が速いようです。

unselect from list  id=id_accessories

何も選択されていないことを確認する

List Should Have No Selectionsを使います。
List Should Have No Selections | Selenium2Library

list should have no selections  id=id_accessories

チェックボックスの選択と確認

<p>
    <label for="id_takeout">持ち帰る</label>
    <input type="checkbox" id="id_takeout" name="takeout" value="自分で持ち帰る">
</p>

というチェックボックスのチェックと検証について考えます。

チェックボックスをチェックする

Select Checkboxを使います。
Select Checkbox | Selenium2Library

select checkbox  id=id_takeout

チェックボックスのチェックをやめる

Unselect Checkboxを使います。
Unselect Checkbox | Selenium2Library

unselect checkbox  id=id_takeout

チェックボックスがチェックされているか検証する

Checkbox Should Be Selectedを使います。
Checkbox Should Be Selected | Selenium2Library

checkbox should be selected  id=id_takeout

なお、否定形のCheckbox Should Not Be Selectedもあります。

テキストエリアの入力と検証

<textarea id="id_memo" name="memo"></textarea>

というテキストエリアの入力と検証を考えます。

テキストエリアに入力する

input type=textと同じく、Input Textを使います。

input text  id=id_memo  テキストエリアです

入力文字のクリア

こちらもinput type=textと同じく、Clear Element Textを使います。

clear element text  id=id_memo

テキストエリアの検証

完全一致

Textarea Value Should Beを使います。
Textarea Value Should Be | Selenium2Library

textarea value should be  id=id_memo  テキストエリアです

部分一致

Textarea Should Containを使います。
Textarea Should Contain | Selenium2Library

textarea should contain  id=id_memo  エリア

type=hiddenなinput要素のvalue属性を取得する

<input type="hidden" id="id_hidden_value" class="hidden_class" name="hidden_value" value="隠しデータ">

という、type="hidden"なinput要素があるとします。

Get Element Attributeを使うことで、hiddenなinput要素であってもvalue属性を取得できます。
Get Element Attribute | Selenium2Library

なお、<locator>@<対象の属性>のように書きます。

${hidden_value1} =  get element attribute  id_hidden_value@value

# 検証
should be equal  ${hidden_value1}  隠しデータ

ソースコード

GitHubに上げました。tests/の中にあるselenium_form_test.robotファイルが今回のテストファイルです。
thinkAmi-sandbox/RobotFramework-sample