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


发布者 ourjs  发布时间 1651547517567
关键字 前端  css 

在编写自动化测试脚本时,经常会碰到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()
}








 热门文章 - 分享最多
  1. Kubernetes/k8s/docker常用命令实例简单介绍教程
  2. 用Node.JS写一个简单版的类似pm2\forever的守护进程并记录错误日志
  3. MongoDB起步入门教程使用Node.JS的Promise方式查找数据
  4. Node.JS连接MySQL数据库执行增删改查提示ER_NOT_SUPPORTED_AUTH_MODE: Client does not support;如何在@mysql/xdevapi执行SQL
  5. NodeJS在Windows上使用OLE/COM/ActiveXObject对象连接ADODB数据库,操作Application.Excel、运行VBA宏并另存为网页
  6. CSS Grid网格入门实例教程: 强大的动态布局
  7. node.js中async/await不用try/catch,使用error first或go语言方法处理异常
  8. 网站集成百度、Bing必应搜索引擎,在网页中实现站内全文搜索
  9. React Hooks入门教程九:在React中集成使用Vue实现数据双向绑定,手动配置Webpack和Babel
  10. node.js性能压力测试入门教程:wrk和loadtest安装使用

 相关阅读
  1. JavaScript和node.js内存泄露的原因和避免方法及Chrome调试工具使用教程
  2. JavaScript设置对象属性只读不可修改、不可枚举、不可删除:Object.defineProperty
  3. CSS教程:图片使用混合模式和颜色叠加filter滤镜,改变PNG图标颜色
  4. CSS教程:如何设置自动显示隐藏scrollbar滚动条,自定义外观样式/宽度,附demo示例大全
  5. JavaScript判断字符串是否为数字类型:Number.isInteger、isNaN、正则表达式比较
  6. webpack前端项目调试环境安装入门:webpack.config.js禁用UglifyJs只合并JavaScript不压缩混淆代码
  7. 用CSS实现分页符,控制Web网页打印时自动强制分页:page-break-after教程
  8. SVG矢量图视窗viewBox,嵌套HTML综合实例:建立用户自定义相对坐标系统
  9. 用网页table thead tfoot元素完美控制页眉页脚显示内容打印的简单方式
  10. jQuery用outterHtml获取相对innerHTML父一级包含其自身的html代码内容

  开源的 OurJS
OurJS开源博客已经迁移到 OnceOA 平台。

  关注我们
扫一扫即可关注我们:
OnceJS

OnceOA