cypress-qase-reporter 3.0.2 → 3.1.0

package/README.md

@@ -138,6 +138,10 @@ parameterize your tests.
 - `qase.step` - create a step in the test case
 - `qase.attach` - attach a file or content to the test case
 
+#### Cucumber-specific
+
+- `addCucumberStep(stepName)` - manually add a Cucumber step to Qase report (useful for `@badeball/cypress-cucumber-preprocessor`)
+
 For detailed instructions on using annotations and methods, refer to [Usage](docs/usage.md).
 
 For example:
@@ -255,71 +259,23 @@ module.exports = cypress.defineConfig({
 Check out the example of configuration for multiple reporters in the
 [demo project](../examples/cypress/cypress.config.js).
 
-If you use Cucumber, you need to add the following configuration in `cypress.config.js`:
+## Cucumber/Gherkin Integration
 
-```javascript
-import cypress from 'cypress';
-import { afterSpecHook } from 'cypress-qase-reporter/hooks';
-
-const cucumber = require('cypress-cucumber-preprocessor').default;
+If you use Cucumber with Gherkin feature files in your Cypress tests, Qase reporter provides full support for both the legacy `cypress-cucumber-preprocessor` and the modern `@badeball/cypress-cucumber-preprocessor`.
 
-module.exports = cypress.defineConfig({
-  reporter: 'cypress-multi-reporters',
-  reporterOptions: {
-    reporterEnabled: 'cypress-mochawesome-reporter, cypress-qase-reporter',
-    cypressMochawesomeReporterReporterOptions: {
-      charts: true,
-    },
-    cypressQaseReporterReporterOptions: {
-      debug: true,
+The reporter can automatically:
 
-      testops: {
-        api: {
-          token: 'api_key',
-        },
+- Extract test cases from feature files
+- Report individual Gherkin steps (Given/When/Then) with their execution status
+- Link test results to Qase test cases using `@QaseID` tags
+- Attach screenshots and videos to test results
 
-        project: 'project_code',
-        uploadAttachments: true,
+**📚 For detailed instructions, configuration examples, and troubleshooting, see the [Cucumber Integration Guide](docs/cucumber.md).**
 
-        run: {
-          complete: true,
-        },
-      },
+**Quick links:**
 
-      framework: {
-        cypress: {
-          screenshotsFolder: 'cypress/screenshots',
-          videosFolder: 'cypress/videos',
-          uploadDelay: 10, // Delay in seconds before uploading video files (default: 10)
-        },
-      },
-    },
-  },
-  video: false,
-  e2e: {
-    setupNodeEvents(on, config) {
-      on('file:preprocessor', cucumber());
-      require('cypress-qase-reporter/plugin')(on, config);
-      require('cypress-qase-reporter/metadata')(on);
-      on('after:spec', async (spec, results) => {
-         await afterSpecHook(spec, config);
-       });
-    },
-    specPattern: 'cypress/e2e/*.feature',
-  },
-});
-```
-
-And add the following lines in `support/e2e.js` file:
-
-```javascript
-import { enableCucumberSupport } from "cypress-qase-reporter";
-
-enableCucumberSupport();
-```
-
-Check out the example of configuration for multiple reporters in the
-[demo project](../examples/cypressCucumber/cypress.config.js).
+- [Example project for @badeball/cypress-cucumber-preprocessor](../examples/cypressBadeballCucumber/)
+- [Example project for cypress-cucumber-preprocessor (legacy)](../examples/cypressCucumber/)
 
 ## Requirements
 

package/changelog.md

@@ -1,3 +1,17 @@
+# cypress-qase-reporter@3.1.0
+
+## What's new
+
+- Added support for Cucumber steps reporting for `@badeball/cypress-cucumber-preprocessor`.
+- Added `addCucumberStep` function to manually add a Cucumber step to Qase report.
+
+# cypress-qase-reporter@3.0.3
+
+## What's new
+
+- Added support for status filter in the test run.
+- Improved error handling.
+
 # cypress-qase-reporter@3.0.2
 
 ## What's new

package/dist/cucumber.d.ts

@@ -1 +1,31 @@
+/**
+ * Enable automatic Cucumber step reporting for cypress-cucumber-preprocessor (legacy).
+ * This function automatically captures Gherkin steps and reports them to Qase.
+ *
+ * @example
+ * ```javascript
+ * // In cypress/support/e2e.js
+ * import { enableCucumberSupport } from 'cypress-qase-reporter/cucumber';
+ *
+ * enableCucumberSupport();
+ * ```
+ */
 export declare const enableCucumberSupport: () => void;
+/**
+ * Manually add a cucumber step to Qase report.
+ * Use this function in Before/After hooks or directly in step definitions
+ * when using @badeball/cypress-cucumber-preprocessor.
+ *
+ * @param stepName - The name of the step (e.g., "Given I am on the homepage")
+ *
+ * @example
+ * ```typescript
+ * import { Before } from '@badeball/cypress-cucumber-preprocessor';
+ * import { addCucumberStep } from 'cypress-qase-reporter/cucumber';
+ *
+ * Before(function() {
+ *   addCucumberStep(this.pickle.name);
+ * });
+ * ```
+ */
+export declare const addCucumberStep: (stepName: string) => void;

package/dist/cucumber.js

@@ -1,25 +1,79 @@
 "use strict";
+/// <reference types="cypress" />
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.enableCucumberSupport = void 0;
+exports.addCucumberStep = exports.enableCucumberSupport = void 0;
 const CUCUMBER_TASK_NAME = 'qaseCucumberStepStart';
+/**
+ * Enable automatic Cucumber step reporting for cypress-cucumber-preprocessor (legacy).
+ * This function automatically captures Gherkin steps and reports them to Qase.
+ *
+ * @example
+ * ```javascript
+ * // In cypress/support/e2e.js
+ * import { enableCucumberSupport } from 'cypress-qase-reporter/cucumber';
+ *
+ * enableCucumberSupport();
+ * ```
+ */
 const enableCucumberSupport = () => {
-    registerCypressEventListeners();
-};
-exports.enableCucumberSupport = enableCucumberSupport;
-const registerCypressEventListeners = () => {
     Cypress.on('log:added', handleLogAdded);
 };
+exports.enableCucumberSupport = enableCucumberSupport;
 const handleLogAdded = (_, entry) => {
     if (isCucumberStep(entry)) {
         processCucumberStep(entry);
     }
 };
-const isCucumberStep = ({ attributes: { name, event, instrument } }) => {
+const isCucumberStep = (entry) => {
+    const { attributes: { name, event, instrument } } = entry;
     return instrument === 'command' && !event && name === 'step';
 };
-const processCucumberStep = ({ attributes: { displayName, message } }) => {
+const processCucumberStep = (entry) => {
+    const { attributes: { displayName, message } } = entry;
     sendTaskMessage(`${displayName ?? ''} ${message}`);
 };
 const sendTaskMessage = (message) => {
     cy.task(CUCUMBER_TASK_NAME, message, { log: false });
 };
+/**
+ * Manually add a cucumber step to Qase report.
+ * Use this function in Before/After hooks or directly in step definitions
+ * when using @badeball/cypress-cucumber-preprocessor.
+ *
+ * @param stepName - The name of the step (e.g., "Given I am on the homepage")
+ *
+ * @example
+ * ```typescript
+ * import { Before } from '@badeball/cypress-cucumber-preprocessor';
+ * import { addCucumberStep } from 'cypress-qase-reporter/cucumber';
+ *
+ * Before(function() {
+ *   addCucumberStep(this.pickle.name);
+ * });
+ * ```
+ */
+const addCucumberStep = (stepName) => {
+    // Use Cypress.log to avoid command queue issues
+    // The step will be collected by MetadataManager
+    try {
+        if (stepName && stepName.trim()) {
+            Cypress.log({
+                name: 'qase:step',
+                message: stepName,
+                consoleProps: () => ({
+                    Step: stepName,
+                }),
+            });
+            // Also send to task for backend collection
+            // We need to wrap this in a way that doesn't interfere with command queue
+            cy.then(() => {
+                cy.task(CUCUMBER_TASK_NAME, stepName, { log: false });
+            });
+        }
+    }
+    catch (e) {
+        // Silently fail if Cypress is not available
+        console.debug('Failed to add cucumber step:', e);
+    }
+};
+exports.addCucumberStep = addCucumberStep;

package/dist/fileSearcher.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileSearcher = void 0;
 const fs = __importStar(require("fs"));

package/dist/hooks.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import PluginConfigOptions = Cypress.PluginConfigOptions;
 import Spec = Cypress.Spec;
 declare function beforeRunHook(options: PluginConfigOptions): Promise<void>;

package/dist/hooks.js

@@ -4,7 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.afterSpecHook = exports.afterRunHook = exports.beforeRunHook = void 0;
+exports.beforeRunHook = beforeRunHook;
+exports.afterRunHook = afterRunHook;
+exports.afterSpecHook = afterSpecHook;
 const qase_javascript_commons_1 = require("qase-javascript-commons");
 const configSchema_1 = require("./configSchema");
 const resultsManager_1 = require("./metadata/resultsManager");
@@ -28,7 +30,6 @@ async function beforeRunHook(options) {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call
     await reporter.startTestRunAsync();
 }
-exports.beforeRunHook = beforeRunHook;
 async function afterRunHook(options) {
     const configLoader = new qase_javascript_commons_1.ConfigLoader(configSchema_1.configSchema);
     const config = configLoader.load();
@@ -44,7 +45,6 @@ async function afterRunHook(options) {
     });
     await reporter.complete();
 }
-exports.afterRunHook = afterRunHook;
 async function afterSpecHook(spec, options) {
     const results = resultsManager_1.ResultsManager.getResults();
     if (results) {
@@ -131,4 +131,3 @@ async function afterSpecHook(spec, options) {
     }
     resultsManager_1.ResultsManager.clear();
 }
-exports.afterSpecHook = afterSpecHook;

package/dist/index.cjs.d.ts

@@ -1,3 +1,3 @@
 export { qase } from './mocha';
-export { enableCucumberSupport } from './cucumber';
+export { enableCucumberSupport, addCucumberStep } from './cucumber';
 export { ResultsManager } from './metadata/resultsManager';

package/dist/index.cjs.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResultsManager = exports.enableCucumberSupport = exports.qase = void 0;
+exports.ResultsManager = exports.addCucumberStep = exports.enableCucumberSupport = exports.qase = void 0;
 var mocha_1 = require("./mocha");
 Object.defineProperty(exports, "qase", { enumerable: true, get: function () { return mocha_1.qase; } });
 var cucumber_1 = require("./cucumber");
 Object.defineProperty(exports, "enableCucumberSupport", { enumerable: true, get: function () { return cucumber_1.enableCucumberSupport; } });
+Object.defineProperty(exports, "addCucumberStep", { enumerable: true, get: function () { return cucumber_1.addCucumberStep; } });
 var resultsManager_1 = require("./metadata/resultsManager");
 Object.defineProperty(exports, "ResultsManager", { enumerable: true, get: function () { return resultsManager_1.ResultsManager; } });

package/dist/metadata/models.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import { Attachment } from 'qase-javascript-commons';
 export interface Metadata {
     title?: string | undefined;

package/dist/metadata.js

@@ -68,4 +68,10 @@ module.exports = function (on) {
             return null;
         },
     });
+    on('task', {
+        log(message) {
+            console.log(message);
+            return null;
+        },
+    });
 };

package/dist/mocha.d.ts

@@ -1,104 +1,14 @@
-/// <reference types="cypress" />
-/// <reference types="cypress" />
-/// <reference types="cypress" />
-/// <reference types="cypress" />
-/// <reference types="node" />
 import { Test } from 'mocha';
 export declare const qase: {
     (caseId: number | string | number[] | string[], test: Test): Test;
-    /**
-     * Set a title for the test case
-     * @param {string} value
-     * @example
-     * it('test', () => {
-     *    qase.title("Title");
-     *    cy.visit('https://example.com');
-     * });
-     */
     title(value: string): Cypress.Chainable<JQuery<void>>;
-    /**
-     * Set fields for the test case
-     * @param {Record<string, string>} values
-     * @example
-     * it('test', () => {
-     *    qase.fields({description: "Description"});
-     *    cy.visit('https://example.com');
-     * });
-     */
     fields(values: Record<string, string>): Cypress.Chainable<JQuery<void>>;
-    /**
-     * Ignore the test case result in Qase
-     * @example
-     * it('test', () => {
-     *    qase.ignore();
-     *    cy.visit('https://example.com');
-     * });
-     */
     ignore(): Cypress.Chainable<JQuery<void>>;
-    /**
-     * Set parameters for the test case
-     * @param {Record<string, string>} values
-     * @example
-     * it('test', () => {
-     *    qase.parameters({param01: "value01"});
-     *    cy.visit('https://example.com');
-     * });
-     */
     parameters(values: Record<string, string>): Cypress.Chainable<JQuery<void>>;
-    /**
-     * Set group parameters for the test case
-     * @param {Record<string, string>} values
-     * @example
-     * it('test', () => {
-     *    qase.groupParameters({param01: "value01"});
-     *    cy.visit('https://example.com');
-     * });
-     */
     groupParameters(values: Record<string, string>): Cypress.Chainable<JQuery<void>>;
-    /**
-     * Set a suite for the test case
-     * @param {string} value
-     * @example
-     * it('test', () => {
-     *    qase.suite("Suite 01");
-     *    cy.visit('https://example.com');
-     * });
-     */
     suite(value: string): Cypress.Chainable<JQuery<void>>;
-    /**
-     * Set a comment for the test case
-     * @param {string} value
-     * @example
-     * it('test', () => {
-     *    qase.comment("Some comment");
-     *    cy.visit('https://example.com');
-     * });
-     */
     comment(value: string): Cypress.Chainable<JQuery<void>>;
-    /**
-     * Add a step to  the test case
-     * @param {string} name
-     * @param {() => T | PromiseLike<T>} body
-     * @example
-     * it('test', () => {
-     *    qase.step("Some step", () => {
-     *      // some actions
-     *    });
-     *    cy.visit('https://example.com');
-     * });
-     */
     step<T = void>(name: string, body: () => T | PromiseLike<T>): Cypress.Chainable<JQuery<void>>;
-    /**
-     * Attach a file to the test case or the step
-     * @param attach
-     * @example
-     * it('test', () => {
-     *   qase.attach({ name: 'attachment.txt', content: 'Hello, world!', contentType: 'text/plain' });
-     *   qase.attach({ paths: '/path/to/file'});
-     *   qase.attach({ paths: ['/path/to/file', '/path/to/another/file']});
-     *   cy.visit('https://example.com');
-     *  });
-     */
     attach(attach: {
         name?: string;
         paths?: string | string[];

package/dist/reporter.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import { MochaOptions, reporters, Runner } from 'mocha';
 import { ConfigLoader, TestStatusEnum } from 'qase-javascript-commons';
 import { ReporterOptionsType } from './options';

package/dist/reporter.js

@@ -198,9 +198,7 @@ class CypressQaseReporter extends mocha_1.reporters.Base {
             steps: steps,
             id: (0, uuid_1.v4)(),
             execution: {
-                status: test.state
-                    ? CypressQaseReporter.statusMap[test.state]
-                    : qase_javascript_commons_1.TestStatusEnum.invalid,
+                status: (0, qase_javascript_commons_1.determineTestStatus)(test.err || null, test.state || 'failed'),
                 start_time: this.testBeginTime / 1000,
                 end_time: end_time / 1000,
                 duration: duration,

package/dist/utils/tagParser.js

@@ -15,15 +15,25 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.extractTags = void 0;
+exports.extractTags = extractTags;
 const fs = __importStar(require("fs"));
 /**
  * Extracts tags for a given scenario name from a Gherkin feature file.
@@ -58,4 +68,3 @@ function extractTags(filePath, scenarioName) {
     }
     return tags;
 }
-exports.extractTags = extractTags;

package/docs/cucumber.md

@@ -0,0 +1,329 @@
+# Cucumber/Gherkin Integration with Qase Reporter
+
+This guide explains how to integrate Qase reporter with Cucumber/Gherkin tests in Cypress using either the legacy `cypress-cucumber-preprocessor` or the newer `@badeball/cypress-cucumber-preprocessor`.
+
+---
+
+## Table of Contents
+
+- [Choosing a Preprocessor](#choosing-a-preprocessor)
+- [Configuration for @badeball/cypress-cucumber-preprocessor (Recommended)](#configuration-for-badeballcypress-cucumber-preprocessor-recommended)
+- [Configuration for cypress-cucumber-preprocessor (Legacy)](#configuration-for-cypress-cucumber-preprocessor-legacy)
+- [Cucumber Steps Reporting](#cucumber-steps-reporting)
+- [Examples](#examples)
+
+---
+
+## Choosing a Preprocessor
+
+There are two Cucumber preprocessors available for Cypress:
+
+- **`@badeball/cypress-cucumber-preprocessor`** (Recommended) - Actively maintained, modern implementation
+- **`cypress-cucumber-preprocessor`** (Legacy) - Original implementation, now deprecated
+
+This guide covers both, but we recommend using `@badeball/cypress-cucumber-preprocessor` for new projects.
+
+---
+
+## Configuration for @badeball/cypress-cucumber-preprocessor (Recommended)
+
+### Installation
+
+```bash
+npm install -D @badeball/cypress-cucumber-preprocessor
+npm install -D @bahmutov/cypress-esbuild-preprocessor
+npm install -D cypress-qase-reporter
+```
+
+### Cypress Configuration
+
+Update your `cypress.config.js`:
+
+```javascript
+import cypress from 'cypress';
+import { afterSpecHook } from 'cypress-qase-reporter/hooks';
+const createBundler = require('@bahmutov/cypress-esbuild-preprocessor');
+const addCucumberPreprocessorPlugin = require('@badeball/cypress-cucumber-preprocessor').addCucumberPreprocessorPlugin;
+const createEsbuildPlugin = require('@badeball/cypress-cucumber-preprocessor/esbuild').createEsbuildPlugin;
+
+module.exports = cypress.defineConfig({
+  reporter: 'cypress-multi-reporters',
+  reporterOptions: {
+    reporterEnabled: 'cypress-qase-reporter',
+    cypressQaseReporterReporterOptions: {
+      debug: true,
+      testops: {
+        api: {
+          token: 'api_token',
+        },
+        project: 'project_code',
+        uploadAttachments: true,
+        run: {
+          complete: true,
+        },
+      },
+      framework: {
+        cypress: {
+          screenshotsFolder: 'cypress/screenshots',
+        },
+      },
+    },
+  },
+  video: false,
+  e2e: {
+    specPattern: 'cypress/e2e/**/*.feature',
+    async setupNodeEvents(on, config) {
+      // 1. Set up the Cucumber preprocessor FIRST
+      await addCucumberPreprocessorPlugin(on, config);
+      on(
+        'file:preprocessor',
+        createBundler({
+          plugins: [createEsbuildPlugin(config)],
+        })
+      );
+
+      // 2. Set up the Qase reporter plugin
+      require('cypress-qase-reporter/plugin')(on, config);
+      require('cypress-qase-reporter/metadata')(on);
+
+      // 3. Register the after:spec hook
+      on('after:spec', async (spec, results) => {
+        await afterSpecHook(spec, config);
+      });
+
+      return config;
+    },
+  },
+});
+```
+
+### Cucumber Steps Reporting
+
+To automatically capture and report Gherkin steps to Qase, create a hooks file.
+
+Create `cypress/support/step_definitions/hooks.js`:
+
+```javascript
+import { BeforeStep } from '@badeball/cypress-cucumber-preprocessor';
+import { addCucumberStep } from 'cypress-qase-reporter/cucumber';
+
+// Automatically report each Gherkin step to Qase
+BeforeStep(function({ pickleStep }) {
+  const keyword = pickleStep.keyword || '';
+  const stepText = `${keyword}${pickleStep.text}`;
+  addCucumberStep(stepText);
+});
+```
+
+This hook will automatically:
+- Capture each Gherkin step (Given/When/Then/And/But)
+- Report it to Qase with the correct execution status (passed/failed)
+- Include step details in your test results
+
+**Note:** Step reporting is optional. If you only need test-level results without individual step details, you can skip this configuration.
+
+### Manual Step Reporting (Alternative)
+
+If you prefer more control, you can manually add steps in your step definitions:
+
+```javascript
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
+import { addCucumberStep } from 'cypress-qase-reporter/cucumber';
+
+Given('I am on the homepage', () => {
+  addCucumberStep('Given I am on the homepage');
+  cy.visit('https://example.com');
+});
+
+When('I click the button', () => {
+  addCucumberStep('When I click the button');
+  cy.get('button').click();
+});
+
+Then('I should see the result', () => {
+  addCucumberStep('Then I should see the result');
+  cy.get('.result').should('be.visible');
+});
+```
+
+---
+
+## Configuration for cypress-cucumber-preprocessor (Legacy)
+
+### Installation
+
+```bash
+npm install -D cypress-cucumber-preprocessor
+npm install -D cypress-qase-reporter
+```
+
+### Cypress Configuration
+
+Update your `cypress.config.js`:
+
+```javascript
+import cypress from 'cypress';
+import { afterSpecHook } from 'cypress-qase-reporter/hooks';
+
+module.exports = cypress.defineConfig({
+  reporter: 'cypress-multi-reporters',
+  reporterOptions: {
+    reporterEnabled: 'cypress-qase-reporter',
+    cypressQaseReporterReporterOptions: {
+      debug: true,
+      testops: {
+        api: {
+          token: 'api_token',
+        },
+        project: 'project_code',
+        uploadAttachments: true,
+        run: {
+          complete: true,
+        },
+      },
+      framework: {
+        cypress: {
+          screenshotsFolder: 'cypress/screenshots',
+        },
+      },
+    },
+  },
+  video: false,
+  e2e: {
+    specPattern: '**/*.feature',
+    async setupNodeEvents(on, config) {
+      require('cypress-qase-reporter/plugin')(on, config);
+      require('cypress-qase-reporter/metadata')(on);
+
+      on('after:spec', async (spec, results) => {
+        await afterSpecHook(spec, config);
+      });
+
+      return config;
+    },
+  },
+});
+```
+
+### Cucumber Steps Reporting
+
+For the legacy preprocessor, add the following to your `cypress/support/e2e.js` file:
+
+```javascript
+import { enableCucumberSupport } from 'cypress-qase-reporter/cucumber';
+
+enableCucumberSupport();
+```
+
+This will automatically capture all Gherkin steps and report them to Qase. No additional configuration is needed.
+
+---
+
+## Cucumber Steps Reporting
+
+### What Gets Reported
+
+When you enable Cucumber steps reporting, the following information is sent to Qase for each step:
+
+- **Step text** - The full Gherkin step (e.g., "Given I am on the homepage")
+- **Step status** - Whether the step passed or failed
+- **Step timing** - When the step started execution
+- **Step attachments** - Any screenshots or files attached during the step
+
+### Example Feature File
+
+```gherkin
+Feature: User Login
+
+  @QaseID(1)
+  Scenario: Successful login
+    Given I am on the login page
+    When I enter valid credentials
+    And I click the login button
+    Then I should see the dashboard
+    And I should see my username
+
+  @QaseID(2)
+  Scenario: Failed login
+    Given I am on the login page
+    When I enter invalid credentials
+    And I click the login button
+    Then I should see an error message
+```
+
+### Adding Qase IDs
+
+You can associate Qase test case IDs with your scenarios using tags:
+
+- Single ID: `@QaseID(123)`
+- Multiple IDs: `@QaseID(123,456)`
+
+The Qase reporter will automatically extract these IDs and link the test results to the corresponding test cases in Qase.
+
+---
+
+## Examples
+
+### Complete Working Examples
+
+Check out our example projects:
+
+- **[@badeball/cypress-cucumber-preprocessor Example](../../examples/cypressBadeballCucumber/)** - Modern implementation with automatic step reporting
+- **[cypress-cucumber-preprocessor Example](../../examples/cypressCucumber/)** - Legacy implementation
+
+Each example includes:
+- Complete Cypress configuration
+- Feature files with Gherkin scenarios
+- Step definitions
+- Qase reporter integration
+- Automatic step reporting setup
+
+### Running the Examples
+
+```bash
+# Navigate to the example directory
+cd examples/cypressBadeballCucumber
+
+# Install dependencies
+npm install
+
+# Set your Qase credentials in cypress.config.js
+
+# Run tests
+npm test
+```
+
+---
+
+## Troubleshooting
+
+### Steps are not being reported
+
+**For @badeball/cypress-cucumber-preprocessor:**
+- Ensure you've created the `hooks.js` file with the `BeforeStep` hook
+- Verify the file is in `cypress/support/step_definitions/` directory
+- Check that you're importing `addCucumberStep` from `'cypress-qase-reporter/cucumber'`
+
+**For cypress-cucumber-preprocessor (legacy):**
+- Verify you've called `enableCucumberSupport()` in `cypress/support/e2e.js`
+- Ensure you're importing from `'cypress-qase-reporter/cucumber'`
+
+### Cypress command queue errors
+
+If you see errors like "Cypress detected that you returned a promise from a command", make sure you're using the provided `addCucumberStep` function, which properly handles the Cypress command queue.
+
+### Test results not appearing in Qase
+
+- Verify your API token is correct in `cypress.config.js`
+- Check that your project code matches your Qase project
+- Enable `debug: true` in reporter options to see detailed logs
+- Ensure `mode: 'testops'` is set in your configuration
+
+---
+
+## Additional Resources
+
+- [Qase Reporter Configuration](../README.md#configuration)
+- [Qase Reporter Usage Guide](./usage.md)
+- [@badeball/cypress-cucumber-preprocessor Documentation](https://github.com/badeball/cypress-cucumber-preprocessor)
+- [Cypress Documentation](https://docs.cypress.io/)

package/docs/usage.md

@@ -194,3 +194,65 @@ it('test', () => {
   cy.visit('https://example.com');
 });
 ```
+
+---
+
+## Cucumber Steps Reporting
+
+### For @badeball/cypress-cucumber-preprocessor
+
+When using `@badeball/cypress-cucumber-preprocessor`, you can automatically report Cucumber/Gherkin steps to Qase using the `addCucumberStep` function in a `BeforeStep` hook.
+
+#### Automatic Step Reporting
+
+Create a file `cypress/support/step_definitions/hooks.js`:
+
+```javascript
+import { BeforeStep } from '@badeball/cypress-cucumber-preprocessor';
+import { addCucumberStep } from 'cypress-qase-reporter/cucumber';
+
+// Automatically report each Gherkin step to Qase
+BeforeStep(function({ pickleStep }) {
+  const keyword = pickleStep.keyword || '';
+  const stepText = `${keyword}${pickleStep.text}`;
+  addCucumberStep(stepText);
+});
+```
+
+This will automatically capture each step (Given/When/Then/And/But) and report it to Qase with its execution status.
+
+#### Manual Step Reporting
+
+Alternatively, you can manually add steps in your step definitions:
+
+```javascript
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
+import { addCucumberStep } from 'cypress-qase-reporter/cucumber';
+
+Given('I am on the homepage', () => {
+  addCucumberStep('Given I am on the homepage');
+  cy.visit('https://example.com');
+});
+
+When('I click the button', () => {
+  addCucumberStep('When I click the button');
+  cy.get('button').click();
+});
+
+Then('I should see the result', () => {
+  addCucumberStep('Then I should see the result');
+  cy.get('.result').should('be.visible');
+});
+```
+
+### For cypress-cucumber-preprocessor (legacy)
+
+For the legacy `cypress-cucumber-preprocessor`, steps are automatically captured. Add the following to your `support/e2e.js` file:
+
+```javascript
+import { enableCucumberSupport } from 'cypress-qase-reporter/cucumber';
+
+enableCucumberSupport();
+```
+
+No additional configuration is needed - all Gherkin steps will be automatically reported to Qase.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cypress-qase-reporter",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "description": "Qase Cypress Reporter",
   "homepage": "https://github.com/qase-tms/qase-javascript",
   "sideEffects": false,
@@ -51,7 +51,7 @@
   "author": "Qase Team <support@qase.io>",
   "license": "Apache-2.0",
   "dependencies": {
-    "qase-javascript-commons": "~2.4.1",
+    "qase-javascript-commons": "~2.4.5",
     "uuid": "^9.0.1"
   },
   "peerDependencies": {