如何使用 Ng-Select 元素避免 Cypress 薄片答案

【问题标题】：How to Avoid Cypress Flakiness Using Ng-Select Elements如何使用 Ng-Select 元素避免 Cypress 薄片
【发布时间】：2020-12-02 16:46:27
【问题描述】：

我们在 Ionic 5 / Angular 9 项目上使用Cypress E2E 测试框架。在 Cypress Test Runner GUI 中运行时，我们的测试大部分都按预期工作。然而，当在 CLI 模式下运行时，我们会遇到很多类似这样的故障（即并非总是，但肯定是多次在我们的测试套件中每次运行）失败：

重试超时：预期“”为“可见”此元素 <span.ng-value-label> 不可见，因为它具有 CSS 属性：position: fixed，并且它被另一个元素覆盖：@ 987654325@

这些失败源于我们尝试与 ng-select 元素交互，这些元素扩展到我们几乎无法控制的标记和 CSS。我们使用 CLI 模式进行持续集成工作，因此这些与 ng-select 相关的失败严重限制了我们能够从赛普拉斯测试中提取的价值以及我们信任测试结果的能力。

我们使用 ng-select 的 Cypress 代码示例如下：

cy.get(`[data-cy=show-percents]`)
  .should('be.visible')
  .click();

cy.get('ng-dropdown-panel')
  .should('be.visible')
  .contains('span', 'Count of responses')
  .should('be.visible')
  .click({ force: true });

... 与该 sn-p 相关的标记看起来像这样：

<ng-select
  [(ngModel)]="inputFig.showPercents"
  [appendTo]="'body'"
  [searchable]="false"
  [items]="valuesMenu"
  [clearable]="false"
  bindLabel="title"
  bindValue="val" data-cy="show-percents">
</ng-select>

...为了完整起见，此示例的绑定打字稿包含：

valuesMenu = [
   {
      title: 'Count of responses', 
      val: false
   }, 
   {
      title: 'Percentage of total', 
      val: true
   }
];

使用 Cypress 测试能够一致且可靠与 ng-select 交互的解决方案是什么？

【问题讨论】：

标签： angular ionic-framework integration-testing cypress angular-ngselect

【解决方案1】：

阅读https://www.cypress.io/blog/2020/07/22/do-not-get-too-detached/，其中显示了使用 Select2 的示例。如果您仍有问题，请使用可重现的示例创建一个公共 repo，我们可以运行该示例来描述问题和解决方案。

【讨论】：