英文:
Check that a text is completely visible in Cypress
问题
我正在使用Cypress，我想检查用户是否可以看到给定的非常长的字符串。
例如，如果其他元素重叠在文本上，以至于只能看到文本的一部分，测试应该失败。如果元素具有overflow: hidden;并且高度不足等情况也应该失败。
如何避免这种简单方法可能出现的错误阳性呢？
// 如果DOM元素可见，即使只能看到文本的一行也会通过测试！
cy.contains(someVeryLongText).should('be.visible')
英文:
I am using Cypress and I want to check that the user can see a given, very long string.
If e.g. some other element overlaps the text, so that you can only see a part of the text, the test should fail. Also if the element has overflow: hidden; and the height is not sufficient etc.
How can I avoid possible false positives from this naive approach?
// passes if the DOM element is visible, even if you see only one line of the text!
cy.contains(someVeryLongText).should('be.visible')
答案1
得分: 4
以下是翻译好的内容：
"The exact approach is likely to vary depending on the CSS of the elements above your long text element.
Here's a minimal page that meets your description. All parents have CSS overflow: hidden to suppress expanding the <textbox> automatically.
<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>
When this page is displayed in a small viewport of a few hundred pixels, not all the text is visible.
The trick is to compare the element's size to its viewport.
For example, at 200 x 200 pixels, this test passes
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
})
})
Reducing the viewport to 150 pixels overflows the text and fails the test."
英文:
The exact approach is likely to vary depending on the CSS of the elements above your long text element.
Here's a minimal page that meets you description. All parents have CSS overflow: hidden to suppress expanding the <textbox> automatically.
<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>
When this page is displayed in a small viewport of a few hundred pixels, not all the text is visible.
The trick is to compare the element's size to it's viewport.
For example, at 200 x 200 pixels this test passes
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
})
})
Reducing the viewport to 150 pixels overflows the text, and fails the test
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论