赛普拉斯不应该存在或不可见

Question

在我看来，由于页面设计不佳，我发现自己在验证页面上一个或多个元素的可见性或不存在时遇到问题。

问题是有些元素不存在，而有些元素具有 CSS 属性 display:none。但现有的测试代码会检查 not.exist，这会导致测试失败。但我不能更改为 not.be.visible，因为那样它会在其他元素上失败。

那么：是否可以在断言中执行 OR 操作？类似的东西

cy.get('blabla').should('not.be.visible').or.cy.get('blabla').should('not.exist');

上面的行编译，但在第二部分产生未定义，因此它不起作用。

这是代码：

（我不认为代码架构很重要——问题基本上是“或”的问题。）

page.sjekkAtDellaanFelterVises(2, 2, [
  DellaanFelter.formaal,
  DellaanFelter.opprinneligLaanebelop,
  DellaanFelter.utbetalingsdato,
  DellaanFelter.restlaanInnfridd,
]);

public sjekkAtDellaanFelterVisesALT(sakRad: number, delLanRad: number, felter: DellaanFelter[]) {
  this.sjekkFelter(felter, DellaanFelter, (felt: string) => this.delLanAccordionBody(sakRad, delLanRad).get(this.e2e(felt)));
}   

@ts-ignore
public sjekkFelterALT<T, E extends Node = HTMLElement>(felter: T[], enumType, lookupFn: (felt: string) => Chainable<JQuery<E>>) {
  this.valuesOfEnum(enumType).forEach(felt => {
    this.sjekkFelt(felt, felter, enumType, lookupFn);
  });
}

// @ts-ignore enumType fungerer fint i praksis ...
public sjekkFeltALT<T, E extends Node = HTMLElement>(felt: string, felter: T[], enumType, lookupFn: (felt: string) => Chainable<JQuery<E>>) {
  if (felter.some(feltSomSkalVises => enumType[feltSomSkalVises] == felt)) {
    lookupFn(felt).should('be.visible');
  } else {
    lookupFn(felt).should('not.exist');
  }
}    

或者解决方案是先尝试检查元素是否存在，然后如果存在，则检查可见性？

Answer 1

您可以使用cypress-if插件来获得优雅的语法。遵循您的cy.get()与.if()可见性断言相结合，然后.else()与存在断言相结合。

例如，如果<div>页面上有一个但不可见

<div style="display:none">a</div>

这两个测试都会通过

cy.get('div')
  .if()
  .should('not.be.visible')   // passes
  .else()
  .should('not.exist')        // skipped

cy.get('span')
  .if()
  .should('not.be.visible')  // skipped
  .else()
  .should('not.exist')       // passes

Answer 2

我面临着同样的问题，一些模态在关闭时被破坏（即从 DOM 中删除），而其他模态则被隐藏。

我找到了一种or通过将可见性检查作为过滤器添加到选择中来模拟的方法，然后断言不存在：

cy.get('my-selector').filter(':visible').should('not.exist')

发生故障时的错误消息并不那么不言自明（“预期:visible不存在”），您必须进一步阅读日志才能理解。如果您不需要选择器和过滤器之间的分离，您可以将两者结合起来以获得更好的错误消息（“预计my-selector:visible不存在”）：

cy.get('my-selector:visible').should('not.exist')

Answer 3

总而言之，这里不会有一个简单的解决方案——Cypress 的get命令有断言，所以你不能轻易捕获或吃掉这些异常。如果您尝试获取不存在的元素，Cypress 的断言将会失败。不幸的是，最好的情况是每个断言都具有确定性行为。

有关 Cypress 为何如此行为的更多信息，请参见此处。

我认为这样做的最佳情况是编写自定义 Chai 断言，但我没有任何这样做的经验。这是 Chai 的相关文档。

如果您想简化代码，但知道哪些元素不应该存在以及哪些元素不可见，您可以编写一个自定义命令来处理该问题。

Cypress.Commands.add('notExistOrNotVisible', (selector, isNotExist) => {
  cy.get(selector).should(isNotExist ? 'not.exist' : 'not.be.visible');
});

cy.notExistOrNotVisible('foo', true); // asserts that `foo` does not exist
cy.notExistOrNotVisible('bar', false); // asserts that `bar` is not visible

我任意地不存在积极的情况，但你可以切换它和should.