1. Setup Cypress&Cucumber

2. Adding Login Scenario Example
3. Test folder structure(e2e in one folder, component testing will be in another)
4. Adding needed packages to package.json
5. Configuration cypress

mapping_workbench/frontend/cypress.config.js

@@ -0,0 +1,23 @@
+const browserify = require('@cypress/browserify-preprocessor');
+const cucumber = require('cypress-cucumber-preprocessor').default;
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  e2e: {
+  baseUrl: "http://localhost:3000",
+    chromeWebSecurity: false,
+    viewportWidth: 1280,
+    viewportHeight: 800,
+    specPattern: "cypress/e2e/*.feature",
+    video: false,
+    reporter: 'junit',
+    reporterOptions: {
+        mochaFile: 'results/test-results-[hash].xml',
+    },
+    retries: 1,
+    defaultCommandTimeout: 60000,
+    setupNodeEvents(on, config) {
+        on('file:preprocessor', cucumber())
+    },
+  }
+});

mapping_workbench/frontend/cypress/e2e/login.feature

@@ -0,0 +1,9 @@
+Feature: Login to Application
+
+  As a valid user
+  I want to log in into Application
+
+  Scenario: Valid login
+    Given I open login page
+    When I submit login
+    Then I should see homepage

mapping_workbench/frontend/cypress/e2e/login/loginSteps.js

@@ -0,0 +1,15 @@
+import { Given, When, Then} from 'cypress-cucumber-preprocessor/steps'
+
+Given('I open login page', () => {
+    cy.visit('localhost:3000')
+})
+
+When('I submit login', () => {
+    cy.get('[name=username]').clear().type('[email protected]')
+     cy.get('[name=password]').clear().type('p4$$')
+      cy.get('button[type="submit"]').click()
+})
+
+Then('I should see homepage', () => {
+cy.title().should('eq','App: Projects List | Mapping Workbench')
+})

mapping_workbench/frontend/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

mapping_workbench/frontend/cypress/plugins/index.js

@@ -0,0 +1,17 @@
+const cucumber = require('cypress-cucumber-preprocessor').default
+const browserify = require('@cypress/browserify-preprocessor');
+
+module.export = (on, config) => {
+const options = {
+    ...browserify.defaultOptions,
+    typescript: require.resolve('typescript'),
+  };
+on('file:preprocessor', cucumber(options))
+on('task', {
+    log(message) {
+      console.log(message)
+
+      return null
+    },
+  })
+}

mapping_workbench/frontend/cypress/support/commands.js

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

mapping_workbench/frontend/cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

mapping_workbench/frontend/package.json

@@ -11,7 +11,9 @@
     "export": "next export",
     "lint": "next lint",
     "lint-fix": "next lint --fix",
-    "test": ""
+    "test": "",
+    "cy:open": "cypress open",
+    "cy:tests": "cypress run"
   },
   "engines": {
     "node": ">=12.x"
@@ -99,9 +101,15 @@
     "@types/react-slick": "0.23.10",
     "@types/react-syntax-highlighter": "15.5.6",
     "babel-plugin-prismjs": "^2.1.0",
+    "cypress": "^13.5.1",
+    "cypress-cucumber-preprocessor": "^4.3.1",
     "eslint": "8.40.0",
     "eslint-config-next": "13.4.2",
     "sass": "^1.65.1",
     "typescript": "5.0.4"
+  },
+  "cypress-cucumber-preprocessor": {
+    "nonGlobalStepDefinitions": true,
+    "step_definitions": "cypress/e2e/"
   }
 }