Question

我有许多动画元素（通常是通过在JS中设置位置，而不是通过CSS变换），并且我想在它们全部停止时声明其位置。

确定它们是否要进行动画处理的最简单方法是，动画元素的z-index都将为2（我将在后面进行重构以添加data-属性，以使其更加健壮，但是现在就是这样）。

在赛普拉斯文档中，它说断言将自动等待，直到它们通过，但这不是我所看到的行为：

Cypress.Commands.add('getNumberOfMovingElements', () => {
  cy.get(`[data-test-element="square"]`)
    .then(squares => {
      const movingSquares = Array.from(squares).filter(square => square.style.zIndex === '2');
      return movingSquares.length;
    })
});


Cypress.Commands.add('getPosition', () => {
  cy
    .getNumberOfMovingElements().should('be.at.most', 0)
    .etc

这失败了，因为当我叫它时，我有一个移动的方块。我怎样才能等到断言为真？

Answer 1

这是因为保证.then仅被调用一次。 .should可以重试，但不会更改主题。

一种技巧是将.should与.invoke组合在一起：

Cypress.Commands.add('getNumberOfMovingElements', () => {
  cy.get('.someclass')
  .should($el =>
    $el.fn = () => {
      return $el.toArray().filter(el => getZindex(el) === 2)
    })
  .invoke('fn')
})

const getZindex = (el) => {
  const doc = el.ownerDocument
  const zindex = doc.defaultView.getComputedStyle(el).zIndex

  return +zindex
}

我们之所以必须这样做，是因为.invoke可以更改主题，但只能调用该主题上存在的方法（赛普拉斯团队正在努力使该清洁器更干净）

请记住，获取CSS属性的getComputedStyle方法将同时考虑样式表和内联样式。如果您不断收到auto z-index，check this answer here

编辑：我个人将对其进行重构，以实现更好的可重用性（您可以调用该函数，也可以从cy调用该命令）：

const getNumberOfMovingElements = () => {
  Cypress.log({ name: 'GET', message: 'getNumberOfMovingElements' })

  return cy.get('.someclass')
  .should($el =>
    $el.fn = () => {
      return $el.toArray().filter(el => getZindex(el) === 2)
    })
  .invoke('fn')
}

const getZindex = (el) => {
  const doc = el.ownerDocument
  const zindex = doc.defaultView.getComputedStyle(el).zIndex

  return +zindex
}

Cypress.Commands.addAll({prevSubject: false}, { getNumberOfMovingElements })

等待所有元素的z索引小于2

1 个答案: