1. The Timings API allows performance metrics collected from the W3C Performance API in browsers to be stored and visualized using Elasticsearch and Kibana. It provides an API and clients for different languages to integrate performance measurements into functional tests. 2. The API works by injecting JavaScript code returned from a POST request into the browser after page loads and user actions. This code collects navigation timing data which is sent back to another POST request to be stored in Elasticsearch and compared to baselines. 3. To use the Timings API, the documentation recommends cloning the repo and running Docker Compose to start the API and Elasticsearch/Kibana services. Example code for the Java client is also provided.

1. Performance Assertion during the functional testing
Timings API
Plakogiannis Petros 23/10/2019

2. @Petros_2
Agenda
1
2
3
4
5
Live Greetings from Marcel Verkerk, Lead Performance Engineer, GoDaddy
W3C Performance API
Timings API: What is it?
Timings API: How it works?
Timings API: Install and running
6 See it in action

3. @Petros_2
Performance testing during functional tests
Timings API

4. 1 Live Greetings

5. @Petros_2
What is GoDaddy?
American Web Hosting Company, Phoenix, Arizona
Over 6000 employees worldwide.
Over 71 million domain names registered at GoDaddy
Marcel Verkerk is the Lead Performance Engineer at GoDaddy
Information
mverkerk@godaddy.com

6. @Petros_2
The Performance Golden Rule
“80-90% of the end-user response time is spent on the frontend. Start there.”
STEVE SOUDERS

7. 2 W3C Performance API

8. @Petros_2
Navigation Timing

9. @Petros_2
Navigation Timing
Page Load Time

10. @Petros_210
Navigation Timing

11. 3 Timings API: What is it?

12. @Petros_2
Timings API
It uses Elastic-Search and Kibana to store & visualize data.
It is an open source npm module which provides you with an API which offers the
functionality for communicating with the W3C Performance API available in all major
browsers.
The idea is that you can add a layer of performance measurements with an
existing test suite of functional verifications

13. 4 Timings API: How it works?

14. @Petros_2
How it works?

15. @Petros_2
Methods
[POST] /v2/api/cicd/injectjs
This method will return a url-encoded string containing JavaScript code.
This code needs to be decoded and injected into webdriver after every page load / user action.
The browser will return an object that becomes input for the second call.
[POST] /v2/api/cicd/navtiming or [POST] /v2/api/cicd/usertiming
navtiming is used for "full page loads"
usertiming is used for "soft page loads" and requires start/stop "marks" to be set in the browser.
These methods expect the injectJS object and a number of other objects with various settings &
flags.
These methods use ElasticSearch to get baselines, compare results, write back results.
The response (JSON object) includes the assert field that can be used to assert the result
against baseline or SLA.

16. @Petros_2
The Clients
To simplify communication with the API, there are currently three clients that you can install:
Language Install Readme
JavaScript npm install --save-dev timings-client-js
https://github.com/godaddy/timings
-client-js/blob/master/README.md
Python pip install timingsclient
https://github.com/godaddy/timings
-client-py/blob/master/README.md
Java
IntelliJ: import as maven project
Java Project: build/publish with mvn or add
to your maven POM
https://github.com/kaygee/timings-
client/blob/master/README.md

17. 5 Timings API: Install and running

18. @Petros_2
Let’s get it running!
Step 1. Clone this repo
Step 2. Starting up the API
Run docker-compose up from the Timings-docker folder
Step 3. Test the apps
Timings – http://your_server
Elasticsearch – http://your_server:9200
Kibana – http://your_server:5601

19. 6 See it in action

20. @Petros_2
Let’s get it running!
Install Java-Client

21. @Petros_2
A Quick Glance at the Code

22. @Petros_222
Demo

23. @Petros_2

24. @Petros_2petros-plakogiannis godaddy/timings