动画时与Percy和Cypress的Flaky快照

Question

我在一个应用程序中添加了几个动画，珀西在柏树测试中拍摄快照。

我正在想办法在拍摄快照之前等待动画完成。

我知道cypress已经根据文档默认这样做了。但是，它似乎只等待元素对于ACTION是安全的，而不是常规断言。

让我们以我的logo动画为例。它从左边滑到中间。片状测试在其路径中的任何位置捕获快照。

现在，只是为了测试，我让cypress点击徽标，然后Percy工作正常，快照只在动画结束时拍摄。

在这种情况下，它是好的，因为我的标志没有一个相关的动作。但是，如果点击它有一个重定向呢?

如何在不使用动作的情况下告诉cypress等待?

Answer 1

您能断言幻灯片在快照之前已经完成吗?

这将涉及element.getBoundingClientRect()和手动检查位置。

it('waits for logo to slide to center', 
{viewportWidth: 1000},    // ensure fixed, appropriate viewport for the test
() => {
cy.get('#myLogo')
.should($logo => {    // using should will retry until animation finishes
const left = $logo[0].getBoundingClientRect().left
expect(left).to.eq(450)
})
// snapshot now
}
)

我在拖放场景中这样做，但发现数字有舍入误差。

我已经添加了chai-almost来整理。

const chaiAlmost = require('chai-almost')
chai.use(chaiAlmost(1))        // allowed amount of variance in equality is 1
...
expect(left).to.almost.eq(450)

---

最简单的方法是在快照前添加硬cy.wait(animation-time-in-ms)。

它不会对测试运行时产生影响，因为你需要在测试完成之前完成动画。