Generating empty HTML Mochawesome report from populated JSON file in Cypress - cypress

I am trying to generate one mochawesome report that contains all results of the spec files in my Cypress test suite.
Here is my package.json:
{
"test": "npx cypress run",
"combine-reports": "mochawesome-merge cypress/reports/mochawesome-report/*.json > mochareports/report.json",
"generate-report": "marge mochareports/*.json --reportDir mochawesome --assetsDir mochawesome/assets --reportPageTitle index.html"
},
"devDependencies": {
"cypress": "^9.5.4",
"mocha": "^9.2.2",
"mochawesome": "^7.1.3",
"mochawesome-merge": "^4.2.1",
"mochawesome-report-generator": "^6.2.0"
}
}
npm run test works as expected.
Running npm run combine-reports, creates mochareports/report.json as expected. I've opened the file in a text editor & it's populated with test stats, results, etc.
Running npm run generate-report displays Reports saved on the console.
If I open the HTML page (cypress/reports/mochareports/report.html) in VS Code, HTML is appearing. However, if I open it in a web browser, I get a blank HTML page & the below console error:
The HTML report is being generated, but for some reason is showing up as a blank page in a web browser.
Can someone please show me how to resolve this?

It would be better if you also add the cypress.json file, but I will explain with a simple example,
Here is my cypress.json report configuration
{
"reporter": "cypress-multi-reporters",
"reporterOptions": {
"reporterEnabled": "mochawesome",
"mochawesomeReporterOptions": {
"reportDir": "cypress/reports/mocha",
"quite": true,
"overwrite": false,
"html": false,
"json": true
}
}
}
And in your package.json I do not see the script to combine all json files
for ex:
"scripts": {
"clean:reports": "rm -R -f cypress/reports && mkdir cypress/reports && mkdir cypress/reports/mochareports ",
"pretest": "npm run clean:reports",
"scripts": "cypress run",
"combine-reports": "mochawesome-merge cypress/reports/mocha/*.json > cypress/reports/mochareports/report.json",
"generate-report": "marge cypress/reports/mochareports/report.json -f report -o cypress/reports/mochareports -- inline",
"posttest": "npm run combine-reports && npm run generate-report",
"test" : "npm run scripts || npm run posttest"
}
You can get some idea here also - https://medium.com/tech-learn-share/attach-screenshot-into-mochawesome-html-report-in-cypress-ca3792081474

Related

Can't get mochawesome report with cypress-parallel

devDependencies from package.json
"cypress": "^10.3.1",
"cypress-mochawesome-reporter": "^3.2.0",
"cypress-parallel": "^0.9.1",
"typescript": "^4.7.4"
And here is configuration from cypress.config.ts
reporter: 'cypress-mochawesome-reporter',
reporterOptions: {
overwrite: false,
charts: true,
reportPageTitle: 'custom-title',
embeddedScreenshots: true,
inlineAssets: true,
saveAllAttempts: false,
autoOpen: true
},
Before using cypress-parallel everything was ok with cypress-mochawesome-reporter
But now I want to run tests in parallel and I'm doing it via cy:parallel script
"cy:run": "cypress run",
"cy:parallel" : "cypress-parallel -s cy:run -t 2 -d cypress/e2e -a '\"--headless --browser chrome\"'"
Here is an error:
Start generate report process
Read and merge jsons from "C:\Users\Администратор\WebstormProjects\cypress_task\cypress\reports\html\.jsons"
Copy screenshots folder from "C:\Users\Администратор\WebstormProjects\cypress_task\cypress\screenshots" to "C:\Users\Администратор\WebstormProjects\cypress_task\cypress\reports\html\screenshots"
An error was thrown in your plugins file while executing the handler for the after:run event.
The error we received was:
Error: Pattern C:\Users\Администратор\WebstormProjects\cypress_task\cypress\reports\html\.jsons/*.json matched no report files
In report folder, I only see screenshot of a fallen test
How to fix the error and combine cypress-mochawesome-reporter with cypress-parallel ?

How to use the result of an NPM script in another NPM script?

It might be simple. But I can't get it work.
Let's consider the simple (and troncated) package.json below.
{
"name": "appName",
"version": "1.0.0",
"TEST": "1-0-0",
"scripts": {
"TEST_IN_SCRIPTS": " echo ${npm_package_version} | sed 's/\\./-/g' ",
"deploy": "gcloud app deploy --version ${npm_package_scripts_TEST_IN_SCRIPTS}"
},
"dependencies": {
"express": "^4.16.2",
...
}
}
I want to deploy an app with --version equals version (aka 1.0.0).
However, Google App Engine does not allow . (dot).
The idea is then to deploy a 1-0-0 (instead of 1.0.0) which is allowed by GAE.
TEST_IN_SCRIPTS works and returns 1-0-0
However, when I pass ${npm_package_scripts_TEST_IN_SCRIPTS} to deploy script, it fails because it returns the string ${npm_package_scripts_TEST_IN_SCRIPTS} instead of its result (1-0-0).
Any clue to make it works?
Thanks.
Try piping the output of the TEST_IN_SCRIPTS:
"deploy": "npm run TEST_IN_SCRIPTS | xargs gcloud app deploy --version",
I've found a simple solution that works for me.
Thanks #Juan, you show me the road!
Below my troncated package.json
{
"name": "...",
"version": "1.0.1",
"scripts": {
"deploy": "GAE_VERSION=$(echo ${npm_package_version} | sed 's/\\./-/g') && gcloud app deploy --version $GAE_VERSION"
},
"dependencies": {...},
"devDependencies": {...}
}
This is - in fact - pretty simple.
get npm_package_version and change with sed . by - (GAE is ok with hyphen)
Assign the result to a variable (here : GAE_VERSION)
Use gcloud command to deploy using GAE_VERSION variable.
An identical question where I post this very same answer.

Nightwatch cucumber generate static html report

I'm trying to generate a report on nightwatch cucumber using nightwatch-html-reporter but I'm not able to make it work.
The library I am using is [Nightwatch html Reporter][1], I followed the steps described but I'm getting the error when reading the reports directory:
Reading reports directory...
events.js:160
throw er; // Unhandled 'error' event
^
TypeError: Cannot read property 'name' of undefined
The correct configuration would be:
Create file in root tests, same level of package.json.
var reporter = require('cucumber-html-reporter');
var options = {
theme: 'bootstrap',
jsonFile: 'reports/cucumber.json',
output: 'reports/index.html',
reportSuiteAsScenarios: true,
launchReport: false
};
reporter.generate(options);
And configure runner in package.json. Example:
"scripts": {
"e2e": "npm-run-all test report --continue-on-error",
"test": "nightwatch",
"report": "node create-html-report.js"
}
Make sure it is set up this way, or enter more details of the error.

grunt-contrib-jshint not show message

i have created a ne node project, i have installed a lot of modules and create the first index.js file
package.json
{
"name": "parser-test",
"version": "1.0.0",
"description": "parser test",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "luca bottoni",
"license": "ISC",
"dependencies": {
"node-cmd": "^3.0.0"
},
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-jshint": "^1.1.0",
"grunt-contrib-watch": "^1.0.0",
"grunt-exec": "^3.0.0"
}
}
index.js (it's failed, because i want see jshint message!)
console.log("test");
a={a=6};
if i send the cmd jshint index.js from project folder i see (work fine):
index.js: line 3, col 5, Expected ':' and instead saw '='.
1 error
now i want use the grunt task to check my file
Gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch:{
scripts:{
files:["./*.js"],
tasks:['jshint']
}
},
jshint: {
files: ['Gruntfile.js',"index.js"]
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-jshint');
// Default task(s).
grunt.registerTask('default', ['watch:scripts']);
grunt.registerTask('jshint', ['jshint']);
};
now i try use single task jshint with command grunt jshint, but the don't see any message. if i use the watch, watch task only the first time and after not check any change on file index.js.
i can not understand why the direct command jshint work, but the task grunt stay freezed
i have resolved after many test
i have turn-on verbose information on grunt command
grunt jshint --verbose and i have see infinite:
Running "jshint" task
Running "jshint" task
Running "jshint" task
Running "jshint" task
Running "jshint" task
Running "jshint" task
The register task and task in definition have the same name "jshint" and i have modified the name in grunt.registerTask('jshints', ['jshint']);
now work fine

Dev dependencies needed for Heroku webpack build

I was under the impression that I wouldn't need the devDependencies to be included when I deploy to Heroku a react based app, using Webpack. For example, here's my package.
"scripts": {
"test": "",
"start": "./node_modules/.bin/babel-node server",
"build": "rimraf dist && export NODE_ENV=production && webpack --config ./webpack.production.config.js --progress --profile --colors",
"postinstall": "node deploy",
"eslint": "eslint .",
"jscs": "jscs ."
},
and deploy.js:
if (process.env.NODE_ENV === 'production') {
var child_process = require('child_process');
child_process.exec("webpack -p --config webpack.production.config.js", function (error, stdout, stderr) {
console.log('stdout: ' + stdout);
console.log('stderr: ' + stderr);
if (error !== null) {
console.log('exec error: ' + error);
}
});
}
and the Procfile
web ./node_modules/.bin/babel-node server.js
However, when I push to Heroku, I'm constantly getting a webpack command not recognized, so I included all of the devDependencies as normal dependencies to have it working. Am I missing something here?
Heroku set NPM_CONFIG_PRODUCTION to true by default to install dependencies only. If you would like to install devDependencies, you can disable production mode:
$ heroku config:set NPM_CONFIG_PRODUCTION=false
However, since you usually don’t want all devDependencies in your production builds, it’s preferable to move only the dependencies you actually need for production builds into dependencies (bower, grunt, gulp, etc).

Resources