问题描述
我有一小段代码可以返回 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);
}
}
既然它适用于被点击的元素，也适用于元素的数量，我想在循环中访问元素有什么问题吗？
解决方法
这很好地说明了为什么 页面对象 模式在 Cypress 和它的命令队列模式中不能很好地工作。
问题是混合了 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;
})
})
您还必须更改 Cypress .forEach() 命令的同步 .each()
if (formal == Formal.KJOP) {
this.getFinansieringsmuligheterKjop().each(label => {
cy.wrap(label).click();
});
}