Cypressを使った際の変数概念の使い方

このテキストは、運営している韓国のブログを日本語に翻訳したものです。

韓国のブログ：https://yunsuu.notion.site/e379eccd32c545419f0651f743c12c13?v=35310b282de24cc5a292fe45cc498a32&pvs=74

Cypressを使った際の変数概念の使い方

問題

Cypressを使ってe2eテストを進行中に、削除機能のテストコードを書く必要がありました。

次の画像のように、カードを一つ削除する作業でした。

<div>
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
  <button class="delete__button">削除ボタン</button>
</div>

最初はこのようなコードを書きました。しかし、すぐにエラーが発生しました。

const cardCount = cy.get('.card').length;
cy.get('.delete__button').click();
cy.wait(1000);
cy.get('.card').should('have.length', cardCount - 1);

cardCountに削除する前のカードの数を保存し、削除した後にこれを比較する作業を行いました。

しかし、常にNaNエラー（cardCountの値が設定されていないと表示される）が出ました。少し試行錯誤した後、Cypressでは変数概念を使うには別の方法でコーディングしなければならないことがわかりました。

解決方法

次のようにコーディングすれば問題を解決できます。

cy.get('.card').then((cardElement) => {
  const cardCount = cardElement.length;
  cy.get('.delete__button').click();
  cy.wait(1000);
  cy.get('.card').should('have.length', cardCount - 1);
});

公式ドキュメントの解決リンク [Variables and Aliases]

https://docs.cypress.io/guides/core-concepts/variables-and-aliases.html#Closures

Cypressは各コマンド単位で独立して区別されるため、上で宣言して設定した変数の値を記憶できないという動作特性があることがわかりました。そのため、変数概念を使いたい場合は、promiseを使って実行コマンドを束ねる必要があります。