☰

Cypress テストで DOM の値を使用するにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon cypress
Cypress テストで DOM の値を使用するにはどうすればよいでしょうか? 質問する

次のようなページがあるとします:

  <span data-testid="credit-balance">
    10
  </span>

Cypress では、テストで使用するために変数に値を抽出するにはどうすればよいですか?

次のような内容です:

const creditBalance = cy.get('[data-testid="credit-balance"]').value();

ベストアンサー1

constCypress を使用する場合、、、を使用して戻り値を割り当てることはアンチパターンvarとlet見なされます。ただし、そうする必要がある場合は、クロージャを使用してこれを実現するのがベストプラクティスです。

it("uses closures to reference dom element", () => {

   cy.get("[data-testid=credit-balance]").then(($span) => {

   // $span is the object that the previous command yielded

   const creditBalance = $span.text();

   cy.log(creditBalance);

  })

});

これを行う別の方法は、値を保存して比較したり、フックを使用してテスト間で値を共有したりする場合、エイリアスを使用することです。

it("aliasing the value from dom element", () => {

  cy.get("[data-testid=credit-balance]").as("creditBalance")

  cy.get("@creditBalance").should("contain", 10)

});

これにどうアプローチするかは、テストの目的によって異なります。ドキュメントから他の例を確認することをお勧めします。変数とエイリアス、ベストプラクティス、 そしてよくある質問

おすすめ記事