【Cypress】要素をフィルターする(filter)

こんにちは。 本日は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内に存在するチェックボックスを
filterを使って抽出し、クリック動作を実施し
チェックがされることを確認します。

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

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

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

eachに関しては、以下の記事を参照ください。

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

以上です。