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

【问题标题】：How to use then() and get the value in Cypress如何使用 then() 并在 Cypress 中获取值
【发布时间】：2021-11-09 19:27:39
【问题描述】：

我有一个span元素，它的值为2，我想检查该值是否大于0，但是在网上检查并实现了每个方法后，它都不起作用......

这是我记录 $span 时的控制台

我知道 Cypress 是异步工作的，所以我使用 .then() 来获取元素的文本。如何获得 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)
    }
 )}

【问题讨论】：

当你写这篇cy.get(".badge.ml-1.badge-primary").invoke('text').then((text) => {cy.log(text)})时你会得到什么

标签： javascript testing cypress end-to-end

【解决方案1】：

通过链接从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
  })

【讨论】：

我记录文本，值显示为 0 而不是 2。然后我点击调用，结果为 0。这是否意味着 cypress 获取的是之前的值，而不是当前的值？
我猜我获取 span 值的方式是异步的，所以当 cypress 运行时，它会得到第一个值，即 0。
好的，但是如果你想等待它成为2，那么你不需要if() else() - 它总是doFunction1()
我认为你是在重新查询，但你可以增加超时时间。

【解决方案2】：

您要求的是检查跨度的内容是否大于 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)
    }
 )}

【讨论】：

如果我记录“$span”，它会在属性 innerHTML 中显示一个 jQuery 对象和我想要的值。但是，如果我 console.log($span.innerHTML)
如果它是一个jQuery对象，你是否厌倦了$span[0].innerHtml？也许它是元素的集合。

【解决方案3】：

首先确保您使用的选择器是唯一的，因此不应获取意外值。其次，您可以等待自定义超时，以防您的网页需要一些时间来填充该值，然后应用您的 if-esle 条件。现在代替 4 秒（cypress 默认超时），should 命令将重试 7 秒以检查元素的内部文本值是否为 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)
    }
  })

【讨论】：