如何等待元素的转换

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);
        });
      });
    });
  }):

​

你好!我的测试应该检查“蜘蛛”元素的位置。但是如果没有cy.wait(1000)，它总是失败的，因为过渡时间是1s。如何等待蜘蛛的过渡结束后，才检查实际位置？

Answer 1

您可以让Cypress通过将.then()更改为.should()来重试期望。

我还会更改获取元素的顺序，因为.should()只会重试前面的命令。

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);
      });
  });
});

同样适用于可触发的转换，我用一个悬停转换(使用柏树-真实事件)进行了测试。

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

BTW您可能需要在像素上使用+/-。

Answer 2

点击元素安全吗？如果是这样的话，首先与它交互可能会触发Cypress等待动画。

cy.get('.spider').click().then(($spider) => {

我的推理：https://docs.cypress.io/guides/core-concepts/interacting-with-elements.html#Animations

Cypress将自动确定一个元素是否有动画，并等待直到它停止。