赛普拉斯 - 循环遍历元素数组答案

【问题标题】：Cypress - loop through an array of elements赛普拉斯 - 循环遍历元素数组
【发布时间】：2021-06-12 04:42:51
【问题描述】：

我有一小段代码可以返回 1 个或 2 个 Web 元素的数组 (cy.get)。元素是复选框，或者更确切地说 - 在这个 Angular 应用程序中效果更好的复选框标签。

我正在尝试遍历数组并单击每个元素（选中复选框）。如果数组只包含一个元素，它工作正常。但是当有两个元素时，第二个元素被点击了两次，导致最后没有框被选中。

if (formal == Formal.KJOP) {
    this.getFinansieringsmuligheterKjop().forEach( (element) => {
        element.click({force:true});
    });
}

private getFinansieringsmuligheterKjop(): Cypress.Chainable<JQuery<HTMLElement>>[] {
    if (Helpers.randomBoolean()) {
        return new Array(formalPage.grunnlanTilKjopLabel);
    } else {
        return new Array(formalPage.grunnlanTilKjopLabel, formalPage.tilskuddUtleieLabel);
    }
}

因为它适用于被点击的元素，也适用于元素的数量，我认为循环中的元素访问有什么问题？

【问题讨论】：

标签： typescript foreach click element cypress

【解决方案1】：

这很好地说明了为什么 Page Object 模式不能很好地与 Cypress 以及它的命令队列模式一起工作。

问题在于混合了赛普拉斯队列命令，这些命令异步运行到测试代码和页面对象代码。

方法getFinansieringsmuligheterKjop() 不返回元素数组，它返回Cypress.Chainable<JQuery<HTMLElement>> 数组，您可以将其视为未解析查询的数组。

为了解决问题，在返回之前解决元素。

private getFinansieringsmuligheterKjop(): Cypress.Chainable<JQuery<HTMLElement>> {

  return formalPage.grunnlanTilKjopLabel.then(label1 => {  // evaluate the first label
    formalPage.tilskuddUtleieLabel.then(label2 => {        // evaluate the second label

      const elements = Helpers.randomBoolean() 
        ? new Array(label1)
        : new Array(label1, label2);

      return elements;
  })
})

您还必须为赛普拉斯 .each() 命令更改同步 .forEach()

if (formal == Formal.KJOP) {
  this.getFinansieringsmuligheterKjop().each(label => {
    cy.wrap(label).click();
  });
}

【讨论】：

啊哈。这或许可以解释为什么我在从 Java/Kotlin 和 Selenium 转换到 Cypress 时遇到这么多麻烦！负责我们前端测试代码的人坚持保留 PO 模型。但还有什么？有什么选择？之后我需要某种模型来构建我的测试。
如果 PO 有助于从以前的框架转换测试代码，您仍然可以使用它，但尽量将 Cypress 命令排除在 PO 方法和 getter 之外。只返回选择器字符串而不是命令结果，所以在上面你可以使用return cy.get(formalPage.grunnlanTilKjopLabel).then(...，其中grunnlanTilKjopLabel 属性只是一个选择器字符串。您将拥有更大的灵活性，因为在不同的测试中您可能需要.find(formalPage.grunnlanTilKjopLabel) - 即您可以根据需要混合和匹配命令和选择器。