Cypress Commands で closest を使う

Cypress Commands で closest を使う

使い方

cy.get('selector').closest('parent-selector')

この例では、selector で指定された要素とその最も近い parent-selector 要素を見つけます。

例

以下の例では、#button 要素とその最も近い .container 要素を見つけます。

cy.get('#button')
  .closest('.container')
  .should('have.class', 'active');

このテストは、#button 要素が .container 要素内にあり、その .container 要素に active クラスが存在することを確認します。

closest の利点

• 特定の条件に一致する親要素を簡単に検索できます。
• 複雑な CSS セレクターを避けることができます。
• テストコードをより読みやすく、メンテナンスしやすくなります。

• closest は、要素が存在しない場合は null を返します。
• closest は、複数の要素を返すことができます。
• closest は、jQuery の closest() メソッドに似ています。

---

cy.get('#button')
  .closest('.container')
  .should('have.class', 'active');

説明:

• cy.get('#button') で #button 要素を取得します。
• closest('.container') で、#button 要素とその最も近い .container 要素を見つけます。
• should('have.class', 'active') で、#button 要素とその最も近い .container 要素に active クラスが存在することを確認します。

cy.get('#input')
  .closest('[data-testid="form"]')
  .should('have.attribute', 'data-testid', 'form');

• cy.get('#input') で #input 要素を取得します。
• closest('[data-testid="form"]') で、#input 要素とその最も近い [data-testid="form"] 属性を持つ親要素を見つけます。
• should('have.attribute', 'data-testid', 'form') で、#input 要素とその最も近い親要素に data-testid 属性が存在し、その値が "form" であることを確認します。

cy.get('.item')
  .closest('ul')
  .should('contain', 'item 1');

• cy.get('.item') で .item クラスを持つ要素を取得します。
• closest('ul') で、.item 要素とその最も近い ul 要素を見つけます。
• should('contain', 'item 1') で、#input 要素とその最も近い親要素に "item 1" というテキストが含まれていることを確認します。

---

parentsUntil コマンドは、指定したセレクターに一致する親要素まで要素を遡り、その途中で別のセレクターに一致する要素があればそこで停止します。

cy.get('#button')
  .parentsUntil('.form')
  .should('have.class', 'active');

この例では、#button 要素とその最も近い .form 要素までの親要素をすべて調べ、その途中で .active クラスを持つ要素があればそこで停止します。

filter コマンド

filter コマンドは、要素の集合をフィルタリングし、特定の条件に一致する要素のみを返します。

cy.get('.item')
  .filter(function(el) {
    return el.closest('ul').hasClass('active');
  })
  .should('have.length', 2);

この例では、.item クラスを持つすべての要素を調べ、その最も近い ul 要素が .active クラスを持っている場合はその要素のみを返します。

jQuery カスタムコマンド

Cypress では、jQuery カスタムコマンドを作成して、独自の DOM 操作ロジックを実装することができます。

Cypress.Commands.add('findClosestActiveParent', (selector) => {
  return cy.get(selector)
    .parents()
    .filter(function(el) {
      return $(el).hasClass('active');
    })
    .first();
});

cy.get('#button')
  .findClosestActiveParent()
  .should('have.class', 'container');

この例では、findClosestActiveParent という名前の jQuery カスタムコマンドを作成し、要素とその最も近い .active クラスを持つ親要素を見つけるようにしています。

どの代替方法を使うべきか

使用する代替方法は、テストの要件によって異なります。

• 特定のセレクターに一致する親要素まで要素を遡りたい場合は、parentsUntil コマンドが適しています。
• 特定の条件に一致する要素のみを見つけたい場合は、filter コマンドが適しています。
• より複雑なロジックが必要な場合は、jQuery カスタムコマンドが適しています。

• 上記以外にも、closest の代替となる方法はいくつかあります。
• 最適な方法は、テストの要件と開発者の好みによって異なります。