こんにちは。 本日はCypressメモです。
概要
指定した要素内に含まれる要素を
インデックスを使用して取得したい。
テンプレート
html
<div class="input-area"> <input type="checkbox" class="chkbox" value="1">チェック1 <input type="checkbox" class="chkbox" value="2">チェック2 <input type="checkbox" class="chkbox" value="3">チェック3 </div> <div> <p class="item-title">季節のフルーツ一覧</p> <div> <ul> <li>みかん</li> <li>メロン</li> <li>いちご</li> </ul> </div> </div>
Cypress
以下の2点のチェックを行います。
input-area内のチェックボックスを取得し、
インデックスが0番目のチェックボックスの値をチェックします。
ulタグ内のliタグを取得し、
インデックスが1番めの要素の値をチェックします。
describe('サンプル', () => { it('テストパターン', () => { cy.visit('/') cy.get('.input-area input[type="checkbox"]') .eq(0) .should('have.value', 1) cy.get('ul>li') .eq(1) .contains('メロン') }) })
使用する際は、まず対象の要素をgetで取得します。
そして、eq()の引数にインデックスを指定することで
指定したインデックス番目の要素を取得することができます。
以上です。