赛普拉斯 - 遍历元素数组

Question

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

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

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);
    }
}

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

Answer 1

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

问题是将 运行异步 的 Cypress 队列命令混入测试代码和页面对象代码。

方法getFinansieringsmuligheterKjop()不返回一个元素数组，它returns和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;
  })
})

您还必须为 Cypress .each() 命令更改同步 .forEach()

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

赛普拉斯 - 遍历元素数组

Cypress - loop through an array of elements

foreach

element

click

typescript

cypress