Has anyone had much experience of generating good detailed reports from Cypress tests using Mochawesome as the report engine?
I've followed the info on the Mochawesome GIT page but what I get is rather dull!!
I'd like to be able to include the odd screen-shot and the output from the assertions - here's the current cypress.json file......
{
"projectId": "haw8v6",
"baseUrl": "https://obmng.dbm.guestline.net/",
"chromeWebSecurity": false,
"reporter" : "mochawesome",
"reporterOptions" : {
"reportFilename" : "DBM Smoke-Test",
"overwrite": true,
"inline": true
}
}
I've been toying with var addContext = require('mochawesome/addContext'); but with little joy.
Suggestions gratefully received.
Thanks
As per request below - very basic example of addContext
var addContext = require('mochawesome/addContext');
describe('DBM Smoketests', function() {
it('E2E Hotel2 WorldPay System', function() {
cy.visit('https://obmng.dbm.guestline.net/');
cy.url().should('include','/obmng.dbm');
addContext(this,'URL is correct');
//loads hotel 2
cy.get('.jss189 > div > .jss69 > .jss230').click();
After much hacking about, I found a way to use Mochawesome addContext in Cypress.
Note, you can only make one addContext call per test (this is a Mochawesome limitation).
describe('DBM Smoketests', function() {
it('E2E Hotel2 WorldPay System', function() {
cy.visit('https://obmng.dbm.guestline.net/');
cy.url().should('include','/obmng.dbm');
Cypress.on('test:after:run', (test) => {
addContext({ test }, {
title: 'This is my context title',
value: 'This is my context value'
})
});
});
});
The second param is the context to be attached to the test, and it must have non-empty title and a value properties.
What you get in the mochawesome.json output is
...
"suites": [
{
...
"tests": [
{
"title": "E2E Hotel2 WorldPay System",
...
"context": "{\n \"title\": \"This is my context title\",\n \"value\": \"This is my context value\"\n}",
"code": "...",
...
}
],
In mochawesome.html, on clicking the test you get
Additional Test Context
This is my context title:
This is my context value
I have not tried it out with value types other than string.
Note for anyone starting out with Mochawesome in Cypress, it looks like you can only get a Mochawesome report with running cypress run, not with cypress open - although there may be a way around this using mocha's multiple reporter functionality.
Yes confirmed work! It's possible to call once in each test like this:
it('Should shine the test report!!!', () => {
cy.get('li').should('have.length.greaterThan', 0);
addTestContext('String','giphy');
addTestContext('Link','https://giphy.com');
addTestContext('Image','https://media.giphy.com/media/tIIdsiWAaBNYY/giphy.gif');
addTestContext('Image','https://media.giphy.com/media/tIIdsiWAaBNYY/giphy.gif');
});
function addTestContext(title, value) {
cy.once('test:after:run', test => addContext({ test }, { title, value }));
}
Related
I'd like to print arbitrary outputs to the terminal per each test after calling cypress run. The outputs should appear regardless of each test's success/failure. I've followed the instructions from dozens of online answers - nothing worked for me.
I'm using Cypress 8.7.0. Thanks!
It's pretty much what #nozik linked to. In your cypress.config.js add:
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
on('task', {
log(message) {
// Then to see the log messages in the terminal
// cy.task("log", "my message");
console.log(message +'\n\n');
return null;
},
});
},
},
});
which can then be called in your tests with:
cy.task('log', 'Display some logging');
I am doing a unit test. Cypress now gives an errror. it cannot find the test. but in the login.js file I have written code. I don't understand why it can't find the test, it does exist.
the testcode:
describe("login", () => {
beforeEach(() => {
cy.visit("http://localhost:8080");
});
});
The error:
integration\login.js
We could not detect any tests in the above file. Write some tests and re-run.
Path:
server/cypress/integration/pad/login.js
If this is all of your test code, it really doesn't have any test. Add any 'it' and cypress will recognize it as a test.
describe("login", () => {
beforeEach(() => {
cy.visit("http://localhost:8080");
});
it('Example test', () => {
expect(add(1, 2)).to.eq(3)
})
});
just edit the file... from your project's root folder to bypass cypress. Try that too to test, here it worked.
{
//... other file settings
"exclude": ["src/main/test/cypress"]
}
note: If you are using eslint, you will have to do one more configuration. Since eslint doesn't let us have a TypScrip file inside the project without being treated.
First: Create a file in the project root called tsconfig-eslint.json. It will extend the other tsconfig but ignore the deletion. Put the following content in it:
{
"extends": "./tsconfig.json",
"exclude": []
}
Second: modify the parseOptions of the .eslint.json file to point to the newly created file:
{
//... rest of the settings
"parserOptions": {
"project": "./tsconfig-eslint.json"
},
}
I'm currently trying to get code coverage on my fastify routes using Mocha and NYC.
I've tried instrumenting the code beforehand and then running the tests on the instrumented code as well as just trying to setup NYC in various ways to get it to work right.
Here is my current configuration. All previous ones produced the same code coverage output):
nyc config
"nyc": {
"extends": "#istanbuljs/nyc-config-typescript",
"extension": [
".ts",
".tsx"
],
"exclude": [
"**/*.d.ts",
"**/*.test.ts"
],
"reporter": [
"html",
"text"
],
"sourceMap": true,
"instrument": true
}
Route file:
const routes = async (app: FastifyInstance, options) => {
app.post('/code', async (request: FastifyRequest, response: FastifyReply<ServerResponse>) => {
// route logic in here
});
};
The integration test:
import * as fastify from fastify;
import * as sinon from 'sinon';
import * as chai from 'chai';
const expect = chai.expect;
const sinonChai = require('sinon-chai');
chai.use(sinonChai);
describe('When/code POST is called', () => {
let app;
before(() => {
app = fastify();
// load routes for integration testing
app.register(require('../path/to/code.ts'));
});
after(() => {
app.close();
});
it('then a code is created and returned', async () => {
const {statusCode} = await apiTester.inject({
url: '/code',
method: 'POST',
payload:{ code: 'fake_code' }
});
expect(statusCode).to.equal(201);
});
});
My unit test call looks like the following:
nyc mocha './test/unit/**/*.test.ts' --require ts-node/register --require source-map-support/register --recursive
I literally get 5% code coverage just for the const routes =. I'm really banging my head trying to figure this one out. Any help would be greatly appreciated! None of the other solutions I have investigated on here work.
I have a detailed example for typescript + mocha + nyc. It also contains fastify tests including route tests (inject) as well as mock + stub and spy tests using sinon. All async await as well.
It's using all modern versions and also covers unused files as well as VsCode launch configs. Feel free to check it out here:
https://github.com/Flowkap/typescript-node-template
Specifically I think that
instrumentation: true
messes up the results. Heres my working .nycrc.yml
extends: "#istanbuljs/nyc-config-typescript"
reporter:
- html
- lcovonly
- clover
# those 2 are for commandline outputs
- text
- text-summary
report-dir: coverage
I have proper coverage even for mocked ans tub parts of fastify in my above mentioned example.
This might be repeated question for you guys but really I didn't get answer yet.
Here is my multi-capabilities definition in protractor config file.
I want to access the deviceName parameter value. How can I do it?
exports.config = {
directConnect:true,
multiCapabilities: [
{
browserName: 'chrome',
'chromeOptions': {
'mobileEmulation': {
'deviceName': 'iPad'
}
}
}
],
Tried under onPrepare but not giving multi-capabilities values
browser.getCapabilities().then(function(c) {
console.log(c.get('deviceName'));
});
Not sure about solving with getCapabilities(), but you should be able to solve this with getProcessedConfig().
getProcessedConfig will return a promise of your entire configuration settings (and a few protractor defaults). So taking your example:
browser.getProcessedConfig().then((c) => {
console.log(c.capabilities.chromeOptions.mobileEmulation.deviceName);
});
You could make console.log(process.env) in the onPrepare block and find what you want.
Try getProcessedConfig()
http://www.protractortest.org/#/api?view=ProtractorBrowser.prototype.getProcessedConfig
Or just plain old stupid:
let device_name = 'iPad'
exports.config = {
directConnect: true,
multiCapabilities: [{
browserName: 'chrome',
chromeOptions: {
mobileEmulation: {
deviceName: device_name
}
}
}],
onPrepare: function () {
console.log('Device name will be', device_name);
}
Fetching device name worked as advised by Gunderson but now I am running into different issue I am unable to access the variable value outside the code block while in onPrepare.
onPrepare: function () {
browser.getProcessedConfig().then(function (c) {
return global.deviceName
c.capabilities.chromeOptions.mobileEmulation.deviceName;
}).then(function () {
console.log("Device Name is:" + global.deviceName);
customDevice = global.deviceName;
}
);
};
customDevice not printing any value.....which is define as global variable on top of the configuration file.
I know might be doing silly mistake in accessing it...:)
I'm trialing Wallaby.js using VS2013. I've got it running for one test class, lets call it queueTests.ts, which covers the class queue.ts. The tests run and pass (or fail if I break them) and it's pretty cool.
The problem I have is that in the queue.ts file I do not see any code coverage indicators in the left hand margin. I do see them in queueTests.ts file. I guess I've got some configuration wrong but I can't work it out. In queue.ts I do see the little angle bracket indicator at the end of the line my cursor is on and it changes state as the tests pass and fail.
Here is my config. It is a solution item because me code and tests are in different projects.
module.exports = function(w) {
return {
files: [
// lib files
{ pattern: "./path/Scripts/jquery-1.9.1.js", load: true, instrument: false },
{ pattern: "./path/Scripts/underscore.js", load: true, instrument: false },
// references
{ pattern: "./path/refernencedfile.ts", load: true, instrument: true },
{ pattern: "./path/anotherrefencedfile.ts", load: true, instrument: true },
// class under test
{ pattern: "./path/path2/Queue.ts", load: true, instrument: true },
// test helpers
{ pattern: "./Tests/TestSupport/**/*.ts", load: true, instrument: false }
],
tests: [
"./Tests/path2/queuetests.ts"
],
compilers: {
"**/*.ts": w.compilers.typeScript({ orderFilesByReferenceComments: true })
}
};
};
Try removing ./ from all of your paths in wallaby config.