This document provides instructions for setting up Behavior Driven Development (BDD) using the Cucumber plugin in Cypress. It discusses BDD and TDD approaches, key BDD terms like "Given", "When", and "Then", and provides an example login feature file and step definition file. It also outlines the steps for installing the Cypress-Cucumber-Preprocessor plugin, configuring it, and adding it to the Cypress plugins file to enable BDD testing using Cucumber syntax and tags in Cypress.

1. QA WEEKLY TRAINING
TOPIC: BEHAVIOR DRIVEN DEVELOPMENT(BDD) BY USING CUCUMBER PLUGIN
IN CYPRESS

2. BDD AND TDD

3. BDD KEY WORDS
• BEHAVIOR DRIVEN DEVELOPMENT(BDD)
• GIVEN
• WHEN
• THEN

4. EXAMPLE LOGIN FEATURE FILE 1
• FEATURE: LOGIN
• I WANT TO LOG INTO WEBSITE
• SCENARIO: WEBSITE LOGIN
• GIVEN I OPEN WEBSITE LOGIN PAGE
• WHEN I TYPE IN USERNAME AND PASSWORD
• AND I CLICK ON SIGN IN BUTTON
• THEN DASHBOARD PAGE SHOULD BE SHOWN

5. STEP DEFINITION FILE
• GIVEN(‘ I OPEN THE WEBSITE LOGIN PAGE’, () => {
• --CY.VISIT (‘URL’)
• {);
• GIVEN (‘’,() => {
• });
• WHEN (‘’,() => {
• });
• THEN (‘’, () =>{
• });

6. EXAMPLE LOGIN FEATURE FILE 2

7. EXAMPLE STEP DEFINITION FILE

8. BDD – CUCUMBER – INSTALLATION AND
SETUP

9. BDD – CUCUMBER – INSTALLATION AND
SETUP
• --NPM INSTALL CYPRESS-CUCUMBER-PREPROCESSOR
• IN CYPRESS.JSON FILE ADD THIS "TESTFILES":"**/*.FEATURE" , AFTER CYPRESS 10
NOW IN PACKAGE.JSON FILE
• CREATE A FILE IN INTEGRATION FOLDER FOR EXAMPLE “ABC.FEATURE” AND
FOLDER WITH SAME NAME AS FEATURE FILE FOR EXAMPLE “ABC” IN
INTEGRATION FOLDER.
• CREATE A STEP DEFINITION FILE WITHIN THE FOLDER “ABC” FOR EXAMPLE
LOGIN.JS
• NOTE: STEP DEFINITION FILE COULD BE NAME ANYTHING AS YOU WISH

10. CONFIGURATION
• PLEASE MAKE USE OF COSMICONFIG TO CREATE A CONFIGURATION FOR THE
PLUGIN, FOR EXAMPLE, BY ADDING THIS SECTION TO YOUR PACKAGE.JSON:
• "CYPRESS-CUCUMBER-PREPROCESSOR":{
• "NONGLOBALSTEPDEFINATIONS": TRUE
• }
• -NPM INSTALL COSMICONFIG

11. BDD – CUCUMBER – INSTALLATION AND
SETUP

12. ADD IT TO YOUR PLUGINS:
• CYPRESS/PLUGINS/INDEX.JS
• CONST CUCUMBER = REQUIRE('CYPRESS-CUCUMBER-PREPROCESSOR').DEFAULT
•
MODULE.EXPORTS = (ON, CONFIG) => {
• ON('FILE:PREPROCESSOR', CUCUMBER())
• }

13. THANKS

14. TMMI