Javascript 如何读取Cypress的数据值？

我正在尝试从API响应读取数据。 Chrome Inspect中的html显示该值，但数字会更改为4或5。我需要Cypress读取数据，并根据该值，执行特定条件

html

---

最简单的方法是先获取文本，如下所示：

const licensesOne = document.querySelector('p[class="availablelicenses"]').innerText;
const licensesTwo = document.querySelector('p[class="totallicenses"]').innerText;

if (licensesOne === licensesTwo) {
  // Checks to run if texts are equal
} else {
  // Checks to run if texts are different
}

// Gets text of element and passes it to "then" callback
cy.get(`p[class="availablelicenses"]`).invoke('text').then(
  availableLicensesText => {
    //Gets text of second element & passes it to "then" callback
    cy.get(`p[class="totallicenses"]`).invoke(`text`).then(totalLicensesText => {
      if( availableLicensesText ===  totalLicensesText){
        // Checks to run if texts are equal
      } else {
        // Checks to run if texts are different
      }
    });
  }
);

请注意，

.innerText

和

.querySelector（…）

一次只能处理一个元素。如果有多个元素，可能需要使用循环。另外，

.innerText

可能在不同浏览器之间工作不一致

除此之外，正如正确指出的，

document.querySelector

根本不会等待元素更新/出现。因此，如果您在API调用之后运行此测试，您可能更喜欢使用下面解释的方法

还有另一种方法&稍微复杂一点。应用到您的案例中，它看起来是这样的：

const licensesOne = document.querySelector('p[class="availablelicenses"]').innerText;
const licensesTwo = document.querySelector('p[class="totallicenses"]').innerText;

if (licensesOne === licensesTwo) {
  // Checks to run if texts are equal
} else {
  // Checks to run if texts are different
}

// Gets text of element and passes it to "then" callback
cy.get(`p[class="availablelicenses"]`).invoke('text').then(
  availableLicensesText => {
    //Gets text of second element & passes it to "then" callback
    cy.get(`p[class="totallicenses"]`).invoke(`text`).then(totalLicensesText => {
      if( availableLicensesText ===  totalLicensesText){
        // Checks to run if texts are equal
      } else {
        // Checks to run if texts are different
      }
    });
  }
);

---

如果可能，我建议放弃If语句，并执行两个测试。通过确保两条路径都经过测试，这将为您提供更好的覆盖率

上下文（“许可证数量”，函数（）{
它（'未分配最大许可证时，应允许许可证输入'，（）=>{
cy.server（）；
//与真实响应形状相同的模拟响应
cy.route（“api/path/to/License/count”{
分配：4，
总数：5
})
cy.contains（'p[class=“availablelicenses”]，'4'）；//确认使用的存根响应
cy.contains（'p[class=“totallicenses”]”，'5'）；
cy.get（'button[id=“cyAdd”]”）。单击（）
cy.get（'[data cy=cyFirst'）.type（'testName'））
cy.get（'[data cy=cyLast'）。类型（'testLast'））
cy.get（'[data cy=cyEmail'）。类型（'testEmail@mailinator.com')
});
它（'分配最大许可证时，不应允许许可证输入'，（）=>{
cy.server（）；
//与真实响应形状相同的模拟响应
cy.route（“api/path/to/License/count”{
分配：5，
总数：5
})
cy.contains（'p[class=“availablelicenses”]，'5'）；//确认使用的存根响应
cy.contains（'p[class=“totallicenses”]”，'5'）；
cy.get（'button[id=“cyAdd”]”）。单击（）
cy.get（'p[class=“add user”]”）。包含（'已分配所有许可证'）
});
});

---

如果您不能对API进行存根，您可以使用类似于Igor上次建议的东西，但我不想使用

document.querySelector（'p[class=“availablelicenses”]”）

因为它将是片状的，请参阅文档的这一部分

---

此外，出于同样的原因，请使用

should（）

而不是

。then（）

。

不确定这在您的场景中是否可行，但您应该设计测试，以便知道许可证数量，然后创建两个测试，一个用于4个许可证，另一个用于5个许可证。也许您可以使用

cy.route（）存根API

使每个测试都看到适当的数字。第一行看起来错误-

cy.get（）

返回链表，而不是像

document.querySelector（）这样的元素

does。你测试过这个代码吗？@eric99我测试过了&你说得对，它返回了一个链表。谢谢你指出，我刚刚更新了答案。看起来不错。另外，因为许可证计数是从API

文档返回的。querySelector（）

没有等待，因此该语句可能在提取完成时运行。Cypress的

cy.get（）

具有内置的等待，但如果

p[class=“availablelicenses”]

是静态的（即在提取之前在角度模板上），则返回速度也会过快。您可能更幸运地将

替换为
。然后（）
因为should将对内部检查（您的评论行）应用超时。@eric99谢谢，我另一次更新了答案：）