简介
wptgo是一款基于Web测速工具(WebPageTest)的npm包，提供了一系列可编程接口，方便前端开发人员抓取有关页面性能和用户体验方面的数据。本教程将为您介绍如何使用wptgo包，让您更快速、更准确地获取所需数据。
安装
我们可以使用npm快速安装wptgo包，命令如下：
npm install wptgo --save-dev
引入
要使用wptgo包的功能，首先需要先import或require它。示例代码如下：
import wptgo from 'wptgo';
//或
const wptgo = require('wptgo');使用
初始化
在使用wptgo包的任何功能之前，我们必须先初始化它。初始化时需要提供WebPageTest服务器的域名和API key。新用户可以在WebPageTest的官方网站上注册并获取API key，网址是：https://www.webpagetest.org/getkey.php 。
初始化如下所示：
let wpt = new wptgo('www.webpagetest.org', 'APIKey');getTestInfo
使用getTestInfo方法可以获取有关特定测试的元数据。
wpt.getTestInfo('testId',(err, data)=>{
if (err) {
// 处理错误
} else {
// 处理数据
}
})getTestResults
getTestResults方法用于获取特定测试的详细结果。我们需要指定要获取的测试的id和所需数据的类型。有关所支持的数据类型的详细信息，请参见WebPageTest API文档。
以下代码演示如何获取有关测试id为testId结果的详细信息：
-- -------------------- ---- -------
---------------------------- -
---- -- -------------
-------- ----- -- ------
--------- ----- -- --------
---------- ---- -- --------
-- ----- ----- -- -
-- ----- -
-- ----
- ---- -
-- ----
-
--getWaterfallImage
使用getWaterfallImage方法可以获取特定测试的瀑布图。以下代码展示如何获取测试id为testId的第一次运行瀑布图。
-- -------------------- ---- -------
------------------------------- -
---- -- -------------------
---------- ------------ ----------------------
------ ---- ------
------- --- ------
-- ----- ---------- -- -
-- ----- -
-- ----
- ---- -
-- ----
-
--getScreenshotImage
使用getScreenshotImage方法可以获取特定测试的页面截图。
以下代码演示如何获取测试id为testId的第一次运行的最后一步截图，并指定图像的宽度为320像素。
-- -------------------- ---- -------
-------------------------------- -
---- -- -------------------
----- --- ------------------
------ ---- ------
----- ------------------ -------------------------
-- ----- ---------- -- -
-- ----- -
-- ----
- ---- -
-- ----
-
--getTimelineData
使用getTimelineData方法可以获取特定测试的时间轴数据。时间轴数据是有关浏览器渲染的详细信息，如DOM构建、布局和绘图。
wpt.getTimelineData('testId', (err, timelineData) => {
if (err) {
// 处理错误
} else {
// 处理数据
}
})submitTest
使用submitTest方法可以启动一个新测试。以下代码展示如何提交具有“www.google.com”作为测试url的新测试请求。该方法返回测试id，供以后的测试结果检索使用。
wpt.submitTest({
url: 'www.google.com', //测试url
location: 'Dulles:Chrome', //测试所在位置及浏览器类型
runs: 3, //运行次数
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/600671178dd3466f61ffe67b) ，转载请注明来源
[https://www.javascriptcn.com/post/600671178dd3466f61ffe67b](https://www.javascriptcn.com/post/600671178dd3466f61ffe67b)