🧪Setup End to end test with Cypress test suite

In a nut Shell

Cypress is a next generation front end testing tool built for the modern web. We address the key pain points developers and QA engineers face when testing modern applications.

We make it possible to:

Cypress is most often compared to Selenium; however Cypress is both fundamentally and architecturally different. Cypress is not constrained by the same restrictions as Selenium.

This enables you to write faster, easier and more reliable tests.

Cypress supports Linux Operating system as listed above.

  • Linux Ubuntu 12.04 and above, Fedora 21 and Debian 8 (64-bit only)

If you're using Linux, you'll want to have the required dependencies installed on your system.

We also have an official cypress/base Docker container with all of the required dependencies installed.

For Ubuntu/Debian, do this first:

apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb

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. Notice that node_modules and cypress folder will be added in the directory as well as other files like cypress.json

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"]
}

To add Cucumber plugin used this command:

npm install --save-dev cypress-cucumber-preprocessor

Run GUI cypress

Add this configuration commands:

Add it to your plugins from this path cypress/plugins/index.js

const cucumber = require('cypress-cucumber-preprocessor').default

module.exports = (on, config) => {
  on('file:preprocessor', cucumber())
}

cypress.json

{
  "testFiles": "**/*.feature",
	"ignoreTestFiles": "*.ts",
}

Configuration

Please make use of cosmiconfig to create a configuration for the plugin, for example, by adding this section to your package.json:

"cypress-cucumber-preprocessor": {
  "nonGlobalStepDefinitions": true
}

TypeScript Support

Install

Install the plug-in type definitions:

npm install --save-dev @types/cypress-cucumber-preprocessor

Without Webpack

If you want to use TypeScript, add this to your plugins/index.js:

const cucumber = require("cypress-cucumber-preprocessor").default;
const browserify = require("@cypress/browserify-preprocessor");

module.exports = (on) => {
  const options = browserify.defaultOptions;

  options.browserifyOptions.plugin.unshift(['tsify']);
  // Or, if you need a custom tsconfig.json for your test files:
  // options.browserifyOptions.plugin.unshift(['tsify', {project: 'path/to/other/tsconfig.json'}]);
  
  on("file:preprocessor", cucumber(options));
};

...and install tsify. I'm assuming you already have typescript installed. :-)

npm install tsify

Then in your .ts files you need to make sure you either require/import the functions defining step definitions, or declare them as global:

declare const Given, When, Then; // OR import { Given, Then, When } from "cypress-cucumber-preprocessor/steps";

How to organize the tests

To try out your environment, you can test and try writing scripts by putting your feature files in cypress/integration/

Example: cypress/integration/Google.feature

Feature: Google Main Page

  I want to open a search engine
  
  @focus
  Scenario: Opening a search engine page
    Given I open Google page
    Then I see "Google" in the title

Step definitions

This is the RECOMMENDED way

Step definitions creation

The .feature file will use steps definitions from a directory with the same name as your .feature file. The javascript files containing the step definitions can have other names if you want to break them into different concerns.

Easier to show than to explain, so, assuming the feature file is in cypress/integration/Google.feature , as proposed above, the preprocessor will read all the files inside cypress/integration/Google/, so:

cypress/integration/Google/google.js (or any other .js file in the same path)

import { Given } from "cypress-cucumber-preprocessor/steps";

const url = 'https://google.com'
Given('I open Google page', () => {
  cy.visit(url)
})

This is a good place to put before/beforeEach/after/afterEach hooks related to that particular feature. This is incredibly hard to get right with pure cucumber.

Reusable step definitions

We also have a way to create reusable step definitions. Put them in cypress/integration/common/

Example: cypress/integration/common/i_see_string_in_the_title.js

import { Then } from "cypress-cucumber-preprocessor/steps";

Then(`I see {string} in the title`, (title) => {
  cy.title().should('include', title)
})

This is a good place to put global before/beforeEach/after/afterEach hooks.

How to run the tests

Run your Cypress Launcher the way you would usually do, for example:

npx cypress open

click on a .feature file on the list of specs, and see the magic happening!

Running tagged tests

You can use tags to select which test should run using cucumber's tag expressions. Keep in mind we are using newer syntax, eg. 'not @foo and (@bar or @zap)'. In order to initialize tests using tags you will have to run cypress and pass TAGS environment variable.

Example:

./node_modules/.bin/cypress-tags run -e TAGS='not @foo and (@bar or @zap)'

This concludes the environment setup of Cypress automation with cucumberrTS. If you have able to run your test, then it means everything works smooth during the setup. You can refer from the references below for more information about cypress cucumberTS.

References:

PreviousSetup Cypress v10 E2E testingNextSetup Performance test with k6

Last updated