Cypress, Cucumber/Gherkin

 To use cypress, we need to use Visual Studio code IDE.

Create new folder in the repo folder:

VS code > open folder > find the just created folder

Terminal > New terminal

To initialise project:

Just press enter. If all ok, type in yes.

Installing cypress

To install with specific version, add @^xx.x.x

To open cypress:

Click E2E testing:

Once the initial configuration is completed, go back to VS code.

Cypress > add a new folder within the cypress folder and name it "integration". Within integration folder, create a new javascript file (.js extension)

To let Cypress know where it can find out tests, go to cypress config js file and type below command and save:

 Cypress will recognise all js file in integration folder as Tests.

Then write the test in the js file. Sample:

Save and run in the cypress browser.

To find an element via cypress, click on the locator button and then the specific element that we want. From there you can just copy the code that has been prepared by cypress.

Sample test script:

To execute cypress via BDD, we can use Cucumber.

Need to install the Cucumber package before we are able to use it. To use below command in VS code terminal:

Once done, go to cypress config js file and type in below:

Create a BDD folder within the integration folder and change the specPattern path to only read feature files from BDD folder:

Be sure to install Cucumber Gherkin full support:

In package.json, add below code:

Create a new feature file in BDD folder and write the feature file there:

To create step definition, need to create a folder of the same name as the feature file in the BDD folder. Thereafter, create a step definition js file within that said folder.

Below is the sample step definition script (remember to import the cucumber keywords):

Remember to add step definition path in package.json file