Cypress check element position

Question

Using Cypress.io, is there a way to check an element's position? I have an issue where in certain cases, there is a bug where scrollbars are added and removed continuously, causing the edge of the page to "jitter", and I'd like to be able to write a test to see if that's happening by asserting that the position of an element is not changing after showing up. I haven't seen anything in the documentation about such an assertion.

Answer 1

I think I figured it out; something like:

let initialPosition;

cy.get('button').then(
  ($button) => {
    initialPosition = $button.position();
  }
);

cy.wait(100);

cy.get('button')
  .should(
    ($button) => {
      expect($button.position()).deep.equal(initialPosition);
    }
  );
});

Doesn't really work, but it's the test I want.

Answer 2

Yes, you can check CSS Values By Cypress

Examples:

.should('have.css', 'float', 'right');

.should('have.css', 'right', '10px');

.should('have.css', 'top', '50%');