Tutorial 14 – Install Cypress Cucumber plugin
What you will Learn :
Install cypress-cucumber plugin
Add cucumber plugin to cypress project
Install cypress-cucumber plugin
Launch the below url https://docs.cypress.io/examples/examples/recipes.html#Community-Recipes
Look for the section ‘Community Recipes’ on this page
Under the section ‘Community Recipes’, look for the ‘Cucumber’ link, see above. This link shows an example usage of cypress with cucumber.
Click the ‘Cucumber’ link, you would be re-directed to github page, see below https://github.com/TheBrainFamily/cypress-cucumber-example
On this github page, you can see TheBrainFamily link, see above. Click this link. This would open up the page https://github.com/TheBrainFamily
TheBrainFamily is contributor for development of cucumber in cypress.
On this page, you would see a repository link ‘cypress-cucumber-preprocessor’, see below
Click this repository link. This would open up the page
https://github.com/TheBrainFamily/cypress-cucumber-preprocessor
So, ‘cypress-cucumber-preprocessor’ is the plug-in that is used to integrate cypress and cucumber.
If you scroll down the page, you would see step by step instructions to configure cucumber in cypress, see below
Scroll down this page, you would find the command to install the cypress-cucumber-preprocessor plugin, see below
To install the plugin, go to your cypress working folder location
Type cmd at the top bar
Hit Enter. This would open up the command prompt
Copy the install command, see below
Paste the command in command prompt and hit Enter
Note: --save-dev ensures that entry gets stored in package.json file
This may take few minutes to install the package. If the output gets stuck, hit enter few times, see below. You would see 469 packages were added as part of this installation
So we have succesfully installed cucumber related plug-ins into our project.
Next, open the package.json file
You shoould see an entry for ‘cypress-cucumber-preprocessor’, see below
Add cucumber plugin to cypress project
Once the plugin is installed, you have to add this plugin to your cypress project.
Please note that, when you run any Test in cypress project, it will first load all the plug-ins present inside index.js
To add cucumber plug-in, just add the line ‘on('file:preprocessor', cucumber())’ inside cypress/plugins/index.js
Once the cucumber plug-in is loaded successfully, your cypress project will be able to understand the cucumber related syntaxes.
Now, expand the cypress project in visual studio code. You would see ‘plugins’ folder, see below
Expand the plugins, you would see index.js
See below. Insert a new line after module.exports = (on, config) => {
Now, select the line ‘on('file:preprocessor', cucumber())’ and copy it
Paste the line inside index.js
Next copy the below line
Paste the line inside index.js, see below
Also notice the comment on line#13. It says ‘This function is called when a project is opened or re-opened’
Save index.js file
So we have added the cucumber plugin in our cypress project.
Thank you for reading!