Setup End to end test with Cypress test suite
Last updated
Last updated
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 Docker container with all of the required dependencies installed.
First is navigate to your intended directory and initialized npm by:
This will create a package.json file on your directory.
Next is to install Cypress via npm
:
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
To install Typescript, execute this command:
Initialized typescript by running:
This is to define and create your tsconfig
file.
Change your tsconfig.json with this configuration:
To add Cucumber plugin used this command:
Run GUI cypress
Add this configuration commands:
Add it to your plugins from this path cypress/plugins/index.js
cypress.json
Install the plug-in type definitions:
If you want to use TypeScript, add this to your plugins/index.js:
...and install tsify. I'm assuming you already have typescript installed. :-)
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";
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
This is the RECOMMENDED way
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)
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.
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
This is a good place to put global before/beforeEach/after/afterEach hooks.
Run your Cypress Launcher the way you would usually do, for example:
click on a .feature
file on the list of specs, and see the magic happening!
Example:
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:
Please make use of to create a configuration for the plugin, for example, by adding this section to your package.json:
You can use tags to select which test should run using . 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.