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)

});

你如何处理这个问题取决于你的测试目标。我建议您查看文档中的更多示例：尝试Variables and Aliases，Best Practices和FAQ

Answer 2

如果您想检索该值并对其进行任何断言，也可以使用.invoke

一种快速，高效的方法。

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

Doc

Answer 3

赛普拉斯文档中有一个示例，说明如何Compare text values of two elements

// will keep text from title element
let titleText

cy.get('.company-details')
  .find('.title')
  .then(($title) => {
    // save text from the first element
    titleText = $title.text(); //original uses normalizeText($title.text())
  })

cy.get('.company-details')
  .find('.identifier')
  .should(($identifier) => {
    // we can massage text before comparing
    const idText = $identifier.text(); //original uses normalizeText($identifier.text())

    // text from the title element should already be set
    expect(idText, 'ID').to.equal(titleText)
  })

如何在cypress测试中使用DOM中的值？

3 个答案: