Typescript Cypress-通过元素数组循环

我有一段代码，它返回1个或2个web元素的数组（cy.get）。elments是复选框，或者更确切地说是复选框标签，在这个角度应用程序中效果更好

我试图循环遍历数组并单击每个元素（选中复选框）。如果数组只包含一个元素，则可以正常工作。但是当有两个元素时，第二个元素会被单击两次，最终不会选择任何框

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

if（formal==formal.KJOP）{
this.getFinansieringsmuligheterKjop（）.forEach（（元素）=>{
元素。单击（{force:true}）；
});
}
私有getFinansieringsmuligheterKjop（）：Cypress.chaineable[]{
if（Helpers.randomBoolean（））{
返回新数组（formalPage.grunnlanTilKjopLabel）；
}否则{
返回新数组（formalPage.grunnlanTilKjopLabel、formalPage.tilskuddUtleieLabel）；
}
}

---

因为它与被点击的元素有关，也与元素的数量有关，所以我认为循环中的元素访问是有关系的？

这是一个很好的例子，说明了为什么页面对象模式与Cypress及其命令队列模式不能很好地配合使用

问题在于混合使用Cypress队列命令，与测试代码和页面对象代码异步运行

方法

getFinansieringsmuligheterKjop（）

没有返回元素数组，而是返回

Cypress.Chainable

数组，您可以将其视为未解析查询数组

要解决此问题，请在返回之前解决元素

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

---

啊哈。这也许可以解释为什么我在从Java/Kotlin和Selenium转换到Cypress时遇到这么多麻烦！负责我们前端测试代码的人坚持保留PO模型。但还有什么？替代方案是什么？我需要某种模型来构建之后的测试。如果PO有助于从以前的框架转换测试代码，您仍然可以使用PO，但请尽量避免使用PO方法和getter中的Cypress命令。只返回选择器字符串而不是命令结果，因此在上面您可以使用

return cy.get（formalPage.grunnlanTilKjopLabel）。然后（…

其中

grunnlanTilKjopLabel

属性只是一个选择器字符串。您将具有更大的灵活性，因为在不同的测试中，您可能需要

.find（formalPage.grunnlanTilKjopLabel）

-即您可以根据需要混合和匹配命令和选择器。

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