CodeCoverage of Javascript part of Windows based application

[UserRuchiGupta]

Hi All, I am new to JScover code coverage. I have a query that I need to get code coverage of GUI part (java scripts) of my windows based application. Can it be done by JScover? My windows based application consist of GUI(HTML5 + javascript) + backend(c++). I run automated GUI test cases on HP-UFT tool. While running test cases I need to see the java script part of code covered !! Thanks!

[tntim96]

Possibly. You can probably instrument the JavaScript files and deploy them in your GUI application. At that point they'll be collecting coverage, but you'll need to extract that data. You can do that by calling jscoverage_serializeCoverageToJSON() in JavaScript, which your application will have to do. That returns the JSON which is normally stored in the jscoverage.json file.

To handle JavaScript reloads (where the collected coverage data would be lost), you can use the --local-storage switch if your application supports HTML5 local storage. Otherwise you'll have to save and merge the JSON data before the data is lost.

Take a look at the localStorage-file-system example to see how this works in a browser.

[UserRuchiGupta]

Thanks for the Reply! I am able to instrument my javascript files. I have around 7 javascript files and I can see jscoverage_serializeCoverageToJSON() definition in all javascript files. My question is from where to call this function in javascript file to collect coverage?? Do i need to create a separate javascriptfile to call this function? Or I need to call this function in all instrumented javascript files? This function should be called while unloading page or can be called anywhere in javascript file ?

Thanks!

[tntim96]

Did you get the sample working? I'm not sure I can make any clearer with words what the code demonstrates.

You have to do something similar to:

    coverageJSON = @driver.execute_script('return jscoverage_serializeCoverageToJSON();')
    File.open '../../target/example-fs-localStorage/jscoverage.json', 'w' do |f|
      f.write coverageJSON
   end

[UserRuchiGupta]

Thanks for the reply ! and Sorry for bothering you again. Actually the sample code is for selenium but I am doing automation on QTP. I have not much idea of selenium. I am able to understand flow of the process needs to be followed but some how I am not able to implement it in my application.

So do I need to call jscoverage_serializeCoverageToJSON() function in QTP script after each Test cases ends ?? I got the point that javascript instrumenting code will be collecting coverage which can be extracted by jscoverage_serializeCoverageToJSON() function. But from where to call this function ?

I tried to call this function in javascript when the page unloads but it is giving JSON of jquery-1.8.2 not of my javascript. {"/js/jQuery/jquery-1.8.2.js":{"lineData":[null,null,null,null,null,null,null............

Also, I have set var jscoverage_isReport = true; in jscoverage.js file. But I am not able to see code coverage in jscoverage.html. It is showing Error:404 in jscoverage.html file.

I am collecting coverage in this way in my javascript file while unloading page: Is this the right place to collect coverage ? var json = jscoverage_serializeCoverageToJSON(); Even if I don't stringify then also same result json_str = JSON.stringify(json); var fso = new ActiveXObject("Scripting.FileSystemObject"); varFileObject = fso.OpenTextFile("C:\\pathtoInstrumentedFiles\\jscoverage.json", 8, true,0); varFileObject.write(json_str); varFileObject.close();

Kindly help me out. Thanks!

PFA jscoverage.json file generated and screenshot of codecoverage.

jscoverage.zip

[tntim96]

Looks like you're almost there.

So do I need to call jscoverage_serializeCoverageToJSON() function in QTP script after each Test cases ends ??

To handle JavaScript reloads (where the collected coverage data would be lost), you can use the --local-storage switch if your application supports HTML5 local storage. Otherwise you'll have to save and merge the JSON data before the data is lost.

it is giving JSON of jquery-1.8.2 not of my javascript.

That's because you've instrumented JQuery. You should only instrument the files you want to collect coverage on.

It is showing Error:404 in jscoverage.html file.

If you are loading from the file-system, try Firefox, or Chrome with the --allow-file-access-from-files option. If that doesn't solve it, you'd have to put the report files (excluding your source files in original-src) somewhere for me to inspect.

[UserRuchiGupta]

Thanks for your reply !

I am now able to instrument only my javascript files and get the coverage in jscoverage.json and able to see coverage report on coverage.html using --allow-file-access-from-files option for single page browse.

I am collecting coverage data while unloading the page and writing the json data to jscoverage.json file using below code: var json = jscoverage_serializeCoverageToJSON(); var fso = new ActiveXObject("Scripting.FileSystemObject"); // 8: append data varFileObject = fso.OpenTextFile("C:\\pathtoInstrumentedFiles\\jscoverage.json", 8, true,0);

Problem is now the number of times I browse a same page it is appending coverage data (json) at the end of file(jscoverage.json). so while browsing report it shows Error: SyntaxError: Unexpected token {

Even if I browse to some other page its coverage data is also appending at the end of file but does not show in report. Error is reflected as Error: SyntaxError: Unexpected token {

I need to add data while unloading page so that the data should not lost. How to append/add json data in jscoverage.json ??

PFA jscoverage.json and error in report file.

jscoverage.zip

[tntim96]

You have to merge the jscoverage.json files as described in the manual.

[UserRuchiGupta]

Thanks for your Reply and support ! I am able to merge the different page reports and able to see code coverage report when browsing application pages manually. For automation I need to handle extra pop-up coming while writing json data through activex object. But still I am struck in ActiveX pop-up coming when I am writing JSON data to coverage.json. Below is the code:

var json = jscoverage_serializeCoverageToJSON(); var oShell = new ActiveXObject("wscript.shell"); varFileObject = fso.OpenTextFile("C:\\JSCover_Reports\\BackupDIR\\jscoverage.json", 2, true,0); varFileObject.write(json); varFileObject.close();

I am not able to suppress activex pop-up coming while creating ActiveX object.

[tntim96]

This doesn't look like a JSCover specific issue that I can help with. The only thing I could suggest (and I may be on the wrong track) is to make sure you write to separate jscoverage.json files (i.e. in different directories), and then merge after your tests complete.