Cypressで親要素を取得する方法


  1. parent()メソッドを使用する方法: Cypressでは、parent()メソッドを使用して要素の親要素を取得することができます。以下はサンプルコードです。

    cy.get('.child-element').parent().should('have.class', 'parent-element');

    この例では、.child-elementというクラスを持つ要素の親要素である.parent-elementというクラスを持つ要素を検証しています。

  2. closest()メソッドを使用する方法: もう一つの方法は、closest()メソッドを使用する方法です。closest()メソッドは、指定したセレクタに一致する最も近い親要素を取得します。以下はサンプルコードです。

    cy.get('.child-element').closest('.parent-element').should('have.class', 'parent-element');

    この例では、.child-elementというクラスを持つ要素の最も近い.parent-elementというクラスを持つ親要素を検証しています。

  3. parents()メソッドを使用する方法: parents()メソッドを使用すると、要素のすべての親要素を取得することができます。以下はサンプルコードです。

    cy.get('.child-element').parents('.parent-element').should('have.length', 2);

    この例では、.child-elementというクラスを持つ要素の親要素である.parent-elementというクラスを持つ要素をすべて取得しています。.should('have.length', 2)は、取得した要素数が2であることを検証しています。

これらの方法を使用すると、Cypressを使用して要素の親要素を取得することができます。テスト自動化において、要素の親要素を操作する必要がある場合には、これらの方法が役立つでしょう。