# Setup Cypress v10 E2E testing ### **Installing** First is navigate to your intended directory and initialized npm by: ``` npm init ``` This will create a package.json file on your directory. Next is to install Cypress via `npm`: ``` npm install cypress --save-dev ``` This will install Cypress locally as a dev dependency for your project. Running the test with the command below will open the cypress test window: ``` npx cypress open ``` Notice that `node_modules` and cypress folder will be added in the directory as well as other files like `cypress-config.js` ### Now that cypress is installed we can proceed to installation of cucumber plugins and Typescript. To install Typescript, execute this command: ``` npm install typescript --save-dev ``` Initialized typescript by running: ``` npx tsc --init ``` This is to define and create your `tsconfig` file. Change your `tsconfig.json` with this configuration: ``` { "compilerOptions": { "target": "es2020", "module": "commonjs", "strict": true, "strictNullChecks": true, "strictFunctionTypes": true, "strictPropertyInitialization": true, "noImplicitAny": true, "removeComments": true, "noImplicitThis": true, "alwaysStrict": true, "noUnusedLocals": true, "noUnusedParameters": true, "moduleResolution": "node", "esModuleInterop": true, "allowJs": true, "types": ["cypress","node"], "lib": ["es2020", "dom"] }, "include": ["**/*.ts"] } ``` ### Next is to install Cypress cucumber preprocessor ``` npm install @badeball/cypress-cucumber-preprocessor ``` In version 10, plugins File is removed because Cypress now supports JavaScript and TypeScript configuration files, a separate "plugins file" (which used to default to `cypress/plugins/index.js`) Support for the plugins file has been removed, and it has been replaced with the new [`setupNodeEvents()`](https://docs.cypress.io/guides/references/configuration#setupNodeEvents) and [`devServer`](https://docs.cypress.io/guides/references/configuration#devServer) config options. \ If you wan't to read further about the depreciation of plugins file follow this [link](https://docs.cypress.io/guides/references/migration-guide#Plugins-File-Removed). #### Global step definitions exaple ``` { "name": "my project", "depdendencies": {}, "devDepdendencies": {}, "cypress-cucumber-preprocessor": { "stepDefinitions": "cypress/support/step_definitions/**/*.{js,ts}" } } ``` #### Step definitions besides scenario ``` { "name": "my project", "depdendencies": {}, "devDepdendencies": {}, "cypress-cucumber-preprocessor": { "stepDefinitions": "cypress/integration/[filepath].{js,ts}" } } ``` #### Step definitions in a directory besides the scenario ``` { "name": "my project", "depdendencies": {}, "devDepdendencies": {}, "cypress-cucumber-preprocessor": { "stepDefinitions": "cypress/integration/[filepath]/**/*.{js,ts}" } } ``` #### Combination of all of the above (default) ``` { "name": "my project", "depdendencies": {}, "devDepdendencies": {}, "cypress-cucumber-preprocessor": { "stepDefinitions": [ "cypress/integration/[filepath]/**/*.{js,ts}", "cypress/integration/[filepath].{js,ts}", "cypress/support/step_definitions/**/*.{js,ts}" ] } } ``` ### Installing of bundler Browserify and Webpack **Browesrify-ts installation:** ``` npm install --save-dev @cypress/browserify-preprocessor ``` And add this under `cypress-config.ts` file. ```typescript import { defineConfig } from "cypress"; import { addCucumberPreprocessorPlugin } from "@badeball/cypress-cucumber-preprocessor"; import browserify from "@badeball/cypress-cucumber-preprocessor/browserify"; async function setupNodeEvents( on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions ): Promise { await addCucumberPreprocessorPlugin(on, config); on( "file:preprocessor", browserify(config, { typescript: require.resolve("typescript"), }) ); // Make sure to return the config object as it might have been modified by the plugin. return config; } export default defineConfig({ e2e: { specPattern: "**/*.feature", setupNodeEvents, }, });ter ``` \ **Webpack-ts installation**: ``` npm install --save-dev @cypress/webpack-preprocessor ``` ``` npm install --save-dev ts-loader ``` And add this under `cypress-config.ts` file. ```typescript import { defineConfig } from "cypress"; import webpack from "@cypress/webpack-preprocessor"; import { addCucumberPreprocessorPlugin } from "@badeball/cypress-cucumber-preprocessor"; async function setupNodeEvents( on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions ): Promise { await addCucumberPreprocessorPlugin(on, config); on( "file:preprocessor", webpack({ webpackOptions: { resolve: { extensions: [".ts", ".js"], }, module: { rules: [ { test: /\.ts$/, exclude: [/node_modules/], use: [ { loader: "ts-loader", }, ], }, { test: /\.feature$/, use: [ { loader: "@badeball/cypress-cucumber-preprocessor/webpack", options: config, }, ], }, ], }, }, }) ); // Make sure to return the config object as it might have been modified by the plugin. return config; } export default defineConfig({ e2e: { specPattern: "**/*.feature", setupNodeEvents, }, }); ``` **Install cucumber-json-formatter** ``` npm install -g @deepakvishwakarma/cucumber-json-formatter ``` And add this at package.json ``` "cypress-cucumber-preprocessor": { "json": { "enabled": true, "formatter": "cucumber-json-formatter" } } ``` Now that everything are set, we can start writing our test. ## Write a test Write Gherkin documents and add a file for type definitions with a corresponding name (read more about how step definitions are resolved in [docs/step-definitions.md](https://github.com/badeball/cypress-cucumber-preprocessor/blob/master/docs/step-definitions.md)). Reading [docs/cucumber-basics.md](https://github.com/badeball/cypress-cucumber-preprocessor/blob/master/docs/cucumber-basics.md) is highly recommended. ```gherkin # cypress/e2e/duckduckgo.feature Feature: duckduckgo.com Scenario: visiting the frontpage When I visit duckduckgo.com Then I should see a search bar ``` ```typescript // cypress/e2e/duckduckgo.ts import { When, Then } from "@badeball/cypress-cucumber-preprocessor"; When("I visit duckduckgo.com", () => { cy.visit("https://www.duckduckgo.com"); }); Then("I should see a search bar", () => { cy.get("input").should( "have.attr", "placeholder", "Search the web without being tracked" ); }); ``` Running a test in browserless mode: ``` npx cypress run --browser chrome ``` Running the test with browser that directs into the spec file: ``` npx cypress run --browser chrome --e2e ``` For further details and changes about the migration, your can read it in [here](https://docs.cypress.io/guides/references/migration-guide#Migrating-to-Cypress-version-10-0). --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://hov-qa.gitbook.io/hov-qa-engineers/tools-and-guidelines/setup-cypress-v10-e2e-testing.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.