【Cypress】要素の次・前を取得する(next, prev)

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

概要

特定の要素の次の要素、
もしくは前の要素を取得したい。

テンプレート

<ul>
    <li>みかん</li>
    <li class="active">レモン</li>
    <li>メロン</li>
    <li>スイカ</li>
    <li>いちご</li>
    <li>りんご</li>
</ul>

Cypress

activeクラスが設定された要素の前と次を取得します。
次の要素を取得する場合は、.next()を使用します。
前の要素を取得する場合は、.prev()を使用します。

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

        cy.get('.active')
          .next()
          .contains('メロン')

        cy.get('.active')
          .prev()
          .contains('みかん')
    })
})

メロンの次の要素を調べたいので、asと組み合わせてみます。

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

        cy.get('.active').next().as('target')
        cy.get('@target')
          .next()
          .contains('スイカ')
    })
})

activeクラスの次の次の要素が取得できました。
asについては以下の記事を参照してください。

【Cypress】取得した要素にエイリアスを設定する(as) - なんだかGoodVibes

以上です。