赛普拉斯测试中如何使用DOM中的值？

Question

如果我的页面包含：

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

在赛普拉斯中，如何将值提取到变量中以便在测试中使用？

类似于以下内容：

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

Answer 1

指定返回值用const，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)

});

实际的处理方式取决于测试的目的。我建议您从文档中查看更多示例：尝试变量和别名，最佳实践和常见问题解答

Answer 2

如果您想检索该值并用它执行任何断言，也可以使用一种快速、有效的方法.invoke

it('Getting the value and performing an assertion', () =>{
   cy.get('selector').invoke('val').should('eq',10) 
})

医生