Tools for measuring UI Performance [closed]

Can anyone suggest a tool to measure the performance of the UI level of a Web App?

I am not looking at Load testing specifically our app only has a max of 5 users at any one time, the metrics I want to be able to automate and rerun are things like Page Load times, the time it takes from clicking a button to an event happening, reaction times for slide out pains etc. We are measuring API performance seperatly and want to be able to determine if slowdown is an API issue or something that can be tidied up in the UI.

Ideally is there something I can combine with Selenium, click a button and then time how long it takes for the expected action to occur. Our Automation Framework is written in Ruby. Our testing is all done on Chrome as it is the only browser used, we have not yet moved to Headless Chrome and ideally don't want to move to Phantom JS.

You can extract the performance data of the UI level of a Web App by accessing Network Panel Data on Google Chrome Developer Tools through Selenium by injecting a JavaScript as follows :

• Selenium-Java Snippet

  driver.get("http://www.google.com");
  System.out.println(driver.getTitle());
  String scriptToExecute = "var performance = window.performance || window.mozPerformance || window.msPerformance || window.webkitPerformance || {}; var network = performance.getEntries() || {}; return network;";
  String netData = ((JavascriptExecutor)driver).executeScript(scriptToExecute).toString();
  System.out.println(netData);
  

• The parameters extracted are as follows :

  connectEnd                 Time when server connection is finished.
  connectStart               Time just before server connection begins.
  domComplete                Time just before document readiness completes.
  domContentLoadedEventEnd   Time after DOMContentLoaded event completes.
  domContentLoadedEventStart Time just before DOMContentLoaded starts.
  domInteractive             Time just before readiness set to interactive.
  domLoading                 Time just before readiness set to loading.
  domainLookupEnd            Time after domain name lookup.
  domainLookupStart          Time just before domain name lookup.
  fetchStart                 Time when the resource starts being fetched.
  loadEventEnd               Time when the load event is complete.
  loadEventStart             Time just before the load event is fired.
  navigationStart            Time after the previous document begins unload.
  redirectCount              Number of redirects since the last non-redirect.
  redirectEnd                Time after last redirect response ends.
  redirectStart              Time of fetch that initiated a redirect.
  requestStart               Time just before a server request.
  responseEnd                Time after the end of a response or connection.
  responseStart              Time just before the start of a response.
  timing                     Reference to a performance timing object.
  navigation                 Reference to performance navigation object.
  performance                Reference to performance object for a window.
  type                       Type of the last non-redirect navigation event.
  unloadEventEnd             Time after the previous document is unloaded.
  unloadEventStart           Time just before the unload event is fired.
  

Console Output :

[{redirectCount=0, encodedBodySize=221323, unloadEventEnd=0, responseEnd=2862.8000000000006, domainLookupEnd=1504.42, unloadEventStart=0, domContentLoadedEventStart=4210.570000000001, type=navigate, decodedBodySize=221323, duration=8536.735, redirectStart=0, connectEnd=1894.2450000000001, toJSON={}, requestStart=1901.1250000000002, startTime=0, fetchStart=2863.1150000000002, domContentLoadedEventEnd=4217.22, entryType=navigation, workerStart=0, responseStart=2043.73, domInteractive=4210.525000000001, domComplete=8508.945000000002, domainLookupStart=1504.42, redirectEnd=0, transferSize=221894, connectStart=1504.42, loadEventStart=8510.7, secureConnectionStart=1549.4750000000001, name=http://www.google.com/, nextHopProtocol=h2, initiatorType=navigation, loadEventEnd=8536.735}, {encodedBodySize=2623, entryType=resource, responseEnd=3084.8050000000003, workerStart=0, responseStart=2949.635, domainLookupEnd=2896.7950000000005, domainLookupStart=2896.7950000000005, redirectEnd=0, decodedBodySize=2623, duration=188.00999999999976, transferSize=2795, redirectStart=0, connectEnd=2896.7950000000005, toJSON={}, connectStart=2896.7950000000005, requestStart=2898.8500000000004, secureConnectionStart=0, name=https://www.google.co.in/logos/doodles/2018/doodle-snow-games-day-7-5009413877268480.2-s.png, startTime=2896.7950000000005, fetchStart=2896.7950000000005, nextHopProtocol=h2, initiatorType=img}, {encodedBodySize=0, entryType=resource, responseEnd=3686.665, workerStart=0, responseStart=0, domainLookupEnd=0, domainLookupStart=0, redirectEnd=0, decodedBodySize=0, duration=789.3299999999995, transferSize=0, redirectStart=0, connectEnd=0, toJSON={}, connectStart=0, requestStart=0, secureConnectionStart=0, name=https://www.gstatic.com/external_hosted/createjs/createjs-2015.11.26.min.js, startTime=2897.3350000000005, fetchStart=2897.3350000000005, nextHopProtocol=h2, initiatorType=script}, {encodedBodySize=0, entryType=resource, responseEnd=3129.655, workerStart=0, responseStart=0, domainLookupEnd=0, domainLookupStart=0, redirectEnd=0, decodedBodySize=0, duration=209.14999999999964, transferSize=0, redirectStart=0, connectEnd=0, toJSON={}, connectStart=0, requestStart=0, secureConnectionStart=0, name=https://ssl.gstatic.com/gb/images/i1_1967ca6a.png, startTime=2920.5050000000006, fetchStart=2920.5050000000006, nextHopProtocol=h2, initiatorType=css}, {duration=0, entryType=paint, toJSON={}, name=first-paint, startTime=3089.57}, {duration=0, entryType=paint, toJSON={}, name=first-contentful-paint, startTime=3089.5750000000003}, {encodedBodySize=11842, entryType=resource, responseEnd=3260.3000000000006, workerStart=0, responseStart=3163.4650000000006, domainLookupEnd=3094.1400000000003, domainLookupStart=3094.1400000000003, redirectEnd=0, decodedBodySize=11842, duration=166.1600000000003, transferSize=11956, redirectStart=0, connectEnd=3094.1400000000003, toJSON={}, connectStart=3094.1400000000003, requestStart=3095.53, secureConnectionStart=0, name=https://www.google.co.in/logos/2018/snowgames_luge/cta.png, startTime=3094.1400000000003, fetchStart=3094.1400000000003, nextHopProtocol=h2, initiatorType=css}, {encodedBodySize=232500, entryType=resource, responseEnd=6086.695000000001, workerStart=0, responseStart=3776.0950000000003, domainLookupEnd=3728.21, domainLookupStart=3728.21, redirectEnd=0, decodedBodySize=740604, duration=2358.4850000000006, transferSize=232769, redirectStart=0, connectEnd=3728.21, toJSON={}, connectStart=3728.21, requestStart=3729.3250000000003, secureConnectionStart=0, name=https://www.google.co.in/logos/2018/snowgames_luge/snowgames_luge18.2.js, startTime=3728.21, fetchStart=3728.21, nextHopProtocol=h2, initiatorType=script}, {encodedBodySize=0, entryType=resource, responseEnd=7080.765, workerStart=0, responseStart=7079.8150000000005, domainLookupEnd=4210.260000000001, domainLookupStart=4210.260000000001, redirectEnd=0, decodedBodySize=0, duration=2870.504999999999, transferSize=46, redirectStart=0, connectEnd=4210.260000000001, toJSON={}, connectStart=4210.260000000001, requestStart=4211.54, secureConnectionStart=0, name=https://www.google.co.in/gen_204?s=webaft&atyp=csi&ei=_q6CWojELMLuvASp6ZEY&rt=wsrt.2885,aft.1324,prt.1324, startTime=4210.260000000001, fetchStart=4210.260000000001, nextHopProtocol=h2, initiatorType=beacon}, {encodedBodySize=146393, entryType=resource, responseEnd=7750.4400000000005, workerStart=0, responseStart=6089.950000000001, domainLookupEnd=4218.745, domainLookupStart=4218.745, redirectEnd=0, decodedBodySize=421665, duration=3531.6950000000006, transferSize=146605, redirectStart=0, connectEnd=4218.745, toJSON={}, connectStart=4218.745, requestStart=4219.87, secureConnectionStart=0, name=https://www.google.co.in/xjs/_/js/k=xjs.s.en.ce3a-RKhSpw.O/m=sx,sb,cdos,cr,elog,hsm,jsa,r,d,csi/am=wCL0eMEBiP8PAUWiFQQWIE0wDA0/rt=j/d=1/t=zcms/rs=ACT90oGXoKgamzhHqIk5RIw3HVermJmYow, startTime=4218.745, fetchStart=4218.745, nextHopProtocol=h2, initiatorType=script}, {encodedBodySize=0, entryType=resource, responseEnd=5235.985000000001, workerStart=0, responseStart=0, domainLookupEnd=0, domainLookupStart=0, redirectEnd=0, decodedBodySize=0, duration=816.4299999999994, transferSize=0, redirectStart=0, connectEnd=0, toJSON={}, connectStart=0, requestStart=0, secureConnectionStart=0, name=https://www.gstatic.com/og/_/js/k=og.og2.en_US.oN1DeTh5DCc.O/rt=j/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTtvVAie43QBzx5aLGc9xwmpprbMfQ, startTime=4419.555000000001, fetchStart=4419.555000000001, nextHopProtocol=h2, initiatorType=script}, {encodedBodySize=0, entryType=resource, responseEnd=7618.695000000001, workerStart=0, responseStart=0, domainLookupEnd=0, domainLookupStart=0, redirectEnd=0, decodedBodySize=0, duration=2331.785, transferSize=0, redirectStart=0, connectEnd=0, toJSON={}, connectStart=0, requestStart=0, secureConnectionStart=0, name=https://apis.google.com/_/scs/abc-static/_/js/k=gapi.gapi.en.41Z8rKx1XQQ.O/m=gapi_iframes,googleapis_client,plusone/rt=j/sv=1/d=1/ed=1/am=AAE/rs=AHpOoo-9aMm3x1MgiL0Q16Hn9-7ySAbiAQ/cb=gapi.loaded_0, startTime=5286.910000000001, fetchStart=5286.910000000001, nextHopProtocol=h2, initiatorType=script}, {encodedBodySize=33155, entryType=resource, responseEnd=8232.415, workerStart=0, responseStart=7961.63, domainLookupEnd=7909.375000000001, domainLookupStart=7909.375000000001, redirectEnd=0, decodedBodySize=101433, duration=323.03999999999996, transferSize=33289, redirectStart=0, connectEnd=7909.375000000001, toJSON={}, connectStart=7909.375000000001, requestStart=7911.31, secureConnectionStart=0, name=https://www.google.co.in/xjs/_/js/k=xjs.s.en.byi87tp8hFQ.O/m=aa,abd,async,dvl,foot,fpe,ipv6,lu,m,mu,sf,sonic,spch,d3l,udlg/am=wCL0eMEBiP8PAUWiFQQWIE0wDA0/exm=sx,sb,cdos,cr,elog,hsm,jsa,r,d,csi/rt=j/d=1/ed=1/t=zcms/rs=ACT90oHN7XGqdfNtn5tbonkyQwGSzrxogw?xjs=s1, startTime=7909.375000000001, fetchStart=7909.375000000001, nextHopProtocol=h2, initiatorType=script}, {encodedBodySize=0, entryType=resource, responseEnd=8265.45, workerStart=0, responseStart=0, domainLookupEnd=0, domainLookupStart=0, redirectEnd=0, decodedBodySize=0, duration=355.22500000000036, transferSize=0, redirectStart=0, connectEnd=0, toJSON={}, connectStart=0, requestStart=0, secureConnectionStart=0, name=https://www.google.com/textinputassistant/tia.png, startTime=7910.225, fetchStart=7910.225, nextHopProtocol=h2, initiatorType=img}, {encodedBodySize=469, entryType=resource, responseEnd=8264.44, workerStart=0, responseStart=8234.305, domainLookupEnd=7910.400000000001, domainLookupStart=7910.400000000001, redirectEnd=0, decodedBodySize=469, duration=354.03999999999996, transferSize=559, redirectStart=0, connectEnd=7910.400000000001, toJSON={}, connectStart=7910.400000000001, requestStart=7912.325000000001, secureConnectionStart=0, name=https://www.google.co.in/logos/2018/snowgames_luge/main-sprite.png, startTime=7910.400000000001, fetchStart=7910.400000000001, nextHopProtocol=h2, initiatorType=img}]

Selenium is not really meant for performance testing. Though, you could do performance testing with it with for example stop watch functionality.

Another simple click and measure way would be visual studio performance testing. You do need VS enterprise for this.