sitespeed.io——前端性能测试搞起来

上一篇 / 下一篇  2021-05-17 15:44:36 / 个人分类：性能测试

查看( 495 ) / 评论( 0 ) / 评分( 0 / 0 )
　　昨天bug改完了之后，测试小姐姐让我帮她看看sitespeed.io这个前端性能测试工具，立马尝试一下！

　　工具简介
　　sitespeed.io是Jonathan Lee 发布的一款可监视和衡量网站前端性能的开源工具,可帮助您根据coach的性能最佳实践建议，使用导航计时API、用户计时和可视化指标（FirstVisualChange、SpeedIndex和LastVisualChange）收集浏览器指标，帮助您监控、分析和优化网站速度和性能。

　　优势
　　·开源（可以本地部署以满足内网测试要求）
　　·支持事务模拟（可以通过它提供的api模拟登录，点击事件等操作）
　　·自动性能分析（满足线上监控）
　　·可以多浏览器测试

　　工作原理
　　sitespeed.io旨在检测和提高web页面的性能。它拥有一套插件，如Coach、Broswertime、Chrome-HAR等，帮助sitespeed搜集浏览器debug状态下的数据，并基于网站最佳实践给出相应的打分和意见，最后把数据可视化展示。
　　sitespeed.io评价网页的主要依据是：浏览器的网络请求和TimeLine中的Time Event。
　　Browsertime插件会使用Selenium NodeJS操控浏览器，让浏览器加载指定的页面，并执行配置的JS代码，采集Timeline中各个Time Event触发的时间数据，同时借助Chrome-HAR插件把页面中HTTP请求过程存储在.har文件中，为了便于分析，sitespeed.io利用PageXray插件将.har文件转换成JSON文件；然后Coach插件根据相应的指标进行打分，并提出改进意见！

　　如何使用
　　关于如何使用官网提供了两种方式，一种是使用Docker，一种是npm，官网又说，如果你使用npm的话，你就可以在浏览器窗口中看到发生了什么。或者如果你使用Docker，你可以添加browsertime. videparameters .debug当你录制视频。这样你就可以获得所有脚本的完整视频(但没有视觉指标)！这样的话，当然选择npm了，哈哈哈哈！
　　当然你也可以使用Docker。

　　Docker
docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:17.2.0 https://www.sitespeed.io/

　　npm
　　安装
npm install -g sitespeed.io

　　使用
sitespeed.io https://www.sitespeed.io/ -b chrome

　　执行命令之后，你会发现，它打开了三次www.sitespeed.io 这个网站，这是因为它默认会执行三次， 你也可以自己定义语句让它执行一次，如下：

　　执行完毕之后，它会给你生成一个报告，会告诉你报告的地址下图红框内是报告的地址：

　　我们找到这个地址就可以看到报告啦,点击index.html,你就能看到一个完整的报告！如下：

　　你以为这样就完事了，当然没有，实际工作中，哪有这样简单，都是需要登录的好不好！咋整？sitespeed.io支持你自己写代码，麻溜的写起来，以登录为例！
　　首先，你得新建一个 login1.js文件，然后，写起来：
module.exports = async function (context, commands) {
  // 括号写你要测试的网站地址
  await commands.navigate("https://a.b.com/");

  try {
  
    // 登录你要测试的网站，用户名007，密码123456，
    
    //await commands.addText.byId('login', 'wpName1');
    //await commands.addText.byId('password', 'wpPassword1');
    //上面两行是官网给的例子，由于很多情况我们并不知道元素的id，所以我用了byXpath，实际使用中，请替换为自己网站登录框的Xpath
    
    await commands.addText.byXpath("007",'//input[@name="username"]');
    await commands.addText.byXpath("123456", '//input[@type="password"]');
    
    //截个图，截图名称取为1，当然也可以不截图
    await commands.screenshot.take("1");


    await commands.measure.start("login");
   
   //这里是点击登录按钮，同样用的byXpath
    await commands.click.byXpath(
      '//*[@id="root"]/main/section[2]/div/div[1]/div/div[4]/button'
    );
    
    //又截了个图，可以不要
    await commands.screenshot.take("2");
    
    //等待了5秒，可以不要
    await commands.wait.byTime(5000);


    //打个日志，日志可以在命令行里面看到
    context.log.info("我是一般日志");
    context.log.error("我是错误日志");
    
    
    // Stop and collect the metrics
    return await commands.measure.stop();

  } catch (e) {
    // We try/catch so we will catch if the the input fields can't be found
    // The error is automatically logged in Browsertime an rethrown here
    // We could have an alternative flow ...
    // else we can just let it cascade since it caught later on and reported in
    // the HTML
    throw e;
  }
};

　　代码准备完毕啦，接下来，我们把这个js放到跟sitespeed-result这个文件夹同级的目录里，我的sitespeed-result文件夹就在桌面，所以我就把 login1.js放桌面啦！
sitespeed.io  -n 1 -v  login1.js --multi

　　然后，命令执行起来：
module.exports = async function (context, commands) {
  // 括号写你要测试的网站地址
  await commands.navigate("https://a.b.com/");

  try {
  
    // 登录你要测试的网站，用户名007，密码123456，
    
    //await commands.addText.byId('login', 'wpName1');
    //await commands.addText.byId('password', 'wpPassword1');
    //上面两行是官网给的例子，由于很多情况我们并不知道元素的id，所以我用了byXpath，实际使用中，请替换为自己网站登录框的Xpath
    
    await commands.addText.byXpath("007",'//input[@name="username"]');
    await commands.addText.byXpath("123456", '//input[@type="password"]');
    
    //截个图，截图名称取为1，当然也可以不截图
    await commands.screenshot.take("1");


    await commands.measure.start("login");
   
   //这里是点击登录按钮，同样用的byXpath
    await commands.click.byXpath(
      '//*[@id="root"]/main/section[2]/div/div[1]/div/div[4]/button'
    );
    
    //又截了个图，可以不要
    await commands.screenshot.take("2");
    
    //等待了5秒，可以不要
    await commands.wait.byTime(5000);


    //打个日志，日志可以在命令行里面看到
    context.log.info("我是一般日志");
    context.log.error("我是错误日志");
    
    
    // Stop and collect the metrics
    await commands.measure.stop();


    //再打开一个页面
    await commands.measure.start(
      'https://a.b.com/recommend/fields'
    );
    //等待了4秒
    await commands.wait.byTime(4000);
    
    //再打开一个页面
    await commands.measure.start(
      'https://a.b.com/marketingCenter/officialAccounts/fans'
    );
    await commands.wait.byTime(4000);
    return commands.measure.start('https://a.b.com/loyaltyprogram/memberInsight/list');
    
  } catch (e) {
    // We try/catch so we will catch if the the input fields can't be found
    // The error is automatically logged in Browsertime an rethrown here
    // We could have an alternative flow ...
    // else we can just let it cascade since it caught later on and reported in
    // the HTML
    throw e;
  }
};

　　然后，你会发现sitespeed会帮你打开你要测试的网站，然后自动帮你写入用户名和密码，完成登录，最后生成一个报告！
　　当然，这还没完，登录完成之后，我们还想，点击每个页面，看看每个页面的性能，所以，我们这样写：　　然后，整个网站页面性能就有啦。
　　赶紧去测试下，看看你们家网站的性能吧!

收藏 举报

TAG: 性能测试工具

 

评分：0

我来说两句

Open Toolbar