How to cypress wait for transition of the element

Question

describe('Spider application', () => {
  before(() => {
    cy.visit('/');
  });

  it('should center the spider by left border', () => {
      cy.get('.spider').then(($spider) => {
        cy.get('.wall').then(($wall) => {
          const spider = $spider.get(0);
          const wall = $wall.get(0);

          const spiderLeft = spider.getBoundingClientRect().left;
          const spiderLeftAbs = (wall.clientWidth / 2) + (wall.offsetLeft + 10)
          - (spider.width / 2);

          expect(spiderLeft).to.equal(spiderLeftAbs);
        });
      });
    });
  }):

Hello! My test should check the position of the element 'spider'. But without cy.wait(1000) it always fails, as the time of transition is 1s. How to wait for the end of the spider's transition and only after check the actual position?

Answer 1

You can have Cypress retry the expectation by changing .then() to .should().

I would also change the order you obtain the elements, since .should() retries the preceding command only.

it('should center the spider by left border', () => {
  cy.get('.wall').then(($wall) => {
    cy.get('.spider')
      .should(($spider) => { // repeat .get(spider) until except succeeds, or times out
        ...
        expect(spiderLeft).to.equal(spiderLeftAbs);
      });
  });
});

Also works with triggerable transitions, I tested with a hover transition (using cypress-real-events).

<style type="text/css">
  .target {
    font-size: 14px;
    transition: font-size 1s 1s;
  }
  .target:hover {
    font-size: 36px;
  }
</style>

BTW you may need to use some +/- on the pixels.