This is allure adapter for Cypress providing realtime results. It is useful when using Allure TestOps - so you can watch tests execution. It adds tests, steps, suites and screenshots during tests execution.
In the same time you can generate Allure Report from these results, and it will have all necessary fields.
Some settings were taken from @shelex/cypress-allure-plugin, thank you!
Features:
- automatically adds all cypress commands to report (this is configurable)
- automatically adds hooks (before all, before each, after each, after all) to tests
- if before all or before each hook fails cypress skips all tests in spec file. This plugin will create tests that were not run for allure report with unknown status - so total number of tests would be the same from run to run
- has interface to add metadata like tags, links, owner, host and others.
- has interface to add additional steps
- Wraps custom commands into parent step, so report is cleaner
- has interface to set status message for tests -
cy.allure().testDetails({ message: "This test is skipped because needs to be reviewed" })
- writes test files after each test - so you can watch execution in Allure TestOps
- gherkin support
- supports latest version of cypress (13.x)
Example report is here - Allure Report example
- Installation
- Environment variables
- To see allure report
- Allure Interface
- Advanced
- Examples
- Allure TestOps
- Troubleshooting
- See also:
- Credits
- Change log
- Support
Install adapter by npm i -D @mmisty/cypress-allure-adapter
Import @mmisty/cypress-allure-adapter/support
into your support/index.ts
file (or e2e.ts
/ e2e.js
file)
// e2e.ts
// import cypress-allure-adapter first to have all custom
// commands being collapsed in report as parent command
import '@mmisty/cypress-allure-adapter/support';
// import other custom commands here
If you want all custom commands to be wrapped in report import adapter before adding(importing) any custom commands
Alternative way
Add allureAdapterSetup();
in your support/index.ts
file (or e2e.ts
file)
import { allureAdapterSetup } from '@mmisty/cypress-allure-adapter';
allureAdapterSetup();
If you want all custom commands to be correctly wrapped in report register adapter before adding custom commands:
import { allureAdapterSetup } from '@mmisty/cypress-allure-adapter';
allureAdapterSetup();
// register custom commands here
Javascript configuration
// e2e.js
// import cypress-allure-adapter first to have all custom
// commands being collapsed in report as parent command
import '@mmisty/cypress-allure-adapter/support';
// import other custom commands here
Add configureAllureAdapterPlugins(on, config);
into your plugins file:
// cypress.config.ts
import { configureAllureAdapterPlugins } from '@mmisty/cypress-allure-adapter/plugins';
export default defineConfig({
e2e: {
setupNodeEvents(on, config) {
configureAllureAdapterPlugins(on, config);
return config;
},
// ...
}
});
Javascript configuration
// cypress.config.js
const { configureAllureAdapterPlugins } = require("@mmisty/cypress-allure-adapter/plugins");
export default defineConfig({
e2e: {
setupNodeEvents(on, config) {
configureAllureAdapterPlugins(on, config);
return config;
},
// ...
}
});
In cypress.config.ts
or cypress.config.js
or in your environment files set allure
env var to true
.
See other environment variables
[Typescript]: No need to setup types - should be done automatically
That's it! 🎉
tmsPrefix
and issuePrefix
- you can specify prefix to tms using this.
Also link can be specified with *
- it will be replced with id.
// cypress.config.ts
env: {
tmsPrefix: 'http://jira.com'
issuePrefix: 'http://jira.com/PROJECT-1/*/browse'
}
// test.spec.ts
cy.allure().tms('ABC-1'); // http://jira.com/ABC-1
cy.allure().issue('ABC-2'); // http://jira.com/PROJECT-1/ABC-2/browse
In order to see Allure Report you need to install the CLI.
For nodejs you can use allure-commandline:
npm i -D allure-commandline
After installed allure
command will be available.
To see a report in browser, run in console
allure serve
If you want to generate html version, run in console
allure generate
Report example: Allure Report
There is allure interface available to use from tests - cy.allure()
and Cypress.Allure
.
For details see interface
This plugin uses after:spec
plugins event to write videos and to write test results for Allure TestOps.
If you also use it in your cypress project cypress-allure-adapter
after:spec
would be rewritten.
To avoid that you can add await reporter.afterSpec({ results });
into your Cypress plugin action after:spec
:
// cypress.config.ts
import { configureAllureAdapterPlugins } from '@mmisty/cypress-allure-adapter/plugins';
export default defineConfig({
e2e: {
setupNodeEvents(on, config) {
const reporter = configureAllureAdapterPlugins(on, config);
on('after:spec', async (spec, results) => {
// your code in after spec
await reporter.afterSpec({ results });
})
return config;
},
// ...
}
});
Some operations like writing environment information, execution info or categories definitions should be done once for a run.
To do that you need to modify your setupNodeEvents function:
// cypress.config.ts
import { configureAllureAdapterPlugins } from '@mmisty/cypress-allure-adapter/plugins';
export default defineConfig({
e2e: {
setupNodeEvents(on, config) {
const reporter = configureAllureAdapterPlugins(on, config);
// after that you can use allure to make operations on cypress start,
// or on before run start
on('before:run', details => {
reporter?.writeEnvironmentInfo({
info: {
os: details.system.osName,
osVersion: details.system.osVersion,
},
});
});
return config;
},
// ...
}
});
If you need to add labels, tags or other meta info for tests you can use the following
additional events for Cypress.Allure
interface:
-
test:started
is fired after tests started but before all "before each" hooks -
test:ended
is fired after all "after each" hooks
Cypress.Allure.on('test:started', test => {
Cypress.Allure.label('tag', 'started');
});
And also if you need to do something with test before it ends:
Cypress.Allure.on('test:ended', test => {
Cypress.Allure.label('tag', 'ended');
Cypress.Allure.step('before end step');
});
You can put this into your support/index.ts
file.
- Here is Javascript example of using the plugin - cypress-allure-adapter-example
- Allure Report example
To have correct suites tree you need to set up Allure TestOps:
- Go to
Administration
section (for the whole application) ->Custom Fields
section - Create 3 new fields if they not exist already:
Parent Suite
,Suite
,Sub Suite
- Go to
Settings
section for the project ->Custom Fields
- Add mapping to newly added fields:
- type key
parentSuite
and select from dropdown custom fieldParent Suite
- type key
suite
and select from dropdown custom fieldSuite
- type key
subSuite
and select from dropdown custom fieldSub Suite
- type key
- Open
Trees
section from project settings - Add or modify
Suites
tree with the following chain:Parent Suite
->Suite
->Sub Suite
To see debug log run cypress with DEBUG env variable like: DEBUG=cypress-allure* npm run cy:open
- make sure you have enabled plugin by 'allure' env variable
- to be continued
- make sure you are not overriding confi in plugins (env variables, and events)
- to be continued
Thanks to @shelex, without his plugin this plugin would have been harder to start.
Mostly, I develop this plugin during my free time. However, I need your support to take it to the next level. Your donation will directly contribute to the further development of this plugin, allowing me to dedicate more time and resources to enhancing its features, improving user experience, and ensuring its compatibility with the latest versions. Help this plugin to grow by donating - paypal.