> For the complete documentation index, see [llms.txt](https://hov-qa.gitbook.io/hov-qa-engineers/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hov-qa.gitbook.io/hov-qa-engineers/tools-and-guidelines/setup-cypress-v10-e2e-testing.md).

# 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<Cypress.PluginConfigOptions> {
  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<Cypress.PluginConfigOptions> {
  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).