Cypress: テスト対象の真実を明らかに！ 'not' コマンドで詳細な検証シナリオ

Cypressのコマンドの中で、「not」は、要素が存在しないことや、特定の条件を満たしていないことを検証するために使用されます。アサーションと組み合わせて、テスト対象のアプリケーションの動作をより詳細に確認することができます。

使い方

「not」は、要素を取得するコマンド（例：cy.get(), cy.find()) に対してチェーン形式で記述します。以下の例のように、should() アサーションと組み合わせて使用することで、要素が存在しないことを検証できます。

cy.get('#my-element').should('not.exist');

この例では、#my-element IDを持つ要素が存在しないことを検証します。要素が存在する場合、テストは失敗します。

応用例

「not」は、様々な検証シナリオで使用することができます。以下に、いくつかの例を紹介します。

ボタンが無効化されていることを確認する
入力欄に値が入力されていないことを確認する
特定のクラスを持つ要素が存在しないことを確認する
特定の要素が表示されていないことを確認する

注意点

「not」は、要素が存在しない場合でも、タイムアウトが発生するまで待機します。タイムアウト値は、Cypressの設定で変更できます。
「not」は、非同期処理を含むコマンドに対しては使用できません。
「not」は、要素が存在しないことを検証するものであり、要素の属性や値を検証するものではありません。

「not」の詳細については、Cypressの公式ドキュメントを参照してください。

Cypressには、要素が存在するかどうかを検証する他にも、様々なアサーションコマンドが用意されています。これらのコマンドを活用することで、テスト対象のアプリケーションの動作をより網羅的に検証することができます。
Cypressのコマンドは、基本的に同期的に実行されます。「not」を含むコマンドも例外ではなく、要素が存在しないことが確認されるまで待機してから、次のコマンドが実行されます。

describe('My Test Suite', () => {
  it('should not display the error message', () => {
    cy.visit('/my-page');
    cy.get('.error-message').should('not.exist');
  });
});

この例では、/my-page ページにアクセスし、.error-message クラスを持つ要素が存在しないことを検証します。要素が存在する場合、テストは失敗します。

例2：特定のクラスを持つ要素が存在しないことを確認する

describe('My Test Suite', () => {
  it('should not have the "disabled" class', () => {
    cy.visit('/my-form');
    cy.get('#my-button').should('not.have.class', 'disabled');
  });
});

この例では、/my-form ページにアクセスし、#my-button IDを持つ要素に "disabled" クラスが存在しないことを検証します。クラスが存在する場合、テストは失敗します。

例3：入力欄に値が入力されていないことを確認する

describe('My Test Suite', () => {
  it('should not have any value in the input field', () => {
    cy.visit('/my-form');
    cy.get('#my-input').should('have.value', '');
  });
});

この例では、/my-form ページにアクセスし、#my-input IDを持つ入力欄に値が入力されていないことを検証します。値が入力されている場合、テストは失敗します。

例4：ボタンが無効化されていることを確認する

describe('My Test Suite', () => {
  it('should be disabled', () => {
    cy.visit('/my-form');
    cy.get('#my-button').should('be.disabled');
  });
});

この例では、/my-form ページにアクセスし、#my-button IDを持つボタンが無効化されていることを検証します。ボタンが有効化されている場合、テストは失敗します。

Cypressのコマンドにおける「not」は、要素が存在しないことや、特定の条件を満たしていないことを検証するために使用されます。しかし、「not」以外にも、同様の検証を行う方法があります。ここでは、「not」の代替方法として、以下の3つの方法を紹介します。

negate アサーション

Cypressには、アサーションを否定する negate 関数が用意されています。negate 関数をアサーションコマンドの前に記述することで、「not」と同じ効果を得ることができます。

cy.get('#my-element').should(negate('exist'));

この例は、「not.exist」と同じ意味です。

try/catch ブロック

try/catch ブロックを使用して、要素が存在しないことをキャッチする方法もあります。

try {
  cy.get('#my-element');
} catch (error) {
  // 要素が存在しない場合の処理
}

この例では、#my-element IDを持つ要素が存在しない場合、catch ブロック内の処理が実行されます。

カスタムコマンド

カスタムコマンドを作成することで、「not」と同じような機能を持つコマンドを作成することができます。

Cypress.Commands.add('notExist', (selector) => {
  cy.get(selector).then((element) => {
    if (element.length === 0) {
      return true;
    } else {
      return false;
    }
  });
});

cy.get('#my-element').should('notExist');

この例では、notExist というカスタムコマンドを作成し、「not.exist」と同じ効果を持たせています。

それぞれの方法のメリットとデメリット

方法	メリット	デメリット
negate アサーション	簡潔で分かりやすい	アサーションコマンドの種類が限られる
try/catch ブロック	柔軟性が高い	コードが冗長になる
カスタムコマンド	再利用性が高い	開発コストがかかる

再利用性が高い検証が必要な場合は、カスタムコマンドがおすすめです。
柔軟性の高い検証が必要な場合は、try/catch ブロックがおすすめです。
簡潔で分かりやすいコードを記述したい場合は、negate アサーションがおすすめです。