Nightwatch cucumber generate static html report - nightwatch.js

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.

Related

Unable to load .mjs file and run tests with Mocha

I am unable to load an .mjs file and run tests with mocha.
I have tried mocha v.7.2.0 with flag --experimental-modules and v.10.0.0 without flag.
I am using node v.14.15.4.
The import statement that I have in my code to test is:
import * as XLSX from 'xlsx/xlsx.mjs';
NB: this import statement works 100% fine while building my app with Webpack.
The error I get when I try to run unit tests on this code with Mocha is:
(node:5452) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use node --trace-warnings ... to show where the warning was created)
C:\Users......webapp\node_modules\xlsx\xlsx.mjs:81
export { set_cptable };
^^^^^^
SyntaxError: Unexpected token 'export' at wrapSafe (internal/modules/cjs/loader.js:979:16)
My mocha invocation is a vanilla mocha \"src/**/*.spec.js\", which I call through an npm task; as I mentioned before, flag --experimental-modules does not help.
My .babelrc, which (I suspect) is used to transpile my code, is the following:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-transform-runtime",
"react-hot-loader/babel",
["module-resolver", {
"alias": {
"#src": "./src"
}
}]
],
"env": {
"coverage": {
"plugins": [
"istanbul"
]
}
}
}
What can I do to solve this problem?

Cypress error Cypress.moment.duration (moment is not defined)

I'm using Cypress and upgraded to version to v8.3.1 and a new error keeps showing up.
Cannot read property 'duration' of undefined
Because this error occurred during a after all hook we are skipping all of the remaining tests.
Location: node_modules/#cypress/code-coverage/support.jsat line210
cy.task('coverageReport', null, {
timeout: Cypress.moment.duration(3, 'minutes').asMilliseconds(),
^
log: false
})
It says that duration cannot be found since Cypress.moment doesn't exist.
I checked the changelog and they removed it:
Cypress.moment() has been removed. Please migrate to a different datetime formatter. See our recipe for example replacements. Addresses #8714.
But since I'm not directly using it, it's in the code coverage included in Cypress, I don't know how to fix it.
Somehow you've obtained an old version of #cypress/code-coverage.
Perhaps you upgraded Cypress and not the code-coverage package?
#cypress/code-coverage#3.2.0 - support.js
after(function generateReport() {
// when all tests finish, lets generate the coverage report
cy.task('coverageReport', {
timeout: Cypress.moment.duration(3, 'minutes').asMilliseconds()
})
})
#cypress/code-coverage#3.9.10 - support.js
after(function generateReport() {
...
cy.task('coverageReport', null, {
timeout: dayjs.duration(3, 'minutes').asMilliseconds(),
log: false
}).then((coverageReportFolder) => {
...
})
npm update #cypress/code-coverage should fix it

Getting svelte-material-ui working with snowpack and sass

I'm trying to get svelte material UI working with snowpack.
I have installed Snowpack and Snowpacks svelte template like so:
npm install --save-dev snowpack#next
npx create-snowpack-app xpapp --template #snowpack/app-template-svelte
This works, the sample svelte page shows up. Next I followed the Svelte Material UI instructions to "bundle this in your own code" as cited on the Usage chapter in the instructions here: https://github.com/hperrin/svelte-material-ui#usage
So I installed Sass and configured it in my snowpack.config.json file like this:
{
"extends": "#snowpack/app-scripts-svelte",
"scripts": {
"build:scss": "sass"
},
"devOptions": {},
"installOptions": {}
}
I followed the (very concise) instructions here: https://www.snowpack.dev/#sass
I've also added an empty src/theme/_smui-theme.scss file to my source files as the instructions say, and I installed the nessecary #smui components.
The problem is that I'm currently getting this error when starting the snowpack dev server:
> snowpack dev
Snowpack Dev Server (Beta)
NOTE: Still experimental, default behavior may change.
Starting up...
⠙ snowpack installing... #smui/icon-button, #smui/top-app-bar, svelte/internal
✘ /home/erik/Projects/svelte-xpapp/xpapp/node_modules/#smui/icon-button/_index.scss
Error: Unexpected character '#' (Note that you need plugins to import files that are not JavaScript)
at error (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:161:30)
at Module.error (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15120:16)
at tryParse (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15009:23)
at Module.setSource (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15410:30)
at ModuleLoader.addModuleSource (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17460:20)
at async ModuleLoader.fetchModule (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17521:9)
at async /home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17491:36
at async Promise.all (index 0)
at async ModuleLoader.fetchModule (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17522:9)
at async Promise.all (index 0)
It seems that the #import statements in Material UI's _index.scss aren't recognized. I figure Snowpack should interpret/transpile .scss files, but it doesn't seem to be doing that.
So I came across the same problem using Svite as well as Snowpack. I was able to use the bare implementation:
// component.svelte <script>
import Button, { Label } from '#smui/button/bare'
import '#smui/button/bare.css'
That's all that's required with Svite.
With Snowpack, I needed to add rollup-plugin-svelte and update snowpack.config.js
// snowpack.config.js
module.exports = {
// ...
installOptions: {
rollup: { plugins: [require('rollup-plugin-svelte')()] }
},
// ...
}
I got it working with these install options:
installOptions: {
rollup: {
plugins: [
require("rollup-plugin-svelte")({
include: ["./node_modules"],
}),
require("rollup-plugin-postcss")({
use: [
[
"sass",
{
includePaths: ["./src/theme", "./node_modules"],
},
],
],
}),
],
},
},
Unfortunately, you'll have to run npx snowpack dev --reload for changes to the theme to take effect.
This won't extract css into .css files.
I also got an error message with the Dialog component during a production build.
Here is a full example: https://github.com/LeanderG/svelte-smui

Cannot read property 'Base' of undefined error using mocha-allure-reporter in Cypress

I am trying to use mocha-allure-reporter in Cypress. I installed mocha and mocha-allure-reporter as dev dependencies and mentioned mocha-allure-reporter as the reporter in cypress.json.
I tried the below code quoted in the example section of mocha allure page:
require('mocha-allure-reporter');
describe("simple test demo", () => {
const testStep = allure.createStep("initial", () => {
console.log("First Test")
});
it("simple passed test", () => {
testStep();
});
}
However, I am getting the following error:
Uncaught TypeError: Cannot read property 'Base' of undefined
...at the first line itself:
require('mocha-allure-reporter')
Upon looking on console, I see that the error is originated at line - var Base = require("mocha").reporters.Base in the Allure reporter :
var Base = require("mocha").reporters.Base;
var Allure = require("allure-js-commons");
...
...
global.allure = new Runtime(allureReporter);
/**
* Initialize a new `Allure` test reporter.
*
* #param {Runner} runner
* #param {Object} opts mocha options
* #api public
*/
function AllureReporter(runner, opts) {
...
...
Please note that the following output xml file is getting created in the allure-results directory once the execution is done.
<?xml version='1.0'?>
<ns2:test-suite xmlns:ns2='urn:model.allure.qatools.yandex.ru' start='1547481439243' stop='1547481439477'>
<name></name>
<title></title>
<test-cases>
<test-case start='1547481439282' status='broken' stop='1547481439460'>
<name>An uncaught error was detected outside of a test</name>
<title>An uncaught error was detected outside of a test</title>
<labels/>
<parameters/>
<steps/>
<attachments/>
<failure>
<message>Cannot read property 'Base' of undefined
This error originated from your test code, not from Cypress.
When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.
Cypress could not associate this error to any specific test.
We dynamically generated a new test to display this failure.</message>
<stack-trace>Uncaught TypeError: Cannot read property 'Base' of undefined
This error originated from your test code, not from Cypress.
When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.
Cypress could not associate this error to any specific test.
We dynamically generated a new test to display this failure.
at Object.<anonymous> (http://localhost:61925/__cypress/tests?p=cypress\integration\Tests\Test.spec.js-289:15125:38)
at Object.98.allure-js-commons (http://localhost:61925/__cypress/tests?p=cypress\integration\Tests\Test.spec.js-289:15201:4)
at o (http://localhost:61925/__cypress/tests?p=cypress\integration\Tests\Test.spec.js-289:1:265)
at http://localhost:61925/__cypress/tests?p=cypress\integration\Tests\Test.spec.js-289:1:316
at Object.40.mocha-allure-reporter (http://localhost:61925/__cypress/tests?p=cypress\integration\Tests\Test.spec.js-289:7566:1)
at o (http://localhost:61925/__cypress/tests?p=cypress\integration\Tests\Test.spec.js-289:1:265)
at r (http://localhost:61925/__cypress/tests?p=cypress\integration\Tests\Test.spec.js-289:1:431)
at http://localhost:61925/__cypress/tests?p=cypress\integration\Tests\Test.spec.js-289:1:460</stack-trace>
</failure>
</test-case>
</test-cases>
</ns2:test-suite>
Please guide me. Thanks!
I was able to use mocha-allure-reporter by simply installing it (along with mocha),
npm install mocha mocha-allure-reporter
and setting up a script in package.json, following the Cypress guidelines for npm reporters here
"scripts": {
...
"cypress:run": "cypress run --reporter mocha-allure-reporter"
Note, I think that these reporters only work with the Cypress 'run' command, not the Cypress 'open' command.
The output is a folder called 'allure-results' which contains a bunch of xml files. I presume these can then be displayed using the Allure framework tool.
Example output file:
<?xml version='1.0'?>
<ns2:test-suite xmlns:ns2='urn:model.allure.qatools.yandex.ru' start='1547254197911' stop='1547254201289'>
<name>Tasks Page</name>
<title>Tasks Page</title>
<test-cases>
<test-case start='1547254199721' status='passed' stop='1547254199815'>
<name>should have a title</name>
<title>should have a title</title>
<labels/>
<parameters/>
<steps/>
<attachments/>
</test-case>
</test-cases>
</ns2:test-suite>
Run allure code in cy.task()
To run the allure code, you need to access the nodejs context through cy.task.
For example,
/cypress/plugins/index.js
require('mocha-allure-reporter');
module.exports = (on) => {
on('task', {
allureTestStep () {
const testStep = allure.createStep("initial", () => {
console.log("First Test")
});
testStep()
return null
}
})
}
spec
describe("simple test demo", () => {
it("simple passed test", () => {
cy.task('allureTestStep')
});
})
Note this produces the console log in the command window where you start Cypress, not the browser console.
However, you can pass a value back from the task into the test, depending on what you are actually trying to do (see docs for details).

How to generate HTML report while using Nightwatch with Mocha

I'm using Nightwatch JS to run my e2e tests with the Mocha runner.
I want to integrate an HTML reporter that with the suite.
I'm trying to use the nightwatch-html-reporter package. But as far as I understand there is a problem with the CLI commands (it's written in the Nightwatch docs that --reporter will not work when using mocha).
I also copied the code sample from nightwatch-html-reporter to my globals.js but it doesn't seem to work either.
The tests run but there is no output anywhere.
Here is my folder structure:
project
src
spec
e2e
globals
globals.js
tests
smoke
testFile.js
nightwatch.conf.js
Here is my conf file:
const seleniumServer = require('selenium-server-standalone-jar');
const chromeDriver = require('chromedriver');
module.exports = {
src_folders: ['src/spec/e2e/tests'],
output_folder: 'report',
page_objects_path: [
'src/spec/e2e/pageObjects'
],
globals_path: 'src/spec/e2e/globals/globals.js',
custom_commands_path: 'src/spec/e2e/customCommands',
selenium: {
start_process: true,
server_path: seleniumServer.path,
host: '127.0.0.1',
port: 4444,
cli_args: {
'webdriver.chrome.driver': chromeDriver.path
}
},
test_runner: {
type: 'mocha',
options: {
ui: 'bdd',
reporter: 'list'
}
},
test_settings: {
default: {
launch_url: 'http://URL',
silent: true,
desiredCapabilities: {
browserName: 'chrome',
javascriptEnabled: true,
acceptSslCerts: true,
chromeOptions: {
args: [
"--no-sandbox",
"start-fullscreen"
]
}
}
}
}
};
And here is my global.js file:
var HtmlReporter = require('nightwatch-html-reporter');
var reporter = new HtmlReporter({
openBrowser: true,
reportsDirectory: __dirname + '/reports'
});
module.exports = {
reporter: reporter.fn
};
I don't think it will work with nightwatch-html-reporter as it is probably not a mocha reporter (but correct me if I'm wrong).
You want to use built in or custom mocha reporters when using nightwatch with mocha.
You can use a custom mocha html reporter like mochawesome but you'll have to hack around a bit and I offer no guarantees as I only tested those hacks lightly.
Here are the instructions to use mochawesome
(tested with
"mocha": "^5.2.0",
"mochawesome": "^3.1.1",
"nightwatch": "^0.9.21")
npm install mochawesome
Modify mochawesome node_modules\mochawesome *.js files to require mocha-nightwatch instead of mocha. (See instructions/explanations towards the end of the answer)
Presuming you're using a nightwatch.conf.js, configure your test runner to the equivalent of
test_runner : {
type : "mocha",
options : {
ui : "bdd",
reporter : require("mochawesome") // Please observe that you can pass a custom report constructor function here, not just reporter names
}
}
Run tests and observe that you still see the default console reporter (spec) but that at the end of the run you also see an output like:
[mochawesome] Report HTML saved to C:\projects\myWebApp\mochawesome-report\mochawesome.html
Open the html report.
This solution is hackish and fragile because nightwatch comes with it's own version of mocha.
When you install nightwatch you will see in your node_modules a mocha-nightwatch folder. This is the mocha that is being used by nightwatch.
However mochawesome doesn't use mocha-nightwatch. If you look at node_modules\mochawsome\dist\mochawesome.js you will see lines of code like:
var Base = require('mocha/lib/reporters/base');
var Spec = require('mocha/lib/reporters/spec');
This means is requires mocha, not mocha-nightwatch.
Those lines should ideally be: require('mocha-nightwatch/...).
So please change them in all *.js files that need fixing.
You could also fork mochawesome and make them like that ;)
Debugging notes:
Try putting some additional console.logs in node_modules\mocha-nightwatch\lib\mocha.js in the Mocha.prototype.reporter function. That's how I figured out what's going on.
If you use Mocha you can always go with mochawsome: https://www.npmjs.com/package/mochawesome
I haven't tried it myself but it looks pretty neat.

Resources