Cypress is a popular frontend test automation framework, designed to help developers in creating and maintaining end to end tests.
Together with Cucumber, a Behavior Driven Development (BDD) tool, tests will be both clean to write and maintain. The syntax is easy to read, which means even non-technical people can interpret the tests.
What is the Cypress Framework?
Cypress is a Javascript based, end-to-end testing framework, built on top of Mocha.
It runs as a standalone process and instructs the browser under test to perform certain actions.
Cypress offers built-in automatic waiting (so no more sleeps or waits), snapshot functionality and consistent results.
What is Cucumber Testing?
Cucumber is a test framework that provides Behavior Driven Development (BDD). It supports the BDD file format and describes tests in a Gherkin format, which makes it easy to read and understand.
Cucumber offers a Gherkin editor to build and modify your tests and provides good documentation.
Integrate Cypress and Cucumber
Cucumber integrates with Cypress nicely. It allows you to write clean, readable and consistent tests in the Gherkin format.
To get started, please install the cypress-cucumber-preprocessor
, which adds support for using feature files to Cypress:
Once installed, you'll need to add the Cypress plugin to your plugins file.
The default Cypress plugin file is located in cypress/plugins/index.js
, but you might be using a different one (as defined in your cypress.json
file).
const cucumber = require('cypress-cucumber-preprocessor').default
module.exports = (on, config) => {
on('file:preprocessor', cucumber())
}
Next, you'll need to make sure Cypress picks up your feature files.
Modify your cypress.json
file:
Feature Files
Now that you've installed and configured Cucumber for Cypress, you can start adding feature files in cypress/integration
.
Cucumber and Cypress Text Example
Now that you have your feature file, you're not ready yet to start running your tests.
To be able to run a test, you'll need to create your step definition files, so that Cucumber knows what to do with the feature files.
Let's create a step-definition file called: cypress/integration/Google/google.js
import { Given } from "cypress-cucumber-preprocessor/steps";
const url = 'https://google.com'
Given('I open Google page', () => {
cy.visit(url)
})
Then(`I see {string} in the title`, (title) => {
cy.title().should('include', title)
})
With these step definitions, Cucumber is able to link the Gherkin syntax to actual code that does the testing.
To run this first test, you'll need to run this command in your console:
Running Cypress tests on TestingBot
TestingBot provides a feature to run these tests on the TestingBot browser grid.
Running these Cypress tests in the cloud has a couple of advantages:
- You can run the tests in parallel
- Tests can run on multiple browser versions and operating systems
- No infrastructure cost or maintenance/upgrade work
To get started, please see our Cypress Cross-Browser documentation.
Cucumber, Cypress and Typescript
Using Typescript with Cypress and Cucumber is pretty straightforward, and greatly improves the developer experience. By using Typescript, your test code will be cleaner and less error-prone, because of the extra typings.
You can choose to use Typescript in combination with Webpack, in which case you'll need to create a cypress/webpack.config.js
file:
module.exports = {
resolve: {
extensions: [".ts", ".js"]
},
node: { fs: "empty", child_process: "empty", readline: "empty" },
module: {
rules: [
{
test: /\.ts$/,
exclude: [/node_modules/],
use: [
{
loader: "ts-loader"
}
]
},
{
test: /\.feature$/,
use: [
{
loader: "cypress-cucumber-preprocessor/loader"
}
]
},
{
test: /\.features$/,
use: [
{
loader: "cypress-cucumber-preprocessor/lib/featuresLoader"
}
]
}
]
}
};
Webpack will use the cypress-cucumber-preprocessor
to convert Typescript to plain Javascript, which Cypress will then use to run your tests.
To run this first test, you'll need to run this command in your console:
Your step-definition files can now use Typescript as well:
import { Given } from "cypress-cucumber-preprocessor/steps";
const localFunctionWithTypes = (a: number, b: number): number => a + b;
Given(/I pass/, () => {
pass("hi there");
console.log(localFunctionWithTypes(1,2) === 2)
});
To run this TypeScript + Cucumber test with Cypress, you'll need to run this command in your console: