时间戳

首页 > 解决方案 > 赛普拉斯 - 循环遍历元素数组

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

问题描述

我有一小段代码可以返回 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);
    }
}

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

标签： typescriptforeachclickelementcypress

解决方案

这很好地说明了为什么页面对象模式不能很好地与赛普拉斯一起工作，它是命令队列模式。

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

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

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

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

推荐阅读