【Cypress】特定の要素の子孫要素から条件に一致する要素を取得する(find)

こんにちは。 本日は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
    <input type="radio" name="radioBtn" class="rdo" value="1">ラジオ1
    <input type="radio" name="radioBtn" class="rdo" value="2" checked>ラジオ2
</div>

Cypress

.input-areaの子孫要素を検索して
チェックボックスを取得します。
取得した要素(チェックボックス)にクリック動作を実施し
チェックがされることを確認します。

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

        cy.get('.input-area')
          .find('input[type="checkbox"]')
          .each(($el) => {
            cy.wrap($el)
              .click()
              .should('be.checked')
          })
    })
})

findはfilterと非常によく似ていますが、検索する対象が異なります。
findは指定した要素の子孫要素が検索対象で、
filterは指定した要素が検索対象となります。

findの使用方法は、find(条件)で一致する要素が取得できます。
上記例では、eachを使用して取得した要素を回しています。

filter、eachの記事は以下を参照ください。

【Cypress】要素をフィルターする(filter) - なんだかGoodVibes

【Cypress】要素をループして操作する(each) - なんだかGoodVibes

以上です。