【Cypress】要素の後ろ・前のすべてを取得する(nextAll, prevAll)

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

概要

特定の要素の後ろもしくは前に存在する
すべての要素を取得したい。

テンプレート

<ul>
    <li class="red-item">りんご</li>
    <li>みかん</li>
    <li class="active">レモン</li>
    <li>メロン</li>
    <li>スイカ</li>
    <li class="red-item">いちご</li>
    <li class="red-item">さくらんぼ</li>
</ul>

Cypress

activeクラスが指定されている要素を起点とし、
後ろと前に存在するred-itemクラスが指定された要素を取得します。

今回は、取得した要素の数をチェックしています。

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

        cy.get('.active')
          .nextAll('.red-item')
          .its('length')
          .should('eq', 2)

        cy.get('.active')
          .prevAll('.red-item')
          .its('length')
          .should('eq', 1)
    })
})

以上です。