使用eTest5分钟搭建一个性能收集平台

各位伙伴大家好,上期通过eTest 对掘金官网为例做了性能网站首页收集,通过收集到的数据为后续性能优化提供了很好的依据报告,很多伙伴提出了新的问题就是有些网站需要鉴权后才能获取性能报告信息怎么办?

常见的鉴权方式 Puppeteer

我们看到社区也有很多关于自动化性能收集平台搭建的文章,在鉴权这方面主要通过 puppeteer 手动编写入登录信息,然后再结合lighthouse获取性能信息,最后生成测试报告存入数据库,如果对 puppeteerlighthouse 还不了解的,可以移步到官网,这里就不再介绍

javascript 复制代码
import puppeteer from 'puppeteer';
import lighthouse from 'lighthouse';
import fs from 'fs';

(async () => {
  console.log('ok')
  const browser = await puppeteer.launch({
      ignoreDefaultArgs: ['--disable-extensions'],
      headless: false,
      args: ['--no-sandbox', '--disable-setuid-sandbox'],
  });
  const page = await browser.newPage();
  await page.goto('http://xxxx.com/login')
  await page.locator('#userName').fill('name');
  await page.locator('#userPwd').fill('pass');
  await page.locator('#submitBtn').click();


  let options = {
      logLevel: 'info',
      output: 'html',
      port: browser.port,
      onlyCategories: ['performance'],
      disableStorageReset: true, // 禁止在运行前清除浏览器缓存和其他存储 API
      // audits: ['first-contentful-paint']
      formFactor: 'desktop',
      throttling: {
        rttMs: 40,
        throughputKbps: 10 * 1024,
        cpuSlowdownMultiplier: 1,
        requestLatencyMs: 0, // 0 means unset
        downloadThroughputKbps: 0,
        uploadThroughputKbps: 0
      },
      screenEmulation: {
        mobile: false,
        width: 1350,
        height: 940,
        deviceScaleFactor: 1,
        disabled: false
      },
      emulatedUserAgent:
        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4590.2 Safari/537.36 Chrome-Lighthouse'
    };
  

  const runnerResult = await lighthouse('http://xxxx.com/home/', options,undefined,page);

  const reportHtml = runnerResult.report;
  fs.writeFileSync('lhreport.html', reportHtml);
  console.log('Report is done for', runnerResult.lhr);
  console.log('Performance score was', runnerResult.lhr.categories.performance.score * 100);
  await browser.close();

})();

这种方式有一个弊端就是前端开发修改了登录的布局结构,之前编写的登录方式就需要重新录制,其实是极其不太友好,而且如果需要测试不同的项目就需要录制不同的登录信息;如果没有编码功底的小伙伴来说做自动化收集也有很大障碍,

eTest鉴权

那怎么做到操作简单使用方便呢?这对 eTest 来说,可能有其天然优势,首先我的先了解一下 eTest 工作方式,其实就是录制你在网站的操作行为,然后在回放出来,工具在回放过程,没有人类的判断行为,所以就有了机器可以识别的断言;性能收集平台也是一个回放过程,登录鉴权对 eTest 来说,就是回放你录制行为,如果对 eTest 不太了解的小伙伴,可以看下 专栏文章,然后就是怎么收集性能数据,这个也难不倒 eTest,本次我们提供了两种鉴权方式

方式一

eTest 使用的方式之一正常录制当前的登录信息,然后找到要录制的页面,鼠标右键选择eTest ,然后选择性能收集,把录制好的脚本导到工具,点击全局配置,开启设置缓存点击运行,eTest 会打开一个浏览器运行录制的登录信息,回放检测到获取性能收集操作时,lighthourse 会打开一个新的窗口信息,把缓存信息塞进来,然后再次打开需要收集信息的网址,就可以收集网站性能信息了。

方式二

为了兼容有些登录需要手机验证码,或者需要输入图片验证码、滑动验证码......我们针对这种测试情况,也提供了一种更简单的操作,塞入缓存的方式,在录制测试脚本时需要保证你录制的网址处于登录状态,然后再打开录制脚本录制,把录制好的脚本导到工具,点击全局配置,开启设置缓存点击运行,也可以成功鉴权

把录制的脚本导入 eTest 内然后可以先测试一波,没有问题后配置一下无头模式,这样下次跑自动化,就不会在打扰到认真开发的你,然后在配置一下定时任务,这样一个简单的自动化性能收集平台就做好了,使用eTest后,是不是超级简单,不用费时费力的花大把时间写代码,学习各种技能,找运维申请服务器搭建一个自动化平台,一个工具就可以完成一个自动化性能收集平台的搭建,开发者只需要简单的了解eTest工具使用,剩下的大把时间只需要关注性能报告的分析和优化.

本次演示功能都是最近的版本更新功能,请大家下载最新的版本 v1.1.21,在使用过程如果有什么问题,或者有更好的建议,可以联系反馈👇👇👇,后续会持续维护

欢迎大家去体验一下探索的乐趣👉 乐趣链接eTest,也欢迎大家给个star,⭐️⭐️⭐️有想法可以留言,一定在第一时间回复📱📱📱欢迎骚扰

相关推荐
HelloGitHub19 分钟前
这款开源调研系统越来越“懂事”了
前端·开源·github
袁煦丞2 小时前
群晖NAS FTP远程文件仓库全球访问:cpolar内网穿透实验室第524个成功挑战
前端·程序员·远程工作
堆栈future14 小时前
我的个人网站上线了,AI再一次让我站起来了
程序员·llm·aigc
NocoBase14 小时前
6 个替代 Jira 的开源项目管理工具推荐
低代码·开源·github
大模型教程15 小时前
AI Agent 发展趋势与架构演进
程序员·llm·agent
算家计算15 小时前
一站式高质量数字人动画框架——EchoMimic-V3本地部署教程: 13 亿参数实现统一多模态、多任务人体动画生成
人工智能·开源
ai产品老杨16 小时前
驱动物流创新与协同,助力物流行业可持续发展的智慧物流开源了
人工智能·开源·音视频·能源
AI大模型16 小时前
无所不能的Embedding(01) - 词向量三巨头之Word2vec模型详解&代码实现
程序员·llm·agent
程序员鱼皮17 小时前
扒了下 Cursor 的提示词,被狠狠惊艳到了!
计算机·ai·程序员·大模型·互联网·编程