如何使用Ng-Select元素避免赛普拉斯松驰感

问题描述

我们在Ionic 5 / Angular 9项目上使用Cypress E2E测试框架。在赛普拉斯Test Runner GUI中运行时，我们的测试通常可以按预期工作。但是，在CLI模式下运行时，我们会遇到很多失败（例如，并非总是，但每次运行时整个测试套件中多次）这样的失败：

重试超时：预期''是'可见的'该元素<span.ng-value-label>不可见，因为它具有CSS属性：position: fixed并且被覆盖另一个元素：<div class="ng-input">...</div>

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

与ng-select结合使用的赛普拉斯代码示例如下：

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

...以及该代码段附带的标记如下所示：

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

使用赛普拉斯测试能够与ng-select 一致和可靠进行交互的解决方案是什么？

解决方法

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