【Cypress】親要素の取得(parent、parents)

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

概要

指定した要素の親要素を取得したい。

テンプレート

<div>
    <ul class="my-item">
        <li id="redItem">赤い果物</li>
        <li>いちご</li>
        <li>さくらんぼ</li>
        <li>りんご</li>
    </ul>
</div>

Cypress

まず、redItemの直近の親要素を検索してチェックしてみます。
直近の親要素の取得はparent()を使用します。

describe('サンプル', () => {
    it('テストパターン', () => {
       cy.visit('/')
       cy.get('#redItem')
         .parent()
         .should('have.class', 'my-item')
    })
})

すべての親要素を取得する場合は、
parents()を使用します。
このすべての親要素の中に、bodyとhtmlも
含まれていることに注意してください。

describe('サンプル', () => {
    it('テストパターン', () => {
       cy.visit('/')
       cy.get('#redItem')
         .parents()
         .should('have.length', 4)
    })
})

以上です。