如何使用在 .then() 之外的 .then() 中设置的 var 的值？答案

【问题标题】：How to use value of var which is set inside .then() outside of .then()?如何使用在 .then() 之外的 .then() 中设置的 var 的值？
【发布时间】：2021-06-02 20:47:45
【问题描述】：

我想使用在外部范围内设置在 .then() 内的 var 的值

我试过了

let numOfDropdownFields = 0;
cy.get("dropdown")
  .find("button")
  .its("length")
  .as("len")
  .then(($len) => {
    cy.log("No. of buttons:" + $len);
    numOfDropdownFields = $len;
    cy.get("@len").should("eq", numOfDropdownFields);
    cy.log(numOfDropdownFields);
  });
cy.log(numOfDropdownFields);

第一个日志打印：元素数量：14

第二条日志：14

还有第三条日志：0

如何在.then() 回调之外看到值 14？

【问题讨论】：

标签： javascript testing cypress

【解决方案1】：

您试图实现的目标在 cypress 中被视为反模式。通常，您应该对 .then() 中的该变量执行您想做的所有操作。确保使用如下语法：.then() => {all your code in here}。

参考这里：https://docs.cypress.io/guides/core-concepts/variables-and-aliases.html#Aliases

您还可以像使用 .as('len') 一样使用别名。

【讨论】：

【解决方案2】：

每个cy.something() 函数调用都在赛普拉斯队列中设置一个命令。

像cy.get() 和cy.find() 这样访问DOM 的命令需要时间来处理，因此您可以将它们视为与promise 相同的方式，在测试代码中从javascript 异步运行。

cy.log(numOfDropdownFields) 行实际上是在 .its("length") 发生之前执行的，当时它会抓取 numOfDropdownFields 的当前值，即 0。

但赛普拉斯按照添加顺序执行队列中的命令，因此日志出现发生在运行长度代码之后。

只需将cy.log() 更改为console.log()，您就会看到正确的事件顺序。

这就是别名机制的全部原因 - 它提供了另一种“等待”命令队列赶上的方式。

let numOfDropdownFields = 0;
cy.get("dropdown")
  .find("button")
  .its("length")
  .as("len")
  .then(($len) => {
    cy.log("No. of buttons:" + $len);                   // > 0
    console.log('I log second', $len);                  // > 0
    numOfDropdownFields = $len;
  cy.get("@len").should("eq", numOfDropdownFields);
  cy.log(numOfDropdownFields);                          // > 0
});
cy.log(numOfDropdownFields)                             // === 0
console.log('I log first', numOfDropdownFields);        // === 0
cy.get('@len').then(() => cy.log(numOfDropdownFields))  // > 0

【讨论】：