fix: 🐛 fixed sample cypress project (#362)

* fix: 🐛 fixed sample cypress project

* fix: 🐛 fixed cypress issue in step files

Author: WasiqB

.gitignore

@@ -12,4 +12,5 @@ videos/
 screenshots/
 downloads/
 *.ndjson
-dist/
+dist/
+.run/

examples/cypress/.bin/cucumber-json-formatter

@@ -1,9 +1,12 @@
 {
   "json": {
-    "enabled": true
+    "enabled": true,
+    "formatter": ".bin/cucumber-json-formatter",
+    "output": ".run/reports/json/cucumber-report.json"
   },
   "messages": {
-    "enabled": false
+    "enabled": true,
+    "output": ".run/reports/messages/cucumber-report.json"
   },
   "stepDefinitions": ["cypress/e2e/[filepath].step.{js,ts}"]
 }

examples/cypress/.cypress-cucumber-preprocessorrc.json

@@ -0,0 +1,27 @@
+# Sample Cypress Cucumber
+
+This is a sample project for Cypress and Cucumber with Multiple HTML Cucumber Reporter.
+
+## Setup
+
+Install PNPM by following the guide [here](https://pnpm.io/installation).
+
+## Run the Test
+
+Install the dependencies by running the following command:
+
+```shell
+pnpm install
+```
+
+Run the tests by using the following command:
+
+```shell
+pnpm test
+```
+
+Generate the HTML reporter by using the following command:
+
+```shell
+pnpm report
+```

examples/cypress/README.md

@@ -0,0 +1,67 @@
+import { generate } from "multiple-cucumber-html-reporter";
+import dayjs from "dayjs";
+import { readFileSync } from "fs";
+
+const data = readFileSync("./.run/results.json", {
+  encoding: "utf8",
+  flag: "r",
+});
+const runInfos = JSON.parse(data);
+
+let mapOs = (os: string) => {
+  if (os.startsWith("win")) {
+    return "windows";
+  } else if (os.startsWith("darwin")) {
+    return "osx";
+  } else if (os.startsWith("linux")) {
+    return "linux";
+  } else if (os.startsWith("ubuntu")) {
+    return "ubuntu";
+  } else if (os.startsWith("android")) {
+    return "android";
+  } else if (os.startsWith("ios")) {
+    return "ios";
+  }
+};
+
+generate({
+  jsonDir: "./.run/reports/json/",
+  reportPath: "./.run/html-report/",
+  openReportInBrowser: true,
+  metadata: {
+    browser: {
+      name:
+        runInfos.browserName === "chromium" ? "chrome" : runInfos.browserName,
+      version: runInfos.browserVersion,
+    },
+    platform: {
+      name: mapOs(runInfos.osName),
+      version: runInfos.osVersion,
+    },
+  },
+  customData: {
+    title: "Run Info",
+    data: [
+      { label: "Project", value: "Sample " },
+      { label: "Release", value: "1.0.0" },
+      { label: "Cypress Version", value: runInfos["cypressVersion"] },
+      { label: "Node Version", value: runInfos["nodeVersion"] },
+      {
+        label: "Execution Start Time",
+        value: dayjs(runInfos["startedTestsAt"]).format(
+          "YYYY-MM-DD HH:mm:ss.SSS"
+        ),
+      },
+      {
+        label: "Execution End Time",
+        value: dayjs(runInfos["endedTestsAt"]).format(
+          "YYYY-MM-DD HH:mm:ss.SSS"
+        ),
+      },
+    ],
+  },
+  pageTitle: "Sample",
+  reportName: "Sample",
+  displayDuration: true,
+  displayReportTime: true,
+});

examples/cypress/cucumber-html-report.js

@@ -0,0 +1,52 @@
+import { defineConfig } from "cypress";
+import { writeFileSync } from "fs";
+import createBundler from "@bahmutov/cypress-esbuild-preprocessor";
+import {
+  addCucumberPreprocessorPlugin,
+  afterRunHandler,
+} from "@badeball/cypress-cucumber-preprocessor";
+import { createEsbuildPlugin } from "@badeball/cypress-cucumber-preprocessor/esbuild";
+
+async function setupNodeEvents(
+  on: Cypress.PluginEvents,
+  config: Cypress.PluginConfigOptions
+): Promise<Cypress.PluginConfigOptions> {
+  await addCucumberPreprocessorPlugin(on, config);
+
+  on(
+    "file:preprocessor",
+    createBundler({
+      plugins: [createEsbuildPlugin(config)],
+    })
+  );
+  on(
+    "after:run",
+    async (
+      results:
+        | CypressCommandLine.CypressRunResult
+        | CypressCommandLine.CypressFailedRunResult
+    ): Promise<void> => {
+      if (results) {
+        await afterRunHandler(config);
+        writeFileSync(".run/results.json", JSON.stringify(results));
+      }
+    }
+  );
+
+  return config;
+}
+
+export default defineConfig({
+  e2e: {
+    specPattern: "cypress/e2e/**/*.feature",
+    setupNodeEvents,
+    defaultCommandTimeout: 60000,
+    pageLoadTimeout: 60000,
+    video: false,
+    experimentalInteractiveRunEvents: true,
+    downloadsFolder: "./cypress/.run/downloads",
+    fixturesFolder: "./cypress/.run/fixtures",
+    screenshotsFolder: "./cypress/.run/screenshots",
+    videosFolder: "./cypress/.run/videos",
+  },
+});

examples/cypress/cucumber-html-report.ts

@@ -1,7 +1,7 @@
-/// <reference types="Cypress"/>
+/// <reference types="cypress" />
 
 import { Given } from "@badeball/cypress-cucumber-preprocessor";
 
-Given("I open the gmail", function () {
+Given("I open the gmail", () => {
   cy.visit("https://mail.google.com");
 });

examples/cypress/cypress.config.js

@@ -2,8 +2,6 @@
 
 import { Given } from "@badeball/cypress-cucumber-preprocessor";
 
-// Import the necessary modules
-
-Given("I open the google", function () {
+Given("I open the google", () => {
   cy.visit("https://www.google.co.in");
 });