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

原创

SilenceLi1993 2023-08-11 11:58:12 ©著作权

©著作权归作者所有：来自51CTO博客作者SilenceLi1993的原创作品，请联系作者获取转载授权，否则将追究法律责任

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

常见的鉴权方式 Puppeteer

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

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 5分钟搭建一个性能收集平台_缓存

方式二

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

使用eTest 5分钟搭建一个性能收集平台_程序员_02

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

使用eTest 5分钟搭建一个性能收集平台_开源_03