【Cypress】子要素を取得する(children)

こんにちは。
本日はCypressメモです。

概要

指定の要素の配下にある子要素をまとめて取得したい。

テンプレート

チェックボックスとラジオボタンを複数用意します。

html

<div style="text-align:center;">
    <h1>Cypress Sample</h1>
        <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 class="radio-area">
                <input type="radio" name="radioBtn" id="rdo1" value="1">ラジオ1
                <input type="radio" name="radioBtn" id="rdo2" value="2" checked>ラジオ2
            </div>
        </div>
</div>

Cypress

以下の操作を行う。

• divタグ「input-area」配下のclassが「chkbox」の要素を取得
  • 取得した要素の最初の要素にチェックを行う
• divタグ「radio-area」配下の要素を取得
  • 取得した要素の最初の要素にチェックを行う

describe('サンプル', () => {
    it('テストパターン', () => {
        cy.visit('/')

        cy.get('.input-area').children('.chkbox').first().check()
        cy.get('.radio-area').children().first().check()
    })
})

children()の引数に条件を指定することで
絞り込みを行うこともできます。
上記のサンプルでは、.children('.chkbox')の部分で
classにchkboxが指定されているものを絞り込んでいます。

以上です。