4

I use Selenium and Chrome driver and also enabled performance logging to provide better visibility to problems during the test. Performance log seems to be a json array that includes chrome's DevTool protocol messages. Is there any tool existent that allows me to visualize this log like in Chrome's dev tools tab.

Below is sample entry from the log:

{
"message": {
  "method": "Network.requestWillBeSent",
  "params": {
    "documentURL": "https://******/",
    "frameId": "15976.2",
    "initiator": {
      "type": "other"
    },
    "loaderId": "15976.3",
    "request": {
      "headers": {
        "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8",
        "Upgrade-Insecure-Requests": "1",
        "User-Agent": "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.109 Safari/537.36"
      },
      "initialPriority": "VeryHigh",
      "method": "GET",
      "mixedContentType": "none",
      "url": "https://********/"
    },
    "requestId": "15976.1",
    "timestamp": 80251.314924,
    "type": "Document",
    "wallTime": 1455928917.89989
  }
},
"webview": "D0C1AD9A-D631-4238-9A74-F873A7908EFB"
}
Edward Mehr
  • 651
  • 9
  • 21
  • Depending on how much effort you want to invest, you could use an ELK stack... pipe the JSON to Logstash (https://www.elastic.co/guide/en/logstash/current/input-plugins.html), output it to Elasticsearch, and use Kibana (https://www.elastic.co/products/kibana) to visualise and query it. – Andrew Regan Feb 20 '16 at 13:39
  • I was hopping I didn't have to do heavy work of defining how to visualize it. Specially because chrome has already done that. Only if I could just import it to chrome. I am coppying this log and bunch of other logs and screenshots to a folder on dfs per run for my devs to see result of their tests. It would be awesome if they could just import it into a tool and get the visuals. – Edward Mehr Feb 22 '16 at 19:28
  • Thinking about it, surely this is the same content as the network tab shows? Have you tried exporting a HAR file and visualising that? I have a couple of ideas for that. Does the visualisation have to be automated? – Andrew Regan Feb 22 '16 at 21:24
  • Yes it is exactly the same log, Chrome dev tools use to create network, trace and timeline tabs. Before perf log was available in chrome driver, I used to add a plugin that I wrote to get HAR files. Trying to retire that, now that there is access to dev tool protocol messages. – Edward Mehr Feb 22 '16 at 21:28

2 Answers2

2

Since this data is just the same as what's shown in the Network tab, and that would get exported in a HAR file, there are a couple of options for obtaining that HAR:

  • Browser-independent: what I do myself is use a Proxy server - Browsermob in this case - pipe all Selenium traffic through that, and then use either the REST API or Java code to export the HAR file.
  • Chrome-specific: try this question and this answer.

Perhaps the easiest way to automate the visualisation of the output is to obtain the HAR in string form and paste into http://www.softwareishard.com/har/viewer/. That should give you something that looks very similar to the Network tab, but in a format that's easier to export, screenshot, and print.

My own preferred longer-term solution would be to (a) pipe/push the Chrome DTP JSON messages into Logstash for (b) export to Elasticsearch, and then (c) for Kibana to produce custom visualisations. However, the tool to allow (a) to work doesn't seem to exist yet.

Community
  • 1
  • 1
Andrew Regan
  • 5,087
  • 6
  • 37
  • 73
  • Thanks. But the point is conversion from these log messages to HAR file. I already have a solution for getting HAR files. I wanna retire that now that I can get native chrome dev tool logs. – Edward Mehr Feb 22 '16 at 22:13
  • Did you look at the answer on the other question? I think I've covered all the possibilities: either manipulate all of those events into a standard format like HAR so you can use one of the existing HAR viewers, or else use an event/stream/log-based visualiser like Kibana, which will inevitably need setup + configuring. I can't visualise what other possibilities there are. – Andrew Regan Feb 22 '16 at 22:14
  • Ultimately you need a listener, some kind of data store, and a visualiser. You could write a custom listener and post events to statsd or Carbon for viewing in Graphite or Grafana, but it's same basic solution as my Kibana one. Maybe easier but less flexible? – Andrew Regan Feb 22 '16 at 22:19
  • Yup. I already have the logs in text file at the end of the test. I don't wanna pipe log messages in real time because it creates extra in house dependency that I don't wanna maintain. It feels like there should be already a utility that converts logs to HAR file statically. or just visualizes them. It seems like I should write something myself or create customized reports in Kibana as you suggested. – Edward Mehr Feb 22 '16 at 22:27
  • fwiw - As an alternative to 'a', if you create a simple Chrome extension, that can spit the HAR logs straight at the Elasticsearch REST API, relatively easily. That's what I did. Then I have Logstash consuming that index, performing a few manipulations, such as geolocation and outputting to a new index. It's a work in progress, but it hasn't taken much effort. I'm now working on enriching further to aid with Kibana visualisations for my use case. – Steve Sep 19 '17 at 09:33
1

Please take a look at the Catapult project - "the home for several performance tools that span from gathering, displaying and analyzing performance data."

https://github.com/catapult-project/catapult (repository marked as "archived" because it's a mirror)

You should probably also take a look at the "Trace Event Format" documentation to properly adjust the log entries to the supported format.

tomasz
  • 403
  • 3
  • 16