← 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