How should H5 performance be tested? Many people don't know how to do it. In fact, the W3C protocol can be used to complete the automatic H5 performance test.

Because W3C standard is a browser standard, general browsers support W3C standard, which stipulates that users can query performance information through api. W3C official website: https://www.w3.org/TR/navigation-
timing/

More articles on special tests can be clicked on the official account.

**Introduction**

Previously, we used the chrome browser to manually view the webview. With the increase of business and quantity, the speed of manual operation will not be able to keep up with the business growth. At this time, we need an automated method to test the performance of webview.

When the page is loaded, a series of contents will be rendered. The rendering process can be divided into multiple stages, such as the following figure:

• when Prompt for unload accesses a new page, the time when the old page is unloaded

• redirect redirection: when users log off and log in, they return to the main page and jump to other websites

• App cache checks whether the cache is turned on

• DNS indicates the time of DNS query. If it is a long connection or the request file comes from local storage such as cache, the fetchStart time point is returned

• when TCP establishes a link with the server

• Requests when the client initiated the request

• Response time from the first Response byte to the last Response byte of the server

• Processing time points of various states, such as loading state, etc

• the time when onLoad triggers the execution of the load event

use

In the chrome browser, execute js code to obtain the contents of each stage:

window.performance.timing

The above time is only a time point. If you want to obtain the specific time of each stage, you need to subtract the two time points, such as calculating the domContent loading event time:

window.performance.timing.\domContentLoadedEventEnd -\ window.performance.timing.\domContentLoadedEventStart

appium/selenium can execute js. By borrowing appium/selenium tools, you can automatically obtain energy indicators. By calling the executescript API of appium/selenium, you can inject the following code into the page:

//Displays the time point returnjson for all phases stringify(window.performance.timing)  
//Displays the time of the specified resource, such as imgreturnjson stringify(window.performance.\getEntriesByName (document.querySelector("img"). src)[0], null, 2)  

**Actual combat cases**

H5 performance testing needs to be used in conjunction with automated testing tools, such as selenium or appium, to automatically call APIs through js code injection.

js injection using python+selenium:

from selenium import webdriverdriver = webdriver.Chrome()driver.get("https://home.testing-studio.com/")print(driver.execute_script(    "return JSON.stringify(window.performance.timing)"))

After execution, a json data will be returned, including various performance indicators in the introduction. The performance indicators can be processed twice or displayed visually:

{"navigationStart":1585043212714,"unloadEventStart":0,"unloadEventEnd":0,"redirectStart":0,"redirectEnd":0,"fetchStart":1585043212717,"domainLookupStart":1585043212747,"domainLookupEnd":1585043212747,"connectStart":1585043212747,"connectEnd":1585043212835,"secureConnectionStart":1585043212787,"requestStart":1585043212836,"responseStart":1585043212918,"responseEnd":1585043212921,"domLoading":1585043212929,"domInteractive":1585043214972,"domContentLoadedEventStart":1585043214972,"domContentLoadedEventEnd":1585043214972,"domComplete":1585043215976,"loadEventStart":1585043215976,"loadEventEnd":1585043215976}  

** _
Come to Hogwarts test and development society to learn more advanced technologies of software testing and test development. The knowledge points include web automated testing, app automated testing, interface automated testing, test framework, performance testing, security testing, continuous integration / continuous delivery / DevOps, test left, test right, precision testing, test platform development, test management, etc, The course technology covers bash, pytest, junit, selenium, appium, postman, requests, httprunner, jmeter, jenkins, docker, k8s, elk, sonarqube, Jacobo, JVM sandbox and other related technologies, so as to comprehensively improve the technical strength of test and development engineers
QQ communication group: 484590337
The official account TestingStudio
Click for more information