← Back to library
Cypressassertionsintermediatev10+

Assert element is in viewport

Confirm an element is actually visible within the browser's current scroll position.

1// Add this reusable command once in cypress/support/commands.js
2Cypress.Commands.add('isInViewport', { prevSubject: true }, (subject) => {
3  const rect = subject[0].getBoundingClientRect();
4  expect(rect.top).to.be.gte(0);
5  expect(rect.bottom).to.be.lte(Cypress.config('viewportHeight'));
6  expect(rect.left).to.be.gte(0);
7  expect(rect.right).to.be.lte(Cypress.config('viewportWidth'));
8  return subject;
9});
10
11// Usage in any test:
12it('CTA button is fully visible without scrolling', () => {
13  cy.visit('/landing');
14  cy.get('[data-testid="cta-button"]').isInViewport();
15});
#viewport#visible#isInViewport#scroll#in-view