赛普拉斯在 sapui5 Web 组件上进行测试，以确保在组合框下拉菜单上点击不可靠

Question

我们在 Cypress 组件和 E2E 测试方面遇到了大量问题。 我们已经设置了一个 SAPUI5 Web 组件，用于使用 V1 中的 Web 组件来反应应用程序。

都与Combobox组件有关。

在测试运行期间，测试运行器有时无法成功单击下拉菜单，有时无法从列表中选择正确的选项。

ComboBox 被嵌套并被映射多次（基于反应状态）：

<ComboBox
data-testid={"comboBox_" + index}
placeholder={"Select Condition"}
value={type === "number" ? getText(NumberToken[token]) : getText(StringToken[token])}
onChange={(e) => {
    handleComboBoxChange(index, e.target.value); //some react states being set via a passed through handler
}}>
<ComboBoxGroupItem
    text={getText("INCLUDE")}>
</ComboBoxGroupItem>

{type === "number" && numberTokenArrayInclude.map((token) => (
        <ComboBoxItem key={token}
                      text={getText(token)}>
        </ComboBoxItem>
))}

{type === "string" && stringFilterTokenArrayInclude.map((token) => (
        <ComboBoxItem key={token}
                      text={getText(token)}>
        </ComboBoxItem>
))}


   … and some similar exclude ComboBoxitems

</ComboBox>

测试代码看起来像这样简化的：

cy.get('[data-testid="comboBox_0"]')
.should('be.visible')
.should('not.be.disabled');

cy.get('[data-testid="comboBox_0"]').wait(300).openDropDownByClick();


cy.wait(1000);
cy.get('[data-testid="comboBox_0"]').clickDropdownMenuItemByText('less or equal to');

cy.wait(300);

cy.get('[data-testid="comboBox_0"]').should('have.value', 'less or equal to');

我真的不知道从哪里开始看这里。有时它会这样说：

[ui5-responsive-popover][open]

，但一直没找到。

有时会说没有显示。

有时它根本不设置值。

有时效果很好...

感谢任何可以暗示的帮助。

Answer 1

您可以尝试的一件事是交换

cy.wait()

来增加下一个查询的超时时间。

等待和超时的区别在于，等待总是有固定的周期，但超时可以大幅增加超出预期等待，并且一旦满足查询就会停止等待。

另请参阅有关不必要的等待

的注释

反模式： 使用 cy.wait(Number) 等待任意时间段。

最佳实践：使用路由别名或断言来保护 Cypress 继续进行，直到满足明确的条件为止。

代码中的一个示例是

[ui5-responsive-popover]

• 使用

  cy.intercept()

  等待组合框列表项的加载，假设它们是根据 API 的需求加载的。

• 使用守卫断言组合框列表已填充

  cy.get('ui5-li[accessible-role="Option"]').should('have.length.gt', 0)