【Cypress】要素をループして操作する(each)

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

概要

複数の要素を一括で取得して、
その要素を回して操作やチェックをしたい。

テンプレート

html

<div>
    <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>

Cypress

クラス名がchkboxとなっている要素に対して
クリック動作を実施し、チェックされることを確認する。
合わせて、要素の値のチェックも行う。

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

        let values = [1, 2, 3]
        cy.get('.chkbox').each(($el, index) => {
            cy.wrap($el)
              .click()
              .should('be.checked')
              .should('have.value', values[index])
        })
    })
})

検索する対象の要素をgetで取得し、それに対してeachします。
eachで取得した要素をwrapすることで
その要素に対してcypressコマンドが使用できるようになります。

あとはshouldを使用してチェックを行っています。

以上です。