- Cucumber(Gherkin) Full support
- Material Icon Theme
- Prettier - Code formatter Reload the window after installation view->command Palette - > Developer:ReloadWindow Right click format document with prettier - code formatter
npm install --save-dev cypress@12.14.0
npm install --save-dev @badeball/cypress-cucumber-preprocessor
Add the below object in tsconfig.json under compiler option https://github.com/badeball/cypress-cucumber-preprocessor/blob/master/docs/faq.md#i-get-cannot-find-module-badeballcypress-cucumber-preprocessoresbuild and change the import statement in cypress.config.ts to import * as createBundler from "@bahmutov/cypress-esbuild-preprocessor";
"paths": {
"@badeball/cypress-cucumber-preprocessor/*": ["./node_modules/@badeball/cypress-cucumber-preprocessor/dist/subpath-entrypoints/*"]
}
npm install ts-loader --save-dev
file->settings->cucumberautocomplete:Custom Parameters->EditinSettings.json
Settings.json
{
"files.exclude": {
"**/.classpath": true,
"**/.project": true,
"**/.settings": true,
"**/.factorypath": true
},
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"redhat.telemetry.enabled": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"files.autoSave": "afterDelay",
"cucumberautocomplete.customParameters": [
],
"cucumberautocomplete.strictGherkinCompletion": true,
"cucumberautocomplete.steps": ["cypress/support/step_definitions/*.js"],
"workbench.iconTheme": "material-icon-theme"
}
Update package.json
"cypress-cucumber-preprocessor":{
"stepDefinitions":"cypress/support/step_definitions/**/*.js"
}
add below as the first line in .js file to see the cypress commands intellisense
///<reference types="cypress"/>
cy.get("a#contact-us").invoke("removeAttr", "target").click();
cy.get("div#contact_reply h1").should(
"have.text",
"Thank You for your Message!"
);
cy.get("body").should("contain.text", "Error");
or;
cy.get("body").contains("ErrorError: all fields are required");
Regular expressions : https://github.com/cucumber/cucumber-expressions#readme
Use comma seperated css selectors to identify the applicable element. This is like using an "OR" condition in xpath. In the below example 'body' is used when there is error and 'div#contact_reply h1' when the flow is successfull on the webdriveruniversity page
cy.get("body,div#contact_reply h1").contains(message);
npx cypress run -e TAGS='@login' --headed
npx cypress run -e TAGS='@smoke or @sanity' --headed
npx cypress run -e TAGS='(@login or @contact-us) and not @smoke' --headed
npx cypress run cypress/e2e/*.feature --headed
cypress run --headed --browser chrome --spec 'cypress/e2e/*.feature'
Add the below configuration to package.json. The report automatically add a screenshot when something fails. Click on the failure to see the log and screenshot of the execution
"cypress-cucumber-preprocessor": {
"stepDefinitions": "cypress/support/step_definitions/**/*.js",
"html":{
"enabled":true,
"output":"cypress/reports/cucumber-html/cucumber-report.html"
}
}
Note: The html report will not be generated if the script is triggered by clicking on the feature file in cypress runner. This needs to be executed using cypress run commands directly or through scripts in package.json. cucumber-messages.ndjson will be created in root location that is the basis for this report
In order to have this generated in a custom location make the below changes to package.json
"cypress-cucumber-preprocessor": {
"stepDefinitions": "cypress/support/step_definitions/**/*.js",
"html":{
"enabled":true,
"output":"cypress/reports/cucumber-html/cucumber-report.html"
},
"messages":{
"enabled":true,
"output":"cypress/reports/cucumber-ndjson/cucumber-messages.ndjson"
}
}
- This is the file that CI sytems like jenkins uses to generate the reports.
- Install the cucumber json formatter from the below https://github.com/cucumber/json-formatter/releases/tag/v19.0.0
- Change the file name to cucumber-json-formatter.exe
- Set the path to downloaded file location
- Set PATH : C:\Users\ravi\Downloads\cypress-cucumber-only\
- Make the below changes to package.json
"json": {
"enabled": true,
"formatter": "cypress-json-formatter",
"output": "cypress/reports/cucumber-json/cucumber-report.json"
}
https://www.npmjs.com/package/multiple-cucumber-html-reporter
npm install multiple-cucumber-html-reporter --save-dev
- Create cucumber-html-report.js at root location
- Run the npm script for executing the test
- Run the .js file created above using node <test.js>
- The report should be generated.
const report = require("multiple-cucumber-html-reporter");
report.generate({
jsonDir: "cypress/reports/cucumber-json/",
reportPath: "cypress/reports/html-multi-report/",
ignoreBadJsonFile: true,
displayReportTime: true,
displayDuration: true,
metadata: {
device: "Local test machine.",
platform: { name: "Windows", version: "11" },
},
});
In the below script, command1 will be executed first. If it fails (returns a non-zero exit code), command2 will be executed instead. This ensures that the second command runs even only the previous command fails.
"scripts": {
"build": "command1 || command2"
}
In the example below, echo. is used to output a blank line, effectively doing nothing. This command will succeed and return a successful exit code. Thus ensuring the second command is always executed irrespective of the outcome of first command
"scripts": {
"build": "(command1 || echo .) && command2"
}
In the below script, The && symbol is a conditional command separator that allows you to chain multiple commands together. It ensures that the subsequent command is executed only if the previous one succeeds (returns a zero exit code). If the previous command fails (returns a non-zero exit code), the subsequent command is not executed
"scripts": {
"build": "command1 && command2"
}