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

我有许多正在制作动画的元素（通过在JS中手动设置位置，而不是通过CSS转换），我想在它们都停止时断言它们的位置

确定它们是否正在制作动画的最简单方法是，制作动画的元素的z索引都将为2（稍后我将进行重构，添加

数据-

属性，以使其更加健壮，但目前仅此而已）

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

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

---

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

这是因为

保证只调用一次。A
.should
将重试，但不会更改主题

技巧是将
.should
与
.invoke
组合起来：

Cypress.Commands.add（'getNumberOfMovingElements'，（）=>{
cy.get（“.someclass”）
.should（$el=>
$el.fn=（）=>{
返回$el.toArray（）.filter（el=>getZindex（el）==2）
})
.invoke（'fn'））
})
常量getZindex=（el）=>{
const doc=el.ownerDocument
const zindex=doc.defaultView.getComputedStyle（el）.zindex
返回+zindex
}

我们必须这样做，因为
.invoke
可以更改主题，但只能调用主题上存在的方法（cypress团队正在努力使其更清晰）

请记住，获取css属性的
getComputedStyle
方法将同时考虑样式表和内联样式。如果您一直获得
自动
z索引

编辑：就我个人而言，我会对其进行重构，以获得更好的可重用性（您可以调用函数，也可以取消cy的命令）：

const getNumberOfMovingElements=（）=>{
log（{name:'GET'，message:'getNumberOfMovingElements'}）
返回cy.get（'.someclass'）
.should（$el=>
$el.fn=（）=>{
返回$el.toArray（）.filter（el=>getZindex（el）==2）
})
.invoke（'fn'））
}
常量getZindex=（el）=>{
const doc=el.ownerDocument
const zindex=doc.defaultView.getComputedStyle（el）.zindex
返回+zindex
}
addAll（{prevSubject:false}，{getNumberOfMovingElements}）
我认为在
.then（）
中重试机制未激活。您可能会发现它与
[…squares].forEach（sq=>cy.wrap（sq）.its（'zIndex'）.should（'not.eq'，2）
一起工作。