Install Cypress Cucumber plugin

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!

Share On

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on tumblr
Share on email

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

Lifetime Membership Club

LIFETIME MEMBERSHIP BIG SALE - ALL LIVE COURES JUST - 7000 RS/ 99 USD
Attend All Live courses in just 7000 rs / $99 - offer ends 1st Nov 2024