通过 selenium 进行浏览器性能测试

问题描述

我们正在使用 protractor 来测试内部 AngularJS 应用程序.

We are using protractor for testing internal AngularJS applications.

除了功能测试外,我们还借助 protractor-perf 检查性能回归它基于 nodejs browser-perf 库.因为,性能是一项功能".

Besides functional tests, we check for performance regressions with the help of protractor-perf which is based on nodejs browser-perf library. Because, "Performance is a feature".

使用 protractor-perf 我们可以在进行浏览器操作时测量和断言不同的性能特征,例如:

With protractor-perf we can measure and assert different performance characteristics while making browser actions, for example:

browser.get('http://www.angularjs.org');

perf.start(); // Start measuring the metrics
element(by.model('todoText')).sendKeys('write a protractor test');
element(by.css('[value="add"]')).click();
perf.stop(); // Stop measuring the metrics 

if (perf.isEnabled) { // Is perf measuring enabled ?
    // Check for perf regressions, just like you check for functional regressions
    expect(perf.getStats('meanFrameTime')).toBeLessThan(60); 
};

<小时>

现在,对于另一个内部应用程序,我们有一组用 Python 编写的基于硒的测试.


Now, for an another internal application we have a set of selenium-based tests written in Python.

是否可以使用 selenium-python 检查性能回归,或者我应该使用 protractor 重写测试以便能够编写浏览器性能测试?

Is it possible to check for performance regressions with selenium-python, or should I rewrite the tests using protractor to be able to write browser performance tests?


解决方案

有可能更接近 browser-perf 正在做什么 通过收集 chrome 性能日志 并分析它们.

There is a possibility to get closer to what browser-perf is doing by collecting the chrome performance logs and analyzing them.

要获取性能日志,打开performancecode> 通过调整 loggingPrefs 所需的功能来记录日志:

To get performance logs, turn on performance logs by tweaking loggingPrefs desired capability:

from selenium import webdriver
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities

caps = DesiredCapabilities.CHROME
caps['loggingPrefs'] = {'performance': 'ALL'}
driver = webdriver.Chrome(desired_capabilities=caps)

driver.get('https://stackoverflow.com')

logs = [json.loads(log['message'])['message'] for log in driver.get_log('performance')]

with open('devtools.json', 'wb') as f:
    json.dump(logs, f)

driver.close()

此时,devtools.json 文件将包含一堆跟踪记录:

At this point, devtools.json file would contain a bunch of trace records:

[
  {
    "params": {
      "timestamp": 1419571233.19293,
      "frameId": "16639.1",
      "requestId": "16639.1",
      "loaderId": "16639.2",
      "type": "Document",
      "response": {
        "mimeType": "text/plain",
        "status": 200,
        "fromServiceWorker": false,
        "encodedDataLength": -1,
        "headers": {
          "Access-Control-Allow-Origin": "*",
          "Content-Type": "text/plain;charset=US-ASCII"
        },
        "url": "data:,",
        "statusText": "OK",
        "connectionId": 0,
        "connectionReused": false,
        "fromDiskCache": false
      }
    },
    "method": "Network.responseReceived"
  },
  {
    "params": {
      "timestamp": 1419571233.19294,
      "encodedDataLength": 0,
      "requestId": "16639.1"
    },
    "method": "Network.loadingFinished"
  },
  ..
]

现在的问题是,如何处理它.

Now, the question is, what to do with it.

最初建议在 Google 测试自动化会议期间的一个选项是提交记录到 webpagetest.org.here 有一个 in java 示例,但是,目前,我没有运气在 Python 中实现它.

One option that was initially suggested during the Google Test Automation Conference is to submit the logs to webpagetest.org. There is an example in java available here, but, at the moment, I had no luck implementing it in Python.

理论上,webpagetest.org 生成的 UI 报告应该是这样的:

In theory, the UI report generated by webpagetest.org would look like this:

它们还提供 JSON/XML 和其他可以进一步分析的格式的指标.

They also provide the metrics in JSON/XML and other formats that can be further analyzed.

这真的很重要,感谢 Vivek Singh 的指点评论.

This is really something, thanks to Vivek Singh for the pointing comment.

browser-perf 还使用日志记录功能来获取跟踪日志并分析数据.

browser-perf also uses the logging functionality to pick up the tracing logs, and analyzes the data.

相关文章