Using Cucumber on Cypress part -1

Step-1: Install cucumber plug in on your cypress project using terminal npm npm install –save-dev cypress-cucumber-preprocessor

Step-2: Go to the on your cypress project ../plugins/index.js and paste the this code:

const cucumber = require('cypress-cucumber-preprocessor').default
module.exports = (on, config) => {
  on('file:preprocessor', cucumber())
}

Step-3: Go to the on your cypress project to cypress.json file and paste this code to support features files

{
  "testFiles": "**/*.feature"
}

Step-4: Go to the package.json and add this code after the “devDepencies”.

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

Step-5: Let’s create structure of cucumber fie on cypress. We have to add under the integration folder one folder and two files. All of them named same name.

Firstly; let’s add a folder which named “firstCucumber” under the integration folder.

Secondly; let’ add a file which is extension .js under the “firstCucumber” folder which we created firstly.

Lastly; we have to create a file which named “firstCucumber.feature” under the integration folder.

Step-6:Let’s create a feature file search on google.To create a feature file we have to use Gherken language its contains when,given,and,then keywords. We can create a feature files using Gherken language like this;

Feature: Search

I want to search on google

Scenario: search on google

Given open google search page

And type javascript on search box

When click the search on google

Then got javascript search result

* if your code is not highlighted you can download cucumber extension to your VS Code.

Step-7: Let’s create step definition on firstCucumber.js file. firstCucumber.js file must include this code

import { Given,And,When,Then } from “cypress-cucumber- preprocessor/steps”;

Given(‘open google search page’,()=>{

cy.visit(“https://www.google.com.tr/")

});

And(‘type javascript on search box’,()=>{

cy.get(“input[name=’q’]”).type(“javascript”)

});

When(‘click the search on google’,()=>{

cy.get(“.gNO89b”).last().click()

});

Then(‘got javascript search result’,()=>{

cy.title().should(“include”,”javascript”)

});

Step-7: Open cypress dashboadr with “npx cypress open” using terminal.Lastly run the firstCucumber.feature file from the dashboard.

Step-9: This is the screenshot from the test

You can got code from https://github.com/zoomokul/CypressCucumber1.git