检查文本在 Cypress 中是否完全可见

Question

我正在使用 Cypress，我想检查用户是否可以看到给定的很长的字符串。 例如，如果某些其他元素与文本重叠，以至于您只能看到文本的一部分，则测试应该失败。 此外，如果元素overflow: hidden; 并且高度不够等。我怎样才能避免这种天真的方法可能产生的误报？

// passes if the DOM element is visible, even if you see only one line of the text!
cy.contains(someVeryLongText).should('be.visible')

Answer 1

确切的方法可能会有所不同，具体取决于长文本元素上方元素的 CSS。

这是符合您描述的最小页面。 所有父母都有 CSS overflow: hidden以抑制自动扩展<textbox> 。

<html style="overflow: hidden;">
  <body style="overflow: hidden;">
    <textbox style="overflow: hidden;">Lorem ipsum dolor sit amet. 
      Ad repellendus repellat At neque voluptas eos distinctio quos sed quod natus.
      Aut necessitatibus aperiam et ipsam totam sit adipisci recusandae. 
      Ut error dicta non explicabo quia qui fugiat amet.
    </textbox>
  </body>
</html>

当此页面显示在几百像素的小视口中时，并非所有文本都可见。

诀窍是将元素的大小与其视口进行比较。

例如，在 200 x 200 像素下，此测试通过

it('check for partially hidden text', () => {

  cy.viewport(200, 200)
  cy.visit('/')

  cy.get('textbox')
    .should('be.visible')
    .should($el => {
      const windowInnerHeight = cy.state('window').innerHeight 
      const bounds = $el[0].getBoundingClientRect()
      expect(bounds.bottom).to.be.lessThan(windowInnerHeight)  // text is fully visible
    })
})

将视口缩小到 150 像素会使文本溢出，并且无法通过测试

检查文本在 Cypress 中是否完全可见

问题描述

1 个解决方案

解决方案1
1 2023-06-04 02:26:18

检查文本在 Cypress 中是否完全可见

问题描述

1 个解决方案

解决方案1 1 2023-06-04 02:26:18

解决方案1
1 2023-06-04 02:26:18