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

xuo3flqw 于 2023-06-04 发布在 Java

关注(0)|答案(1)|浏览(208)

我正在使用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')

JavaScript

来源：https://stackoverflow.com/questions/76330941/check-that-a-text-is-completely-visible-in-cypress

1条答案

按热度按时间

zpf6vheq1#

确切的方法可能会因长文本元素上方元素的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>

当此页面显示在几百像素的小视口中时，并非所有文本都可见。
诀窍是将元素的大小与它的视口进行比较。
例如，在200x200像素下，此测试通过

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