特定のフォームの中にあるフィールド(入力欄)の値が正しいかどうかを確認するステップ。
「フィールド名」フィールドの値が「値」であることとは異なり、このステップは
1つのページに複数のフォームがあり、それぞれのフォームに同じ名前のフィールドがある場合に、フィールドをひとつに絞り込むことができます。
パラメータ
| パラメータ名 |
説明 |
フォーム名 |
<form>タグのid属性、または、<form>タグに含まれるテキストが利用可能。
|
フィールド名 |
id属性・name属性・placeholder属性
<label>タグのテキスト・CSS3セレクターなどが利用可能。
|
入力値 |
期待値する入力値の文字列。 |
内部的な処理順序
このステップは内部的に次の順序で処理が行われます。
- 「フォーム名」で指定した条件に合致する
<form>を探す。
<form>が見つかった場合、その中で「フィールド名」で指定した条件に合致するフィールドを探す。- フィールドが見つかった場合、「入力値」で指定した値と実際の入力値が合致するか確認する。
探索対象のフォーム
このステップが見つけることができる<form>は次の2種類のHTMLです。
<!-- 1. id属性が付いている -->
<form id="フォーム名">...</form>
<!-- 2. フォームの見出しテキストを含む -->
<form>...フォーム名...</form>
例えば、下記のように複数フォームがあるページで、「first_form」フォームの「field」フィールドの値が「value1」であることを実行すると、1つ目のフォームのフィールドの値をチェックします。
1つ目のフォームのid属性がfirst_formなので、これを手がかりにフォームを見つけるわけです。
一方、「2つ目のフォーム」フォームの「field」フィールドの値が「value2」であることという書き方では、2つ目のフォームのフィールドの値をチェックするようになります。
2つ目のフォームが「2つ目のフォーム」というテキストを含んでいるため、これがフォームを見つける手がかりになります。
テスト対象サイトの実装によっては、フォームが見出しテキストを持っています。
テキストは画面に見えるので、テキストでフォームを探す書き方のほうがステップが読みやすくなるメリットがあります。
<form id="first_form">
<div>1つ目のフォーム</div>
入力欄:<input type="text" name="field" value="value1">
</form>
<form id="second_form">
<div>2つ目のフォーム</div>
入力欄:<input type="text" name="field" value="value2">
</form>
探索対象のフィールド
このステップは下記の順番でマッチする要素を探していきます。
<input type="text" id="フィールド名">
<input type="text" name="フィールド名">
<input type="text" placeholder="フィールド名">
<label for="...">フィールド名</label> <input id="..." type="text">
<label>フィールド名 <input type="text"></label>
<input type="password" id="フィールド名">
<input type="password" name="フィールド名">
<input type="password" placeholder="フィールド名">
<label for="...">フィールド名</label> <input id="..." type="password">
<label>フィールド名 <input type="password"></label>
<textarea id="フィールド名"></textarea>
<textarea name="フィールド名"></textarea>
<textarea placeholder="フィールド名"></textarea>
<label for="...">フィールド名</label> <textarea id="..."></textarea>
<label>フィールド名 <textarea type="password"></textarea></label>
<input type="email" id="フィールド名">
<input type="email" name="フィールド名">
<input type="email" placeholder="フィールド名">
<label for="...">フィールド名</label> <input id="..." type="email">
<label>フィールド名 <input type="email"></label>
<input type="tel" id="フィールド名">
<input type="tel" name="フィールド名">
<input type="tel" placeholder="フィールド名">
<label for="...">フィールド名</label> <input id="..." type="tel">
<label>フィールド名 <input type="tel"></label>
<input id="フィールド名">
<input name="フィールド名">
<input placeholder="フィールド名">
<label for="...">フィールド名</label> <input id="...">
<label>フィールド名 <input></label>
以上のフィールドを探した後、何も見つからなければCSS3としてフィールドを探索します。
2つ目のフォームのフィールドの入力値をチェックする例
「http://docs.shouldbee.at/steps/FieldValueInFormShouldBe/」に移動する
「ご登録済み会員ログイン」フォームの「メールアドレス」フィールドに「tanaka@example.com」と入力する
「ご登録済み会員ログイン」フォームの「メールアドレス」フィールドの値が「tanaka@example.com」であること