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');