Chai plugin to check if a DOM element is currently within the visible viewport
npm install chai-in-viewport
Chai plugin to check if a DOM element is currently within the visible viewport
chai-in-viewport is an extension to the chai assertion library that provides new assertions to
assert that a DOM element is within the browser's currently visible viewport (i.e. is not scrolled
out of view)
It is intended for use in integration tests that run in a browser or browser-like environment (e.g.
cypress.io). It assumes access to HTMLElment, document andwindow objects
Install using npm
``sh`
npm install chai-in-viewport
In setup for your tests, import the plugin and enable it within chai
`js
import chai from 'chai'
import chaiInViewport from 'chai-in-viewport'
chai.use(chaiInViewport);
`
chai-in-viewport adds the inViewport assertion, that can be applied to an HTMLElement
`js`
expect(element1).to.be.inViewport
expect(element2).to.not.be.inViewport
The inViewport assertion currently simply tests the element'sgetBoundingClientRect
against the 'sclientWidth and clientHeight. It does not test whether the element is clipped by its parents, ifvisibility: hidden
it has , opacity: 0, is obscured by another element or is otherwise hidden from
view on the screen
If using cypress.io, I would suggest using a combination of
visible and inViewport assertions
`js``
cy.get('#el').should('be.visible.and.inViewport');