Question

在赛普拉斯内布线时，是否有任何方法可以断言某个元素永远不可见？

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

我知道赛普拉斯的断言有时会“等待”，但是在这种情况下，这会导致我的断言失败，因为加载指示器消失并且使测试认为它已经通过。

我正在使用以下两个断言：

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

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

但是它们都通过了，因为加载指示器消失了。

我已经阅读了所有文档，但似乎没有某种方法可以检查元素从不可见。有什么我缺少的方法或一些技巧可以用不同的方式测试吗？

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

})

如何检查Cypress e2e测试中元素是否从不可见？

2 个答案: