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 a new assertion to
check if 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 HTMLElement
, document
and
window
objects
Install using npm
npm install chai-in-viewport
In setup for your tests, import the plugin and enable it within chai
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
expect(element1).to.be.inViewport
expect(element2).to.not.be.inViewport
The inViewport
assertion currently simply tests the element's
getBoundingClientRect
against the documentElement
's
clientWidth
and clientHeight
. It does not check whether the element is clipped by its parents, if
it has visibility: hidden
, opacity: 0
, is obscured by another element or is otherwise hidden from
view on the screen
If using cypress.io, it may be useful to use a combination of
visible
and inViewport
assertions, which will also check for the above limitations
cy.get('#el').should('be.visible.and.inViewport');