.should('not.be.visible') fails when elem out of viewport

Current behavior:

cy.get().should('not.be.visible')

fails even when DOM element is not in viewport.

It seems I’m not the only one reporting this behavior.

Desired behavior:

Acc to doc, only actionable commands should autoscroll DOM to viewport.

How to reproduce:

// ensure small viewport
cy.viewport( 999, 200 );
// ensure scrollbar is disabled, for good measure (though it doesn't seem Cypress cares)
cy.window().then( window => {
    window.$("body").css("overflow-y", "hidden");
});
// manually test for whether elem is out of viewport -- PASSES
cy.get(".elem").first().then( $el => {

    const bottom = Cypress.$( cy.state("window") ).height();
    const rect = $el[0].getBoundingClientRect();

    expect( rect.top ).to.be.greaterThan( bottom );
    expect( rect.bottom ).to.be.greaterThan( bottom );
    expect( rect.top ).to.be.greaterThan( bottom );
    expect( rect.bottom ).to.be.greaterThan( bottom );
});
// FAILS
cy.get(".elem").first().should("not.be.visible");

• Operating System: win7x64
• Cypress Version: 1.0.3

[AElmoznino]

For readers in the future, you can add custom commands in cypress/support/commands.js like so:

Cypress.Commands.add('isNotInViewport', element => {
  cy.get(element).then($el => {
    const bottom = Cypress.$(cy.state('window')).height()
    const rect = $el[0].getBoundingClientRect()

    expect(rect.top).to.be.greaterThan(bottom)
    expect(rect.bottom).to.be.greaterThan(bottom)
    expect(rect.top).to.be.greaterThan(bottom)
    expect(rect.bottom).to.be.greaterThan(bottom)
  })
})

Cypress.Commands.add('isInViewport', element => {
  cy.get(element).then($el => {
    const bottom = Cypress.$(cy.state('window')).height()
    const rect = $el[0].getBoundingClientRect()

    expect(rect.top).not.to.be.greaterThan(bottom)
    expect(rect.bottom).not.to.be.greaterThan(bottom)
    expect(rect.top).not.to.be.greaterThan(bottom)
    expect(rect.bottom).not.to.be.greaterThan(bottom)
  })
})

and then in your tests use it like so:

    cy.isNotInViewport('[data-cy=some-invisible-element]')
    cy.isInViewport('[data-cy=some-visible-element]')

[thomaseizinger]

Inspired by @Whassup, I rewrote the command as an assertion. Simply paste the following into a cypress/support/assertions.js file and do import './assertions'; in your cupress/support/index.js file.

const isInViewport = (_chai, utils) => {
  function assertIsInViewport(options) {

    const subject = this._obj;

    const bottom = Cypress.$(cy.state('window')).height();
    const rect = subject[0].getBoundingClientRect();

    this.assert(
      rect.top < bottom && rect.bottom < bottom,
      "expected #{this} to be in viewport",
      "expected #{this} to not be in viewport",
      this._obj
    )
  }

  _chai.Assertion.addMethod('inViewport', assertIsInViewport)
};

chai.use(isInViewport);

Usage:

cy.get("button").should("be.inViewport");