Allure report generates non-nested steps that flood the report

[rcapdefer]

I am using javascript-cucumber and had been using @shelex adapter until upgrading to latest cypress version. I have put this adapter as first import in e2e.js but the commands are still not being collapsed, any idea why this is happening? I'm attaching below a piece of the report so that you can see what i'm dealing with. Thanks in advance!

[mmisty]

Hello, @rcapdefer
I can't find javascript-cucumber plugin, though I have released new version of adapter recently

It is 0.14.1 version
Some docs are here https://github.com/mmisty/cypress-allure-adapter/blob/main/docs/gherkin.md
Let me know if you still have issues

[rcapdefer]

Hi, @mmisty thanks for your reply. I am using @badeball/cypress-cucumber-preprocessor and i've just updated to v 0.14.2 but no luck, my allure report still looks like a neverending list. Any other tips of what I could try?
Thanks

[mmisty]

@rcapdefer I can help to solve your problem only if I see your configuration, screenshots and etc.
Could you please attach them.

[mmisty]

I'm attaching below a piece of the report so that you can see what i'm dealing with

the screenshot has never been attached so I don't know what is the problem

[rcapdefer]

package.json :

{
  "name": "automated-tests",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "cypress:open": "cypress open",
    "cypress:run": "cypress run",
    "cy:report": "node ./cypress/reports.js",
    "cy:int_profile": "export CYPRESS_ENVIRONMENT=int;npx cypress run --spec \"**/features/profiles/*.feature\" -e allure=true --browser chrome --headless",
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@percy/cli": "^1.0.0-beta.68",
    "@percy/cypress": "^3.1.2",
    "cypress-cucumber-attach-screenshots-to-failed-steps": "^1.0.0",
    "cypress-cucumber-preprocessor": "^4.3.1",
    "cypress-terminal-report": "^5.3.9",
    "@cucumber/cucumber": "10.0.1",
    "core-js": "^3.27.1",
    "query-string": "^8.1.0"
  },
  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": false,
    "step_definitions": "cypress/e2e",
    "cucumberJson": {
      "generate": true,
      "outputFolder": "cypress/cucumber-json",
      "filePrefix": "",
      "fileSuffix": ".cucumber"
    }
  },
  "dependencies": {
    "@mmisty/cypress-allure-adapter": "0.14.2",
    "allure-commandline": "^2.13.8",
    "cypress": "^13.3.2",
    "creditcard-generator": "^0.0.7",
    "cypress-tags": "latest",
    "line-reader": "^0.4.0"
  }
}

e2e.js :

import '@mmisty/cypress-allure-adapter/';
import '@mmisty/cypress-allure-adapter/support';
// Import commands.js using ES2015 syntax:
import './commands'

const options = {
    // Log console output only
    collectTypes: ["cons:log", "cons:info", "cons:warn", "cons:error"],
};

require('cypress-terminal-report/src/installLogsCollector')(options);
// Alternatively you can use CommonJS syntax:
// require('./commands')

Cypress.on('uncaught:exception', (err, runnable) => {
    // returning false here prevents Cypress from
    // failing the test
    return false
})

cypress.config.js :

const { defineConfig } = require('cypress')
const { configureAllureAdapterPlugins } = require("@mmisty/cypress-allure-adapter/plugins");


module.exports = defineConfig({
  video: false,
  viewportHeight: 1024,
  viewportWidth: 1024,
  defaultCommandTimeout: 40000,
  chromeWebSecurity: false,
  pageLoadTimeout: 70000,
  redirectionLimit: 300,
  watchForFileChanges: false,
  allure: true,
  allureResultsPath: 'allure-results',
  allureClearSkippedTests: true,
  csvLogPath: 'allure-results',
  projectId: 'tbym2j',
  requestTimeout: 25000,
  responseTimeout: 35000,
  includeShadowDom: true,
  experimentalMemoryManagement: true,
  e2e: {
    testIsolation:true,
    env: {
      allure: true,
      allureCleanResults: true,
      allureSkipCommands: 'wrap',
      allureResults: 'allure-results',
    },
    setupNodeEvents(on, config) {
      configureAllureAdapterPlugins(on, config);
      return require('./cypress/plugins/index.js')(on, config)
    },
    specPattern: 'cypress/e2e/**/*.feature',
    excludeSpecPattern: '*.js',
  },
})

index.js :

const cucumber = require('cypress-cucumber-preprocessor').default;
//const allureWriter = require('@mmisty/cypress-allure-adapter/writer');
const fs = require('fs')
const path = require('path');

module.exports = (on, config) => {
  on('file:preprocessor', cucumber());
  require('cypress-terminal-report/src/installLogsPrinter')(on);

  //allureWriter(on, config);
  on('task', {
    log (message) {
      console.log(message);
      return null;
    },
    readFileMaybe (filename) {
      if (fs.existsSync(filename)) {
        return fs.readFileSync(filename, 'utf8')
      }

      return null
    },
    getZapiPackagePath() {
      return path.dirname(require.resolve("cypress-zapi-util/package.json"));
    }
  });

  return config;
}

[mmisty]

@rcapdefer sorry it is really hard to read.
Could you do that again in proper way (select text that is code and click code button in editor) and also please attach screenshots of the report.

[rcapdefer]

@mmisty I've edited my last comment, and trying again to attach screenshot.

[mmisty]

@rcapdefer Thank you!
could you please also attach

• your test that is shown on screenshot
• screenshot of cypress runner during test execution please (with given / when/ then steps on the screen).
  I was testing gherkin integration with this plugin https://www.npmjs.com/package/@badeball/cypress-cucumber-preprocessor but not with that one you've sent (I don't now whether the one you use has grouping of steps)

[mmisty]

@rcapdefer I see that plugin you use has been updated 2 years ago. So I suggest moving to https://www.npmjs.com/package/@badeball/cypress-cucumber-preprocessor - it has better support (and it is tested with allure adapter)

[rcapdefer]

This is the test i'm running. Do you need the console output of it?

I've tried moving to https://www.npmjs.com/package/@badeball/cypress-cucumber-preprocessor but i can't get the config right for my setup, always getting errors, like something is incompatible, and the documentation is for typescript and my setup is with javascript

[rcapdefer]

Do you have an example with @badeball/cypress-cucumber-preprocessor using your adapter?

[mmisty]

@rcapdefer here are 2 examples for now https://github.com/mmisty/cypress-allure-adapter-example/

• adapter with js
• adapter with js and @badeball/cypress-cucumber-preprocessor

[rcapdefer]

Hello @mmisty I've followed your example but my report still looks the same way. i'm attaching below my files. I can't find an explanation why the report is generated differently. Maybe you can spot something that is out of place, it would help me very much!

Thanks in advance

package.json

{
  "name": "automated-tests",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "cypress:open": "cypress open",
    "cypress:run": "cypress run",
    "cy:report": "node ./cypress/reports.js",
    "cy:int_test": "export CYPRESS_ENVIRONMENT=int;npx cypress-tags run TAGS='$npm_config_tag' -e allure=true --browser chrome --headed",
    "cy:int_smoke": "export CYPRESS_ENVIRONMENT=int;npx cypress-tags run -e TAGS='@regression and (not @onprem or not @wip)' --config-file cypress.config.js,allure=true --browser chrome --headed",
    "cy:int_profile": "export CYPRESS_ENVIRONMENT=int;npx cypress run --spec \"**/features/profiles/*.feature\" -e allure=true --browser chrome --headless",

  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@percy/cli": "^1.0.0-beta.68",
    "@percy/cypress": "^3.1.2",

    "allure-commandline": "^2.13.8",

    "cypress-cucumber-attach-screenshots-to-failed-steps": "^1.0.0",
    "cypress-terminal-report": "^3.4.0",
    "@cucumber/cucumber": "8.10.0",
    "core-js": "^3.27.1",
    "query-string": "^8.1.0",
    "events": "^3.3.0"
  },

  "cypress-cucumber-preprocessor": {
    "stepDefinitions": [
      "cypress/e2e/step_definitions/agent_role_steps.js",
      "cypress/e2e/step_definitions/basket_steps.js",
      "cypress/e2e/step_definitions/checkout_steps.js",
      "cypress/e2e/step_definitions/navigation_steps.js",
      "cypress/e2e/step_definitions/order_management_steps.js",
      "cypress/e2e/step_definitions/product_steps.js"
    ]
  },

  "dependencies": {
    "@badeball/cypress-cucumber-preprocessor": "^19.0.1",
    "@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
    "@mmisty/cypress-allure-adapter": "^0.15.2",
    "allure-commandline": "^2.24.1",
    "cypress": "^13.5.0",
    "creditcard-generator": "^0.0.7",
    "cypress-tags": "latest",
    "line-reader": "^0.4.0"
  }
}

e2e.js:

import '@mmisty/cypress-allure-adapter/support';
// Import commands.js using ES2015 syntax:
import './commands'

const options = {
    // Log console output only
    collectTypes: ["cons:log", "cons:info", "cons:warn", "cons:error"],
};

require('cypress-terminal-report/src/installLogsCollector')(options);
// Alternatively you can use CommonJS syntax:
// require('./commands')

Cypress.Allure?.on('test:started', () => {
    Cypress.Allure.host('my-host');
    Cypress.Allure.thread(Cypress.env('thread') ?? '01');
})

Cypress.on('uncaught:exception', (err, runnable) => {
    // returning false here prevents Cypress from failing the test
    return false
})

cypress.config.js:

const createEsbuildPlugin = require("@badeball/cypress-cucumber-preprocessor/esbuild").createEsbuildPlugin;
const  createBundler = require("@bahmutov/cypress-esbuild-preprocessor");

const { defineConfig } = require("cypress");
const { configureAllureAdapterPlugins } = require("@mmisty/cypress-allure-adapter/plugins");
const { addCucumberPreprocessorPlugin } = require("@badeball/cypress-cucumber-preprocessor");
const EventForwarder = require("./event-forwarder");
const CypressTerminalReport = require('cypress-terminal-report/src/installLogsPrinter')

const eventForwarder = new EventForwarder();


module.exports = defineConfig({
  video: false,
  viewportHeight: 1024,
  viewportWidth: 1024,
  defaultCommandTimeout: 40000,
  chromeWebSecurity: false,
  pageLoadTimeout: 70000,
  redirectionLimit: 300,
  watchForFileChanges: false,
  allure: true,
  allureResultsPath: 'allure-results',
  allureClearSkippedTests: true,
  csvLogPath: 'allure-results',
  projectId: 'tbym2j',
  requestTimeout: 25000,
  responseTimeout: 35000,
  includeShadowDom: true,
  experimentalMemoryManagement: true,

  trashAssetsBeforeRuns: true,
  e2e: {
    testIsolation:true,
    allure:true,
    allureSkipCommands: 'wrap',
    allureResults: '../../allure-results',
    baseUrl: 'http://localhost:8080/',
    setupNodeEvents: async function (cyOn, config) {
      const on = eventForwarder.on;
      const reporter = configureAllureAdapterPlugins(on, config);

      console.log(' === ENVIRONMENT:');
      console.log(config.env);
      console.log(' === ');

      const cucumberBundler = createBundler({
        define: { global: 'window' },
        plugins: [createEsbuildPlugin(config)],
      });

      cyOn('file:preprocessor', cucumberBundler);

      // this is to write categories and environment information
      on('before:run', details => {
        reporter?.writeEnvironmentInfo({
          info: {
            // any env info you want to see in report
            os: details.system.osName,
            osVersion: details.system.osVersion,
            browser: details.browser?.displayName + ' ' + details.browser?.version,
          },
        });

        reporter?.writeCategoriesDefinitions({ categories: './allure-error-categories.json' });
      });

      await addCucumberPreprocessorPlugin(on, config);

      eventForwarder.forward(cyOn);

      CypressTerminalReport(on)

      on('task', {
        log(message) {
          console.log(message);
          return null;
        }
      })
      // important to return config
      return config;
    },
    specPattern: 'cypress/e2e/features/**/*.feature',
    supportFile: 'cypress/support/e2e.js',
    downloadsFolder: 'cypress/downloads',
    fixturesFolder: 'cypress/fixtures',
    screenshotsFolder: 'cypress/screenshots',
    excludeSpecPattern: '*.js'
  },
})

[rcapdefer]

runner looks something like this:

[mmisty]

@rcapdefer

You have incorrect config (you didn't add env variables correctly) - see below
With your current configuration I'm surprised why you ever get any allure results (may be you had an old ones?):

const createEsbuildPlugin = require("@badeball/cypress-cucumber-preprocessor/esbuild").createEsbuildPlugin;
const  createBundler = require("@bahmutov/cypress-esbuild-preprocessor");

const { defineConfig } = require("cypress");
const { configureAllureAdapterPlugins } = require("@mmisty/cypress-allure-adapter/plugins");
const { addCucumberPreprocessorPlugin } = require("@badeball/cypress-cucumber-preprocessor");
const EventForwarder = require("./event-forwarder");
const CypressTerminalReport = require('cypress-terminal-report/src/installLogsPrinter')

const eventForwarder = new EventForwarder();


module.exports = defineConfig({
  video: false,
  viewportHeight: 1024,
  viewportWidth: 1024,
  defaultCommandTimeout: 40000,
  chromeWebSecurity: false,
  pageLoadTimeout: 70000,
  redirectionLimit: 300,
  watchForFileChanges: false,
  allure: true,                                        // << delete here, should be env variable
  allureResultsPath: 'allure-results',  // << delete here, should be env variable
  allureClearSkippedTests: true,       // << delete here (this is from shelex)
  csvLogPath: 'allure-results',
  projectId: 'tbym2j',
  requestTimeout: 25000,
  responseTimeout: 35000,
  includeShadowDom: true,
  experimentalMemoryManagement: true,
  trashAssetsBeforeRuns: true,
  env: {
   // put your env variable here
  }
  e2e: {
    testIsolation:true,
    allure:true,                                         // << delete here, should be env variable
    allureSkipCommands: 'wrap',          // << delete here, should be env variable
    allureResults: '../../allure-results',    // << delete here, should be env variable
    baseUrl: 'http://localhost:8080/',
    setupNodeEvents: async function (cyOn, config) {
      const on = eventForwarder.on;
      const reporter = configureAllureAdapterPlugins(on, config);

      console.log(' === ENVIRONMENT:');
      console.log(config.env);
      console.log(' === ');

      const cucumberBundler = createBundler({
        define: { global: 'window' },
        plugins: [createEsbuildPlugin(config)],
      });

      cyOn('file:preprocessor', cucumberBundler);

      // this is to write categories and environment information
      on('before:run', details => {
        reporter?.writeEnvironmentInfo({
          info: {
            // any env info you want to see in report
            os: details.system.osName,
            osVersion: details.system.osVersion,
            browser: details.browser?.displayName + ' ' + details.browser?.version,
          },
        });

        reporter?.writeCategoriesDefinitions({ categories: './allure-error-categories.json' });
      });

      await addCucumberPreprocessorPlugin(on, config);

      eventForwarder.forward(cyOn);

      CypressTerminalReport(on)

      on('task', {
        log(message) {
          console.log(message);
          return null;
        }
      })
      // important to return config
      return config;
    },
    specPattern: 'cypress/e2e/features/**/*.feature',
    supportFile: 'cypress/support/e2e.js',
    downloadsFolder: 'cypress/downloads',
    fixturesFolder: 'cypress/fixtures',
    screenshotsFolder: 'cypress/screenshots',
    excludeSpecPattern: '*.js'
  },
})

[rcapdefer]

@mmisty Thanks for the help, i think i've finally managed to make it work. Commands seem to be nested now, at least for this short test.

However i've noticed since im using you adapter some of the web elements are highlighted wrong when double-clicking on text, see screenshot below. Do you want me to open a separate thread for this?

[rcapdefer]

I am using allure report to log some info that i'm using in some manual checks, copying from the report is a bit of a pain now

[mmisty]

@rcapdefer I'm providing only plugin to generate allure results from cypress tests, I'm not anyhow related to allure report itself.
You can write to qameta.io about your findings https://allurereport.org/docs/