Karate UI自动化：如何检查页面卡顿/超时及验证提交后耗时异常？

基础耗时检测方法 #

• 用Karate内置的karate.timer()函数记录操作前后的时间差，直接和预设阈值对比：

  * def startTime = karate.timer()
  * click('#submit-button') // 触发目标操作
  * def endTime = karate.timer()
  * def elapsedTime = endTime - startTime
  * assert elapsedTime < 5000 // 设定耗时阈值为5秒
  

• 调用浏览器Performance API获取页面加载或操作的关键性能指标，比如页面总加载时间：

  * def timingData = script("return window.performance.timing")
  * def totalLoadTime = timingData.loadEventEnd - timingData.navigationStart
  * assert totalLoadTime < 8000 // 页面加载总时间不超过8秒
  

提交元素后的卡顿验证 #

针对提交操作后的页面卡顿，可从以下维度验证：

• 结合元素等待与时间统计：提交后等待目标状态元素（如成功提示）出现，同时记录从提交到元素出现的耗时，超过阈值则判定异常：

  * def submitStartTime = karate.timer()
  * click('#submit-form') // 提交表单或元素
  * waitFor('#success-alert').timeout(10000) // 最长等待10秒
  * def submitEndTime = karate.timer()
  * def waitElapsed = submitEndTime - submitStartTime
  * assert waitElapsed < 7000 // 提交到状态反馈的耗时不超过7秒
  

• 检测页面帧率（FPS）：卡顿通常伴随帧率骤降，通过浏览器脚本计算一段时间内的帧率，判断是否低于正常水平：

  * def currentFps = script("""
    return new Promise(resolve => {
      let frameCount = 0;
      const start = performance.now();
      const timer = setInterval(() => {
        frameCount++;
        const elapsed = performance.now() - start;
        if (elapsed >= 1000) {
          clearInterval(timer);
          resolve(frameCount / (elapsed / 1000));
        }
      }, 16);
    })
  """)
  * assert currentFps > 20 // 确保帧率不低于20
  

• 捕获长任务（Long Tasks）：页面卡顿往往由超过50ms的长任务引起，通过PerformanceObserver检测这类任务：

  * def longTaskCount = script("""
    return new Promise(resolve => {
      const observer = new PerformanceObserver(list => {
        const tasks = list.getEntries().filter(t => t.duration > 50);
        observer.disconnect();
        resolve(tasks.length);
      });
      observer.observe({ entryTypes: ['longtask'] });
      setTimeout(() => observer.disconnect(), 3000);
    })
  """)
  * assert longTaskCount == 0 // 确保无超时长任务
  

进阶技巧 #

• 全局耗时统计：在BeforeFeature或AfterStep钩子中统一添加时间记录逻辑，自动跟踪所有操作的耗时，批量排查异常。
• 自定义性能标记：在关键操作前后通过performance.mark()添加标记，后续通过performance.getEntriesByName()获取标记间的耗时，精准定位卡顿环节。

内容的提问来源于stack exchange，提问作者Tripti Paliwal