cypress - 如何在 Cypress 测试中使用来自 DOM 的值？

Question

如果我的页面包含:

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

在 Cypress 中，如何将值提取到要在测试中使用的变量？

类似于以下内容:

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

Answer 1

使用 const 分配返回值, var , 和 let在使用 Cypress 时被视为反模式。
但是，当您发现自己想要这样做时，最好使用闭包来完成此操作。

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);

  })

});

如果您想使用钩子(Hook)存储和比较值或在测试之间共享值，另一种方法是使用别名。

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

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

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

});

您如何处理这实际上取决于您的测试目标。我建议从文档中查看更多示例:尝试 Variables and Aliases , Best Practices , 和 FAQ