如何检查元素在赛普拉斯 e2e 测试中是否永远不可见？

Question

有什么方法可以断言在 Cypress 中进行路由时某个元素在任何时候都不可见？

我有一个服务器呈现的 Web 应用程序，它有时会在不应该显示“正在加载”状态。因此，当我在页面之间导航时，“正在加载”指示器会显示几秒钟然后消失。

我知道赛普拉斯的断言有时会“等待”——在这种情况下，赛普拉斯会一直等到加载指示器消失，这会让测试认为它已经通过。但我希望测试失败，因为加载指示器在某些时候可见。

我正在使用这两个断言：

cy.get('[data-test="loading"]').should('not.exist');

cy.get('[data-test="loading"]').should('not.be.visible');

但由于加载指示器消失，所以两者都通过了。

我已经检查了所有文档，但似乎没有某种方法可以检查元素是否从不可见。是否有一些我遗漏的方法或一些 hack 以不同的方式测试它？

Answer 1

我可能疯了，我还没有测试过，但我想把它扔出去

我假设您正在测试永远不应该有加载指示器并且它等待默认的 4 秒并且指示器消失，因此您的测试通过。所以下面我将等待设置为零，所以它不会等待。我也很困惑为什么你不修复实际代码，这样你就不会看到不应该看到的指示器。可能你没有权限访问代码..

cy.get('[data-test="loading"]',{ timeout: 0 }).should('not.exist');

cy.get('[data-test="loading"]',{ timeout: 0 }).should('not.be.visible');

Answer 2

Cypress 有一个精简版 jQuery，所以我们可以观察不应该存在的父元素的变化。

只要发生变化，就会应用@Maccurt 的测试。

您想将手表触发保持在最低限度，因此找到测试元素的直接（或最近）父元素。

注意这涵盖了 exists 测试，但如果该元素始终存在但只是不可见，则对于 visible 测试不应该是必需的.

在此示例中，一个按钮被添加到 body。
第一个测试监视 span（从未添加，因此测试成功）。
第二次测试监视 button 并失败。

describe('watching for an element to not appear', () => {

  const watchAndTest = function(parentSelector, assert) {
    Cypress.$(parentSelector).bind('DOMNodeInserted', function(event) {
      assert()
    });
  }

  it('should succeed because "span" does not exist', () => {
    const parentSelector = 'body'
    const watchForSelector = 'span'
    watchAndTest(parentSelector, 
      () => {
        // Place your 'assert' code here
        cy.get(`${parentSelector} ${watchForSelector}`,{ timeout: 0 })
          .should('not.exist');
      }
    )

    // Place your 'act' code here
    cy.get(parentSelector).then(parent => {
      var newElement = document.createElement('button');
      parent[0].appendChild(newElement)
    })
    Cypress.$(parentSelector).unbind('DOMNodeInserted')
  })

  it('should fail because "button" exists', () => {
    const parentSelector = 'body'
    const watchForSelector = 'button'
    watchAndTest(parentSelector, 
      () => {
        // Place your 'assert' code here
        cy.get(`${parentSelector} ${watchForSelector}`,{ timeout: 0 })
          .should('not.exist');
      }
    )

    // Place your 'act' code here
    cy.get(parentSelector).then(parent => {
      var newElement = document.createElement('button');
      parent[0].appendChild(newElement)
    })
    Cypress.$(parentSelector).unbind('DOMNodeInserted')
  })

})

如何检查元素在赛普拉斯 e2e 测试中是否永远不可见？

How to check if element is never visible in Cypress e2e testing?

javascript

e2e-testing

cypress