I like the chrome devtools performance tab information, but I want to be able to record the performance profile during an automated functional test. I can execute javascript to get initial load performance data (window.performance), and what I'm looking for is something that like to get Performance profile information. Simple things like the duration of a network calls and profile summary.

Something like:

events =[
  { type: Network request,
    URL: someURL,
    Duration: 431.43 ms,
    Request Method: POST,
    Priority: High,
    Mime Type: application/json,
    Encoded Data: 544 B,
    Decoded Body: 50 B,
    Initiator: JavascriptInsert.js:49
  },
  {
    type: Network request,
    URL: someOtherURL,
    Duration: 81.50 ms,
    Request Method: POST,
    Priority: High,
    Mime Type: text/plain,
    Encoded Data: 260 B,
    Initiator: angular.js:10514  
  }
]

and

summary= {
  Loading: 2.5ms,
  Scripting: 587.6ms,
  Rendering: 77.6ms,
  Painting: 52.5ms,
  Other: 109.3ms,
  Idle: 3040.1ms
}

I like the chrome devtools performance tab information, but I want to be able to record the performance profile during an automated functional test. I can execute javascript to get initial load performance data (window.performance), and what I'm looking for is something that like to get Performance profile information. Simple things like the duration of a network calls and profile summary.

Something like:

events =[
  { type: Network request,
    URL: someURL,
    Duration: 431.43 ms,
    Request Method: POST,
    Priority: High,
    Mime Type: application/json,
    Encoded Data: 544 B,
    Decoded Body: 50 B,
    Initiator: JavascriptInsert.js:49
  },
  {
    type: Network request,
    URL: someOtherURL,
    Duration: 81.50 ms,
    Request Method: POST,
    Priority: High,
    Mime Type: text/plain,
    Encoded Data: 260 B,
    Initiator: angular.js:10514  
  }
]

and

summary= {
  Loading: 2.5ms,
  Scripting: 587.6ms,
  Rendering: 77.6ms,
  Painting: 52.5ms,
  Other: 109.3ms,
  Idle: 3040.1ms
}

• javascript
• google-chrome
• google-chrome-devtools

• 1 These look like good starting points: developer.chrome./extensions/devtools and developer.chrome./devtools/docs/integrating – Robert Harvey Commented Nov 15, 2017 at 20:37
• Sure, window.performance is your friend. – Bergi Commented Nov 15, 2017 at 20:42
• @Bergi window.performance tells you the "inital" load of the page. For an Angular / SPA, it doesn't give you any details about any of the Angular service calls. – Matt Westlake Commented Nov 15, 2017 at 21:11
• 2 @MattWestlake performance.getEntriesByType("resource") should get you the details you're looking for. I'm not talking about performance.navigation or performance.timing – Bergi Commented Nov 15, 2017 at 21:13
• @Bergi that wasn't exactly what I was looking for but it's a good start. Now If you know of anyway I can get the breakdown of painting vs downloading etc. that would be everything I need. – Matt Westlake Commented Nov 16, 2017 at 20:14

2 Answers 2

The durations of network calls and similar details are available in the window.performance interface as well. You can use performance.getEntriesByType("resource") to get the entries for all requests that your page made.

If you are using Selenium, use browser.get_log to obtain all performance logs. My solution uses Python, but it should be similar for any supported language.

First, set up headless Chrome:

from selenium import webdriver
from selenium.webdriver.chrome.options import Options

chrome_options = webdriver.ChromeOptions()
chrome_options.set_headless(True)

# for possible entries refer to current implementation at
# https://chromium.googlesource./chromium/src/+/master/chrome/test/chromedriver/capabilities#372
perfLogPrefs = {
    "traceCategories": "toplevel,disabled-by-default-devtools.timeline.frame,blink.console,disabled-by-default-devtools.timeline,benchmark"
}
chrome_options.add_experimental_option("perfLoggingPrefs", perfLogPrefs)

desired_capabilities = chrome_options.to_capabilities()
desired_capabilities['loggingPrefs'] = {
    "browser": "ALL",  # use this for console.log output, and obtain later
    "performance": "ALL",
}

browser = webdriver.Chrome(
    chrome_options=chrome_options,
    desired_capabilities=desired_capabilities)

After the tests are finished, obtain logs using get_log and extract the entries:

# based more or less on
# https://sites.google./a/chromium/chromedriver/logging/performance-log#TOC-Collecting-Log-Entries
import json
with open(base_filename + '.perf.log', 'w') as f:
    logs = browser.get_log('performance')
    f.write('[')
    add_ma = False
    for entry in logs:
        if add_ma:
            f.write(',\n')
        message = json.loads(entry['message'])['message']
        json.dump(message['params'], f)
        add_ma = True
    f.write(']')

The entries are similar to ones described in Trace Event Format documentation. However, I can't figure out the proper file format to load it later in Chrome DevTools Performance tab. I get an error:

Malformed timeline data: TypeError: Cannot read property 'split' of undefined

If someone manages to load that in Chrome, please update my answer (or post answer in How to visualize log of chrome DevTool protocol messages?).