如何使用 then() 并在 Cypress 中获取值

How to use then() and get the value in Cypress

我有一个值为2的span元素。我想检查该值是否大于0,但是在网上检查并实现了每个方法后,它没有工作...

这是我登录 $span

时的控制台

我了解Cypress是异步工作的,所以我使用.then()来获取element的文本。如何获取 2 的值并执行以下操作 if-else?

HTML

<div>
  <span class="badge ml-1 badge-primary">2</span>
</div>
   cy.get(".badge.ml-1.badge-primary").then(($span)=> {
     if($span.text().includes(0)) {
      doFunction1()
    } else {
      cy.get(xxxxx)
    }
 )}

您要求的是检查跨度的内容是否大于 0。因此与使用 includes 相比,它需要一些额外的方法。例如,您可以将一个值作为变量读取并检查它是否大于 0:

 cy.get(".badge.ml-1.badge-primary").then(($span)=> {
     const value = $span.text(); // now you know what the value is
     if(value > 0) { // actual check if > 0. Beware, implicit coersion here! read more below.
      doFunction1()
    } else {
      cy.get(xxxxx)
    }
 )}

然而,value 变量是一个字符串。我的代码有效,因为 JS 会自动将字符串转换为数字。根据您的用例,您可能希望确保它是一个有效数字,而不是其他无法转换为数字的字符串(如“2s”)。 例如,如果值为“2s”,那么 value > 0 检查将是错误的,这可能会导致您的代码出现错误。

 cy.get(".badge.ml-1.badge-primary").then(($span)=> {
     const value = Number.parseInt($span.text()); // now you know what the value is
     if(!Number.isNaN(value) && value > 0) { // value is now of type number, but it may be NaN! (yes, NaN is also a number)
      doFunction1()
    } else {
      cy.get(xxxxx)
    }
 )}

通过链接从 element -> text -> number

的转换方法来实现
cy.get(".badge.ml-1.badge-primary")
  .invoke('text')                    // to text
  .then(text => +text)               // to number
  .then(value => {
    if(value > 0) { 
      doFunction1()
    } else {
      cy.get(xxxxx)
    }
  })

等待值2

cy.get(".badge.ml-1.badge-primary")
  .invoke('text')                    // to text
  .then(text => +text)               // to number
  .should('eq', 2)                   // wait for value 2
  .then(() => {
    doFunction1()                    // now doFunction
  })

首先确保您使用的选择器是唯一的,这样就不会获取意外的值。其次,您可以等待自定义超时,以防您的网页需要一些时间来填充值,然后应用您的 if-esle 条件。现在,should 命令将重试 7 秒,而不是 4 秒(赛普拉斯默认超时),以检查元素的内部文本值为 2。

cy.get(".badge.ml-1.badge-primary", { timeout: 7000 }).should("have.text", "2")

cy.get(".badge.ml-1.badge-primary")
  .invoke(text)
  .then((num) => {
    if (+num > 0) {
      doFunction1()
    } else {
      cy.get(xxxxx)
    }
  })