Forem: Robert Dale Morris

Cypress & Mochawesome Report Setup.. Made Easy!

Robert Dale Morris — Wed, 18 Mar 2020 03:07:01 +0000

Cypress is an amazing testing framework swooping in to save all of our Javascript web development projects. As with any testing, its nice to have clear and easily generated reports. This is where Mochawesome comes in. It gives us nicely generated json that can be merged into an html page. Although Mochawesome does most of the work for us, it can still be a bit tedious to set up. Luckily for you, I have developed cy-report-setup-helper, an npm package to help out with this. This walk though will show you just how easy it is to configure your project with Cypress and Mochawesome using cy-report-setup-generator.

NOTE: For this project we will be using Angular Cli (any version will do)
Because the report creation script of this generator runs the "start" script in your package.json file, if you are not using Angular but instead using React, this walk through will still work.

First, lets generate a new Angular project.

NOTE: it does not matter whether you add angular routing or which style you choose for the purpose of this walkthrough

ng new cy-mocha-example-app

now proceed into the top level folder of the newly generated application

cd cy-mocha-example-app

next, we will use npm to install cy-report-setup-helper (version 1.3.4)

npm i -D cy-report-setup-helper

Once cy-report-setup-helper is installed, we will run the generator which will add the needed dependencies for Cypress, Mocha, and Mochawesome to your package.json along with the scripts for where to store your reports upon running your test.

npx cy-helper-generate --output-dir=integration-reports

after running this command you will notice that a new directory has been created named integration-reports/ and a cypress.json file has been created with the properties needed for the output of the reports.

Your cypress.json will look like this.

{
  "reporterOptions": {
    "reportDir": "integration-reports/integration/reports/mocha",
    "quiet": true,
    "html": false,
    "overwrite": false,
    "json": true
  },
  "videosFolder": "integration-reports/integration/public/videos",
  "screenshotsFolder": "integration-reports/integration/public/screenshots",
  "videoCompression": false,
  "reporter": "mochawesome",
  "browser": "electron",
  "chromeWebSecurity": false
}

Your package.json will have these newly created scripts for reporting and cleaning up old reports.

{
    "cleanup:all": "run-p cleanup:reports cleanup:evidence",
    "cleanup:reports": "rm -fr integration-reports/integration/public/report* && rm -fr integration-reports/integration/report*",
    "cleanup:evidence": "rm -fr integration-reports/integration/public/videos* && rm -fr integration-reports/integration/public/screenshots*",
    "merge_reports": "mochawesome-merge --reportDir=integration-reports/integration/reports/mocha > integration-reports/integration/public/report.json",
    "generate_html_report": "marge integration-reports/integration/public/report.json -f report -o integration-reports/integration/public/",
    "test:cy": "run-p --race --silent start test-no-exit",
    "cy:run": "cypress run",
    "test-no-exit": "npm run cy:run --force",
    "test:create-reports": "run-s cleanup:all test:cy merge_reports generate_html_report create-tree",
    "create-tree": "node integration-reports/integration/cy-report-tree-generator.js --path=integration-reports/"
}

A script was added to your integration-report/ folder named cy-report-tree-generator. This script will read your integration directory once your reports, screenshots, and videos are created and generate a report-tree.json file.

Only one step remains and that's to install all of the newly added dependencies.

npm i

After npm finishes the install, we should be all setup and ready. Yup, its that easy. We can now test everything out.

We will start by first opening cypress from the current project directory by running

npx cypress open

This will open cypress and add a folder of example tests.
In order to run the application and generate all of the reports, we only need to run one simple command.

npm run test:create-reports

This will take a little bit of time to run through all of the cypress example tests but after you will see the public folder inside of your integration-reports/ directory filled with the output.

Now, open report.html in a browser and marvel at your report!

Thanks for following this tutorial and I hope my npm package helps with your project. If you have any questions or suggestions fell free to connect with me on linked in or share in the comments below. Also, feel free to open any issues or requests and collaborate on the package at github. cy-report-setup-helper at github

Robert Morris on Linked in
follow me on twitter
Robert Morris on Twitter
Github
Gettindatfoshow
Blogspot
CsSoldier

Code Coverage With Cypress & Angular

Robert Dale Morris — Thu, 12 Mar 2020 23:34:41 +0000

This example can be found on github ang-cy-cov-example

As a front end developer it's very easy to get caught up in the fine tuning of that perfect web application. If you have multiple people working together, it can be annoying when someone else's changes tend to skew the looks or functionality of your component. There haven't really been any great testing frameworks that test applications visually the way a user does. Not until now at least...
Cypress.io is an amazing framework designed for complete top down testing of your application. Written by front end developers, for front end developers. For those of us working in companies though, we may still need to provide a report that shows the coverage of our tests still reach a percentage of the code base. Since Cypress is designed to work with any front end framework, or none for that matter, they leave this to us to implement. Don't be to worried though.. I'm here to walk you through the easy set up.

Note: This walk-through is meant for Angular version 8 and above.

First we will start off by generating a fresh new Angular application

  ng new ang-cy-cov-example

It does not matter if you add routing or which type of style you use for the purpose of this walk-through

Install cypress-schematic to switch from protractor to cypress e2e framework

  npm i -D  @briebug/cypress-schematic

Add the schematic as a dependency to your project.

  ng add @briebug/cypress-schematic

This will prompt you to remove protractor, answer y

NOTE: if you are following this example from an application that already has cypress installed, you may need to run the above command with --force so that it pushes through the error that is created by the cypress.json already existing
This command will also override your cypress.json file, just revert those changes and add the following line
"supportFile": "cypress/support/index.ts"

Open up cypress/integration/spec.ts and change

it("loads examples", () => {
  cy.visit("http://localhost:4200");
  cy.contains("Replace me with something relevant");
});

it("loads examples", () => {
  cy.visit("http://localhost:4200");
  cy.contains("we are doing big things!");
});

Open up src/app/app.component.html and change the following:

<span>Learn Angular</span>

<span>we are doing big things!</span>

now we can check to see if our schematic set up correctly by running

ng e2e

After your angular server begins, cypress will open showing your test.

click on spec.ts and watch your first successful test!

Now this is all very fun and exciting, but now on to the professional stuff. That good old coverage report.

Next we will add a few files.
First you will need to add coverage.webpack.js to your cypress/ folder

touch cypress/coverage.webpack.js

inside the file, paste this code.

module.exports = {
    module: {
      rules: [
        {
          test: /\.(js|ts)$/,
          loader: 'istanbul-instrumenter-loader',
          options: { esModules: true },
          enforce: 'post',
          include: require('path').join(__dirname, '..', 'src'),
          exclude: [
            /\.(e2e|spec)\.ts$/,
            /node_modules/,
            /(ngfactory|ngstyle)\.js/
          ]
        }
      ]
    }
  };

next we will add cy-ts-preprocessor.js to your cypress/plugins/ folder

touch cypress/plugins/cy-ts-preprocessor.js

inside the file, paste this code.

const wp = require('@cypress/webpack-preprocessor')

const webpackOptions = {
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: 'ts-loader'
          }
        ]
      }
    ]
  }
}

const options = {
  webpackOptions
}

module.exports = wp(options)

Then we will add a new builder

npm i -D ngx-build-plus

proceed to your angular.json file and alter your serve configuration to look like this, to use the ngx-build with extra config.

{
"serve": {
          "builder": "ngx-build-plus:dev-server",
          "options": {
            "browserTarget": "cypress-angular-coverage-example:build",
            "extraWebpackConfig": "./cypress/coverage.webpack.js"
          }
}

Add to Instrument JS files with istanbul-lib-instrument for subsequent code coverage reporting

npm i -D istanbul-instrumenter-loader

Make Istanbul understand your Typescript source file

npm i -D @istanbuljs/nyc-config-typescript source-map-support ts-node

proceed to your package.json and include the following configuration

{
 "nyc": {
    "extends": "@istanbuljs/nyc-config-typescript",
    "all": true
  }
}

If you are still following great! I realize its a little tedious but we are almost there.
Next, install the cypress code coverage plugin

npm install -D @cypress/code-coverage nyc istanbul-lib-coverage

Then we need to add a few lines to some cypress files.
first open cypress/support/index.js and add the following.

import './commands';

// Import cypress code-coverage collector plugin
import '@cypress/code-coverage/support';

next open cypress/plugins/index.js and replace

module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config
}

with

/**
 * @type {Cypress.PluginConfig}
 */
const cypressTypeScriptPreprocessor = require('./cy-ts-preprocessor')

module.exports = on => {
  on('file:preprocessor', cypressTypeScriptPreprocessor);

  // enable code coverage collection
  on('task', require('@cypress/code-coverage/task'));
}

now, we should have arrived, we can now run the following

ng run ang-cy-cov-example:cypress-run

this should open cypress and run your tests then close. you will then be able to see the newly generated .nyc-output and coverge folders in your project tree.

This will also generate an html page for you that looks like this.

Thanks and I really hope this helps you all.
Also, check out my npm package for those who are trying to generate reports using mocha/mochawesome report generator here cy-report-setup-helper

Please feel free to connect on linked in for any questions or just to link up!
Robert Morris on Linked in
follow me on twitter
Robert Morris on Twitter
Github
Gettindatfoshow
Blogspot
CsSoldier