Wow-cypress-package NPM

ABOUT this package

This is a package that will assist any new cypress users with the Basic and Advanced Functionalities

Cypress basic
Cypress cucumber folder structure and configuration
Cypress visual testing using cypress-image
Cypress Tags
Cypress browser configuration
Cypress config for specific environments
Cypress reporting with BDD and Mocawesome
Cypress integration with dockers
Cypress integration with browserstack
Cypress integration with Percy
Cypress integration with Xray Jira
Cypress integration with GitHub Actions

Installation

npm i wow-cypress-package

Instructions to follow

Install wow-cypress-package
Install the plugins vcode extensions

Docker for Visual Studio Code
Prettier Formatter for Visual Studio Code

npx cypress open
npx copy

Instruction to continue using Basic Functionality

Update cypress.json with default values

{
	"watchForfileChanges": false,
	"testFiles": ["**/*.spec.js", "**/*.feature"],
	"ignoreTestFiles": ["*.md","x_*"],
	"viewportWidth": 1280,
	"ViewportHeight": 650,
	"waitForAnimation": true,
	"animationDistanceTreshold": 20,
	"video": true,
	"defultCommandTimeout": 5000,
	"pageLoadTimeout": 30000,
	"defaultCommandTimeout": 6000,
	"execTimeout": 15000,
	"requestTimeOut": 150000,
	"responseTimeout": 150000,
	"failOnStatusCode": false,
	"chromiumSecurity": false,
	"chromeWebSecurity": false,
	"baseUrl": "http://www.google.com",
	"retries": {
		"runMode": 1,
		"openMode": 0
	},
	"reporter": "cypress-multi-reporters",
	"reporterOptions": {
		"configFile": "cypress/support/reportGenerator/mocha-repoter-options.json"
	},
	"experimentalStudio": true
}

Update pacakage.json with the below

scripts

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "****": "************* Cypress Test **********************",
	  "unicorn:test": "cypress run --spec cypress/integration/features/sample.test.spec.js",
	  "unicorn:tags:test": "cypress-tags run -e TAGS='@xray'",
    "`****": "************* Cypress - Cucumber Test **********************",
    "unicorn:test:chrome": "cypress run --spec cypress/integration/features/sample.test.feature --browser chrome"
  },

copy cypress-cucumber-preprocessor

"cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": false,
    "features": "cypress/integration/features/**/",
    "stepDefinitions": "cypress/integration/stepDefinitions/**/",
    "cucumberJson": {
    "generate": true,
    "outputFolder": "cypress/results/cucumber",
    "filePrefix": "",
    "fileSuffix": ".cucumber"
    }
}

Instruction to continue using Advanced Functionality

Update cypress.json with default values

{
	"watchForfileChanges": false,
	"testFiles": ["**/*.spec.js", "**/*.feature"],
	"ignoreTestFiles": ["*.md","x_*"],
	"viewportWidth": 1280,
	"ViewportHeight": 650,
	"waitForAnimation": true,
	"animationDistanceTreshold": 20,
	"video": true,
	"defultCommandTimeout": 5000,
	"pageLoadTimeout": 30000,
	"defaultCommandTimeout": 6000,
	"execTimeout": 15000,
	"requestTimeOut": 150000,
	"responseTimeout": 150000,
	"failOnStatusCode": false,
	"chromiumSecurity": false,
	"chromeWebSecurity": false,
	"baseUrl": "http://www.google.com",
	"retries": {
		"runMode": 1,
		"openMode": 0
	},
	"reporter": "cypress-multi-reporters",
	"reporterOptions": {
		"configFile": "cypress/support/reportGenerator/mocha-repoter-options.json"
	},
	"experimentalStudio": true
}

Update pacakage.json with the below

scripts

"scripts": 
{
"test": "echo \"Error: no test specified\" && exit 1",
"****": "************* Cypress Test **********************",
	"unicorn:test": "cypress run --spec cypress/integration/features/sample.test.spec.js",
	"unicorn:tags:test": "cypress-tags run -e TAGS='@xray'",
"`****": "************* Cypress - Cucumber Test **********************",
	"unicorn:test:chrome": "cypress run --spec cypress/integration/features/sample.test.feature --browser chrome",
"`****`": "************* Cypress - Visual commands **********************",
	"unicorn:test:update": "cypress run --spec cypress/integration/features/sample.test.feature name=DEV --env updateSnapshots=true",
	"unicorn:test:imagdiff:false": "cypress run --spec cypress/integration/features/sample.test.feature --env failOnSnapshotDiff=false",
"``****`": "************* Cypress - Reports **********************",
	"unicorn:deletereport": "rm -rf cypress/reports/cucumber/*.* cypress/results/cucumber/*.* cypress/reports/mocha/*.* cypress/results/mocha/*.* || true",
	"unicorn:bdd:generate:report": "node ./cypress/support/reportGenerator/cucumber-report-generator.js",
	"unicorn:mocha:merge:report": "npx mochawesome-merge -f cypress/results/mocha/*.json -o cypress/results/mochaReport/report.json",
	"unicorn:mocha:generate:report": "npx marge cypress/results/mochaReport/report.json -f report -o cypress/reports/mocha",
"``****``": "************* Cypress - Third Part Integration **********************",
	"unicorn:docker": "docker build -t cypress . ",
	"unicorn:browserstack": "cypress/support/browserStackLocal/OSX/BrowserStackLocal --key access_key --local-identifier CypressLocalConnection1",
	"unicorn:browserstack:run":"browserstack-cypress run --sync",
	"unicorn:percy:token:win==>": "set PERCY_TOKEN=token",
	"unicorn:percy:token:mac==>": "export PERCY_TOKEN=token",
	"unicorn:percy": "percy exec -- cypress run --spec cypress/integration/features/sample.percyTest.spec.js",
	"unicorn:multi:action:test": "npm run unicorn:deletereport && npm run unicorn:tags:test && npm run unicorn:bdd:generate:report && npm run unicorn:mocha:merge:report && npm run unicorn:mocha:generate:report",
	"unicorn:update:xray": "node ./cypress/support/reportGenerator/xray-report.js --te=abc-123 --tp=abc-111"
},

copy cypress-cucumber-preprocessor

"cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": false,
    "features": "cypress/integration/features/**/",
    "stepDefinitions": "cypress/integration/stepDefinitions/**/",
    "cucumberJson": {
    "generate": true,
    "outputFolder": "cypress/results/cucumber",
    "filePrefix": "",
    "fileSuffix": ".cucumber"
    }
}

Install desktop docker to work with dockers
Update GitHub Action to work with actions
For Browserstack

Enter username and Key
run the browserstack local setting location - cypress/support/browserStackLocal/OSX/BrowserStackLocal --key access_key --local-identifier CypressLocalConnection1
run the command browserstack-cypress run --sync

Percy - Visual testing
- Create a project in percy (use browserstack account)
  - on Mac run the command $ 'export PERCY_TOKEN=Token'
  - on windows, run the command $ 'set PERCY_TOKEN=token'

License

This project is licensed under the terms of the MIT license.