【Cypress】特定の範囲の後ろ・前の要素を取得する(nextUntil, prevUntil)

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

概要

特定の要素から指定した条件までの範囲に含まれる要素を取得したい。
このとき、検索の方向は後ろ、または前とする。

テンプレート

<ul>
    <li id="redItem">赤い果物</li>
    <li>いちご</li>
    <li>さくらんぼ</li>
    <li>りんご</li>
    <li id="yellowItem">黄色い果物</li>
    <li>みかん</li>
    <li>レモン</li>
    <li id="greenItem">緑の果物</li>
    <li>メロン</li>
</ul>

Cypress

1つ目の検索条件は

• idがyellowItemの要素から後ろ方向に検索して idがgreenItemまでの要素

2つ目の検索条件は

• idがyellowItemの要素から前方向に検索して idがredItemまでの要素

以下は、上記条件で取得した要素の数が正しいかチェックしています。

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

       cy.get('#yellowItem')
          .nextUntil('#greenItem')
          .its('length')
          .should('eq', 2)

        cy.get('#yellowItem')
          .prevUntil('#redItem')
          .its('length')
          .should('eq', 3)
    })
})

以上です。