# Setup End to end test with Cypress test suite ### In a nut Shell Cypress is a next generation front end testing tool built for the modern web. We address the key pain points developers and QA engineers face when testing modern applications. We make it possible to: * [Set up tests](https://docs.cypress.io/guides/overview/why-cypress#Setting-up-tests) * [Write tests](https://docs.cypress.io/guides/overview/why-cypress#Writing-tests) * [Run tests](https://docs.cypress.io/guides/overview/why-cypress#Running-tests) * [Debug Tests](https://docs.cypress.io/guides/overview/why-cypress#Debugging-tests) Cypress is most often compared to Selenium; however Cypress is both fundamentally and architecturally different. Cypress is not constrained by the same restrictions as Selenium. This enables you to **write faster**, **easier** and **more reliable** tests. Cypress supports Linux Operating system as listed above. * Linux Ubuntu 12.04 and above, Fedora 21 and Debian 8 (64-bit only) If you're using Linux, you'll want to have the required dependencies installed on your system. We also have an official [cypress/base](https://hub.docker.com/r/cypress/base/) Docker container with all of the required dependencies installed. #### For Ubuntu/Debian, do this first: ``` apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb ``` #### Installing First is navigate to your intended directory and initialized npm by: ``` npm init ``` This will create a package.json file on your directory. Next is to install Cypress via `npm`: ``` npm install cypress --save-dev ``` This will install Cypress locally as a dev dependency for your project. Notice that `node_modules` and `cypress` folder will be added in the directory as well as other files like `cypress.json` #### Now that cypress is installed we can proceed to installation of cucumber plugins and Typescript. To install Typescript, execute this command: ``` npm install typescript --save-dev ``` Initialized typescript by running: ``` npx tsc --init ``` This is to define and create your **`tsconfig`** file. Change your **tsconfig.json** with this configuration: ``` { "compilerOptions": { "target": "es2020", "module": "commonjs", "strict": true, "strictNullChecks": true, "strictFunctionTypes": true, "strictPropertyInitialization": true, "noImplicitAny": true, "removeComments": true, "noImplicitThis": true, "alwaysStrict": true, "noUnusedLocals": true, "noUnusedParameters": true, "moduleResolution": "node", "esModuleInterop": true, "allowJs": true, "types": ["cypress","node"], "lib": ["es2020", "dom"] }, "include": ["**/*.ts"] } ``` To add Cucumber plugin used this command: ``` npm install --save-dev cypress-cucumber-preprocessor ``` Run GUI cypress Add this configuration commands: Add it to your plugins from this path **`cypress/plugins/index.js`** ``` const cucumber = require('cypress-cucumber-preprocessor').default module.exports = (on, config) => { on('file:preprocessor', cucumber()) } ``` **cypress.json** ``` { "testFiles": "**/*.feature", "ignoreTestFiles": "*.ts", } ``` #### **Configuration** Please make use of [cosmiconfig](https://github.com/davidtheclark/cosmiconfig) to create a configuration for the plugin, for example, by adding this section to your package.json: ``` "cypress-cucumber-preprocessor": { "nonGlobalStepDefinitions": true } ``` ### **TypeScript Support** #### **Install** Install the plug-in type definitions: ``` npm install --save-dev @types/cypress-cucumber-preprocessor ``` #### **Without Webpack** If you want to use TypeScript, add this to your plugins/index.js: ``` const cucumber = require("cypress-cucumber-preprocessor").default; const browserify = require("@cypress/browserify-preprocessor"); module.exports = (on) => { const options = browserify.defaultOptions; options.browserifyOptions.plugin.unshift(['tsify']); // Or, if you need a custom tsconfig.json for your test files: // options.browserifyOptions.plugin.unshift(['tsify', {project: 'path/to/other/tsconfig.json'}]); on("file:preprocessor", cucumber(options)); }; ``` ...and install tsify. I'm assuming you already have typescript installed. :-) ``` npm install tsify ``` Then in your .ts files you need to make sure you either require/import the functions defining step definitions, or declare them as global: `declare const Given, When, Then;` \ `// OR` \ `import { Given, Then, When } from "cypress-cucumber-preprocessor/steps";` #### How to organize the tests To try out your environment, you can test and try writing scripts by putting your feature files in `cypress/integration/` Example: cypress/integration/Google.feature ``` Feature: Google Main Page I want to open a search engine @focus Scenario: Opening a search engine page Given I open Google page Then I see "Google" in the title ``` #### **Step definitions** **This is the RECOMMENDED way** #### **Step definitions creation** The `.feature` file will use steps definitions from a directory with the same name as your `.feature` file. The javascript files containing the step definitions can have other names if you want to break them into different concerns. Easier to show than to explain, so, assuming the feature file is in `cypress/integration/Google.feature` , as proposed above, the preprocessor will read all the files inside `cypress/integration/Google/`, so: `cypress/integration/Google/google.js` (or any other .js file in the same path) ``` import { Given } from "cypress-cucumber-preprocessor/steps"; const url = 'https://google.com' Given('I open Google page', () => { cy.visit(url) }) ``` This is a good place to put *before/beforeEach/after/afterEach* hooks related to **that particular feature**. This is incredibly hard to get right with pure cucumber. #### **Reusable step definitions** We also have a way to create reusable step definitions. Put them in `cypress/integration/common/` Example: cypress/integration/common/i\_see\_string\_in\_the\_title.js ``` import { Then } from "cypress-cucumber-preprocessor/steps"; Then(`I see {string} in the title`, (title) => { cy.title().should('include', title) }) ``` This is a good place to put global *before/beforeEach/after/afterEach* hooks. ### **How to run the tests** Run your Cypress Launcher the way you would usually do, for example: ``` npx cypress open ``` click on a `.feature` file on the list of specs, and see the magic happening! #### **Running tagged tests** You can use tags to select which test should run using [cucumber's tag expressions](https://github.com/cucumber/cucumber/tree/master/tag-expressions). Keep in mind we are using newer syntax, eg. `'not @foo and (@bar or @zap)'`. In order to initialize tests using tags you will have to run cypress and pass TAGS environment variable. Example: ``` ./node_modules/.bin/cypress-tags run -e TAGS='not @foo and (@bar or @zap)' ``` This concludes the environment setup of Cypress automation with cucumberrTS. If you have able to run your test, then it means everything works smooth during the setup. You can refer from the references below for more information about cypress cucumberTS. **References:** {% embed url="" %} {% embed url="" %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://hov-qa.gitbook.io/hov-qa-engineers/tools-and-guidelines/setup-end-to-end-test-with-cypress-test-suite.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.