puppeteer等自动化测试框架如何判断CSS动画结束animation end

在编写自动化测试脚本时，经常会碰到HTML元素因动画而移动而无法点击或点击到错误元素上的问题。简单的话可以通过添加延时等待动画结束，但不同浏览器性能有差异，动画完成时间不一样。此时会造成测试脚本偶尔失败。

方案一：animationend

如果HTML元素采用了CSS动画，可以通过 animationend 侦听动画结束

const waitForAnimationEvent = async (selector, _page = page) => {
  return _page.$eval(selector, el => new Promise((res, _) => {
    const onEnd = () => {
      el.removeEventListener('animationend', onEnd)
      res()
    }
    el.addEventListener("animationend", onEnd)
  }))
}

这种方法必须在有CSS动画的元素上才起作用，如容器等，对于子组件等不起作用。而且必须在动画完成之前使用。

方案二：判断元素位置变化

可以使用 getBoundingClientRect 获取元素的大小和位置，下面的脚本会50毫秒检测一下元素位置，如果不变则认为动画结束。

const sleep = async (time) => {
  return new Promise(resolve => setTimeout(resolve, time))
}

const waitForAnimation = async (selector, _page = page) => {
  await _page.waitForSelector(selector)
  
  let oldRect = {}
  let tryNum = 0

  const checkPosition = async () => {
    const rect = await _page.$eval(selector, ele => {
      const rect = ele.getBoundingClientRect()
      return {
        x: rect.x,
        y: rect.y,
        w: rect.width,
        h: rect.height,
      }
    })

    console.log(selector, rect)

    if ( rect.x !== oldRect.x
      || rect.y !== oldRect.y
      || rect.w !== oldRect.w
      || rect.h !== oldRect.h) {
      oldRect = rect
      if (tryNum++ < 10) {
        await sleep(50)
        await checkPosition()
      }
    }
  }

  await checkPosition()
}