如何检查元素是否被完全覆盖

Question

这不是常见的赛普拉斯问题，因为固定元素被另一个元素覆盖而导致测试失败。

我的页面顶部有一个可扩展列表。当它展开时，我希望它位于页面的所有其他方面的顶部。所以我正在编写一个柏树测试来验证没有其他东西覆盖它。

不幸的是，测试并没有在明显的失败案例中失败。

此测试对上述列表成功

cy.get('#list')
  .should('be.visible')
  .find('p').each(($listItem) => {
    cy.wrap($listItem)
      .should('be.visible')
      .click(); // another layer of cover check
  });

我想这是成功的，因为元素不是隐因此是“可见的”，并且点击是成功的，因为每个元素的中心都被暴露了。我如何测试列表主体是否完全暴露/显示在顶部？

Answer 1

在图像中，列表位于下拉列表的右侧，因此这是检查 x 维度重叠的一种方法：

cy.get('#dropdown').then($el => {
    const rhs = Math.round($el[0].getBoundingClientRect().right)

    cy.get('#list').then($el => {
      const lhs = Math.round($el[0].getBoundingClientRect().left)
      expect(lhs).to.be.gt(rhs)
    })
  })

看起来页面上还有一个您想要重复检查的表格。

概括一下：

Cypress.Commands.add('hasNoOverlapWith', {prevSubject: true}, (subject, others) => {
  let covered = false;
  const targetRect = subject[0].getBoundingClientRect()
  others.forEach(other => {
    cy.get(other).then($el => {
      const otherRect = $el[0].getBoundingClientRect()

      // other covers from the left
      const coveredLeft = otherRect.right >= targetRect.left && 
        otherRect.right <= targetRect.right

      // other covers from the right
      const coveredRight = otherRect.left <= targetRect.right && 
        otherRect.left >= targetRect.left

      if (!covered) {
        covered = coveredLeft || coveredRight
      }
    })
  })

  cy.then(() => {
    expect(covered).to.eq(false)
  })
})

cy.get('#list').hasNoOverlapWith(['#dropdown', '#table'])