Help on instrumenting app code accessed by cy.visit

[karthik22061993]

Hello,
I am performing end to end test using cypress on my angular app served by node.js. I want to generate code coverage for test. As described in documentation,
cypress\plugins\index.js

module.exports = (on, config) => {
  require('@cypress/code-coverage/task')(on, config)
 return config
}

cypress\support\index.js

import '@cypress/code-coverage/support'

package.json

"devDependencies": {
    "@cypress/code-coverage": "^3.9.1",
    "babel-plugin-istanbul": "^6.0.0",
    "chai": "^4.2.0",
    "cypress": "^6.0.0",
    "mocha": "^8.2.1",
    "nyc": "^15.1.0"
  }

.babelrc

{
    "plugins": ["istanbul"]
    
}

Note all my angular and server code is in another machine, I access the app using cy.visit(www.xyz.com). Iam not sure whether I am doing instrumentation correctly. But how can I instrument code that doesn't exist in my machine?

Any help or suggestion will really help me:)

[bahmutov]

Unfortunately, you need to run your application (or build and run) with instrumentation enabled. If for example, you have a production JavaScript code build running on another machine, then the Cypress plugin cannot help you (since it only collects the code coverage information, not instruments the code).

There are people trying to use built-in DevTools code coverage to show coverage for production code, or I had this tool https://github.com/bahmutov/was-tested for instrumenting code on the fly - but none of them are seriously working. I suggest you run your web application locally, insert the Istanbul plugin to instrument the code, run E2E tests, get the coverage then deploy the site.

[karthik22061993]

Thanks , I am following instructions from this link https://github.com/bahmutov/cypress-angular-coverage-example/blob/master/SETUP.md to instrument. But I didn't why I need do this two steps,

Install cypress-schematic to switch from protractor to cypress e2e framework
npm i -D  @briebug/cypress-schematic
Switch to cypress from protractor
ng g @briebug/cypress-schematic:cypress true

Note: My app previpusly did run E2E test using protractor framework but now we are using cypress framework
Iam following https://github.com/bahmutov/cypress-angular-coverage-example to instrument angular typescript and node server javascript (backend). Can you please share any links to understand about instrumentation process matching my situation?

[bahmutov]

If you have already removed the Protractor, and use Cypress, you do not need to follow the steps to remove the Protractor. To instrument the code you need to insert the Istanbul plugin that instruments the code. I believe that repo already shows how to do it using the code build file as explained in the SETUP.md file. My other advice is to look at other instrumented examples in https://github.com/cypress-io/code-coverage#examples

[karthik22061993]

Hi Gleb, once again thanks, I am using angular 6.1 and example is using angular 8.x . Is it must I have upgrade Angular to 8.x in order to generate e2e test code-coverage? I tried using with 6.1, I see some package mismatch errors like this

[bahmutov]

I’m sorry but I don’t know. I don’t know it angular version would include the Istanbul plugin to instrument the code during bundling any differently

…

Sent from my iPhone

On Jan 15, 2021, at 21:30, karthik22061993 ***@***.***> wrote:  Hi Gleb, once agin thanks, I am using angular 6.1 and example is using angular 8.x . Is it must I have upgrade Angular to 8.x in order to generate e2e test code-coverage? I tried using with 6.1, I see some package mismatch errors like this — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.