[Technology blog] JSCover + selenium get js code coverage

This document explains how we use JSCover to get the code execution coverage js file of Selenium test sample of.

In fact there are a lot online blog talk about this stuff, but in full accordance with existing online tutorial is going to get it, and can not meet our needs.

Reference links:

1. https://www.cnblogs.com/bhlsheji/p/4
2. https://stackoverflow.com/questions/9495625/selenium-is-there-any-js-javascript-code-coverage-tool-which-we-can-integrate
3. http://tntim96.github.io/JSCover/manual/manual.xml

Tools Introduction

Selenium

Browser automated testing tools. Users can simulate the operation of the browser, which play the effect of automated testing. Specifically how to use a bunch of online tutorials, I do not go into details.

selenium will be used in the preparation of the test sample, we will use selenium in executeScript call hook JSCover provide coverage to save the data.

JSCover

js detection code coverage tools. The principle is instrumented js code, the project at github open source on, it is also hosted on github's official website . Incidentally, according to my experience point of view, there are problems do not check Baidu, and do not check its user manual, but should check the issue on github.

JSCover We only use it for JSCover-all.jardocuments, and pull it out after the next down the line.

Principle of flow

1. Use JSCover of js code instrumented so that we can get code coverage.
2. Performing a test sample of the code instrumentation.
3. The code coverage testing each sample derived saved.
4. The combined sample of each test code coverage
5. Code coverage files using the combined generation of test reports

Schematic flow

The actual process step by step explanation

0. Preparedjscoverage.js

This step is because jscover their own problems, and then explain the reasons later. In short instrumented come once in the code without enabling local-storage to obtain jscoverage.js.

Example instructions:java -Dfile.encoding=UTF-8 -jar JSCover-all.jar -fs D:/code_origin D:/code_instrumented

• -Dfile.encoding=UTF-8: Coding setting, to avoid the code page in Chinese garbled after instrumentation.
• -jar JSCover-all.jar: Specify JSCover-all.jarthe path of.
• -fs: Specifies file instrumented mode. We only use this mode, in addition to proxy mode, but we do not use, because most see next.
• D:/code_originAnd D:/code_instrumented: the former directory as the original file is located js code, which is stored as a code instrumentation want to catalog.

After executing the above instructions, you should be able to code in the directory where the instrumented (that is, in the example D:/code_instrumented) found in jscoverage.jsuse after the file, save it to a suitable place, left.

1. Code Instrumentation

Code Instrumentation divided into two parts, the part to the web page file js code instrumentation, such variables can be performed to obtain the coverage. Another part is the use of executeScript selenium calls provided hook JSCover provided at the end of execution of the test sample, which is essentially a dynamic process instrumentation, which allows us to preserve coverage data.

Js code page file Instrumentation

Example instructions:java -Dfile.encoding=UTF-8 -jar JSCover-all.jar -fs --local-storage D:/code_origin D:/code_instrumented

In fact, it commands a "pre-prepared" in the previous step difference is only --local-storagejust. local-storageThe meaning of "is enabled HTML5's local-storage function to save code coverage variable." If not enabled, then, JSCover will use a variable to hold js code coverage variables, but we all know, is not js variable across the page, which also led to the page every time we switch, code coverage variables will be lost. So we need to turn local-storageto save the code coverage variable.

But JSCover in local-storagegenerating mode of jscoverage.jsa bug file, so we need to step on the non-upon "pre-prepared" local-storageto generate a next jscoverage.jsfile. This file is only used to display test report with, it will not affect the code coverage data.

hook call

This part can refer to the reference link (official manual) 3 practices in. Official website code python version:

json_str = driver.execute_script("return jscoverage_serializeCoverageToJSON();")

After saving json_str to jscoverage.jsonthem under the directory where the code is instrumented, overwrite the original jscoverage.jsonfile on the line.

But because the official website of this approach is a class jscoverage.json, a class in selenium, says in a class of test samples, and we have many, many class test sample, so there will be all sorts of code coverage file jscoverage.json. So we need to save them separately at the time of execution, merge them all after their execution. The merger will further explain later.

Suppose we have three Selenium test class, respectively called TC_A, TC_B, TC_C. That we can generate a directory structure similar to the following

- coverage
    - TC_A
        - jscoverage.json
    - TC_B
        - jscoverage.json
    - TC_C
        - jscoverage.json

This is just only need to operate when saving json_str on the line, not repeat them.

2. Perform a test sample

This section and usually exactly the same, only need to pay attention to the implementation of the code page file after instrumentation, rather than pre-instrumented.

3. Merge code coverage file

After performing the test sample, everything goes well, you can get a similar directory structure as the first step in code coverage document described in the:

- coverage
    - TC_A
        - jscoverage.json
    - TC_B
        - jscoverage.json
    - TC_C
        - jscoverage.json

Example instructions: java -cp JSCover-all.jar jscover.report.Main --merge coverage/* D:/code_instrumented

• coverage/*: That is, the top-level directory path to the directory structure.
• D:/code_instrumented: Save the file directory code coverage after the merger. We directly assigned to the directory where the instrumentation code, eliminating the need for manual override.

Note that if only one jscoverage.json, it is unable to use the command to merge, after all, only one, JSCover error. This is the only time that a manually copy jscoverage.json, overwrite the original jscoverage.json.

4. Generate Test Report

We got put in the "pre-prepared" jscoverage.jsto turn out, and then overwrite the code where the instrumentation directory under jscoverage.js, and then modify it, will be jscoverage_isReportreplaced by true:

var jscoverage_isReport = true;

Finally, open the jscoverage.htmlcan. Likely got nothing, this time you open the browser console to see what was wrong report it, such as chrome, then general are Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https., then Baidu Baidu to solve it, or another browser and try again, or change to change their own jscoverage.html, will do. I was the last direct use Edge opened.

Finally, it should be like this:

Point to open a file, you can see which lines are covered and which are not:

JSCover reason not to use the Proxy pattern

Proxy mode a lot easier, steps can save Web page code instrumentation. Because in proxy mode, jscover will intercept all browsers contract and receiving packets, sent me for all the js file, it will automatically be instrumented.

But because JSCover the need to modify the Proxy mode browser agent. And our current local test environment using the Fiddler as a proxy browser, these two agents conflict, it can only choose one, so we did not use JSCover the Proxy mode, but if your project does not use browser proxy to set up a local test environment, consider using a proxy mode with JSCover, really a lot easier.