如何柏樹等待元素的轉換

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

您可以通過賽普拉斯改變重試的期望.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);
      });
  });
});

也適用於可觸發轉換，我使用懸停轉換進行了測試（使用cypress-real-events ）。

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

順便說一句，您可能需要在像素上使用一些 +/-。

Answer 2

單擊元素是否安全？ 如果是這樣，首先與其交互可能會觸發 Cypress 等待動畫。

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

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

Cypress 會自動確定一個元素是否正在動畫並等待它停止。