{"id":2291,"date":"2020-04-14T16:35:31","date_gmt":"2020-04-14T14:35:31","guid":{"rendered":"https:\/\/www.thecodecampus.de\/blog\/?p=2291"},"modified":"2025-04-22T10:52:32","modified_gmt":"2025-04-22T08:52:32","slug":"how-to-start-with-cypress-end2end-testing","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/how-to-start-with-cypress-end2end-testing\/","title":{"rendered":"How to start with cypress – End2End testing"},"content":{"rendered":"

\"cypress<\/a><\/h2>\n

<\/h2>\n

Introduction<\/h2>\n

Sometimes you need to test your application or website to make sure it works as it should.<\/p>\n

“End-2-End testing is a software testing methodology to test an application flow from start to finish. The purpose of End-2-End testing is to simulate a real user scenario and validate the system and its components for integration and data integrity.” (https:\/\/www.softwaretestinghelp.com\/what-is-end-to-end-testing\/<\/a>, 08.04.2020, 12.14 pm)<\/p>\n

Cypress is an excellent tool to simulate a real end-user, who walks through the application in the browser and tries different things like pressing a button. It does not test any internal application features like the programmatic reading of variables, only the UI.<\/p>\n

The technology<\/h2>\n

Cypress is a node-based E2E testing tool without dependence on Selenium, WebDriver or Protractor. It is easy to install and runs directly in the browser (or headless in Electron on the CI Server\/Commandline). Cypress has an intuitive API and is also easy to learn and understand.
\nThe tool combines different frameworks and libraries such as Chai, Chai-jQuery or Mocha, and you don’t have to install anything yourself.
\nThe tests are usually written in JavaScript, but also sometimes in TypeScript<\/a>, which is why they run in any browser without languages or driver dependencies. Additionally you have access to the developer tools, which improves the coding and changes are reflected in real time. You can also take screenshots and videos of the tests.<\/p>\n

How to install and run the first test<\/h2>\n

To install cypress use the following commands in your commandline:<\/p>\n

npm install\r\nnpm install cypress --save-dev<\/pre>\n
You can leave the default settings as cypress sets itself up.<\/p>\n
After finishing you should have a cypress folder in your project. This folder contains other folders like integration (this is where the tests will be written), examples (here are example tests stored), videos and screenshots.<\/p>\n
If you want to start cypress with a browser and see the actions the test does, use the following command:<\/p>\n
npx cypress open<\/pre>\n
After you have entered this command in your commandline, a new window opens in which you can select the browser and tests to be started.<\/p>\n
If you want to start cypress without a UI and a browser use:<\/p>\n
npx cypress run<\/pre>\n
After you have entered this command, the tests in the command line are run.<\/p>\n
For the first test you need to make a new .js file in the cypress\/integration folder with a describe(){}-block and a it(){}-block with the following syntax (you also can compare the syntax with the syntax in the example test files):<\/p>\n
describe('example-test', function () {\r\n  it('example', function () {\r\n  \r\n  });\r\n});\r\n<\/pre>\n
The name in the describe-block describes what the test does in general and the name in the it-block describes the more precise function the test performs. Therefore a describe block can contain several it blocks.<\/p>\n
In the following example the comments describe what the commands do:<\/p>\n
describe('example-test', function () {\r\n  it('example', function () {\r\n    \/\/you can also put an url in here\r\n    cy.visit(\"localhost:4200\/\", { \r\n      \/\/only required if you have to authenticate yourself on the website you visit                                  \r\n      auth: {                                                            \r\n        username: 'name',\r\n        password: 'password'\r\n      }\r\n    });\r\n    \/\/this command allows the cookies on my specific website by clicking on a button with the css-class<\/strong> \"cc-allow\"\r\n    cy.get(\".cc-allow\").click();                                         \r\n\r\n    \/\/wihtout {force: true} => Error because of Angular Material (mat-*)\r\n    \/\/in here we want to click on the first mat-select of the homepage where the css-selector<\/strong> is \"mat-select\"\r\n    cy.get('mat-select').first().click({force: true});                     \r\n    \/\/here we want to click the second option from mat-select with the css-selector<\/strong> \"mat-option\"\r\n    cy.get(\"mat-option\").eq(2).click();                                  \r\n    \/\/in this line we want that cypress makes a break for 0.5 seconds\r\n    cy.wait(500);                                                        \r\n\r\n    \/\/here we want to type some text into an input-field with the css-selector \"mat-form-field input\" with the [formcontrolname=name]\r\n    cy.get(\"mat-form-field input\").get(`[formcontrolname=\"name\"]`).type(\"test test\");     \r\n    \/\/in this line we want to get a element by it's css-id<\/strong> using \"#\"\r\n    cy.get(\"mat-form-field input\").get(\"#email\").type(\"test@mail.com\");\r\n    \/\/in this line we want to check a checkbox with the [formcontrolname=privacy]\r\n    cy.get(`[formControlName=\"privacy\"] input`).check({force: true});    \r\n    \r\n    \/\/here we want to click a button which contains the text \"request\"\r\n    cy.get(\"button\").contains(\"request\").click();                        \r\n  });\r\n});<\/pre>\n
So you can see\u00a0 that the first important thing is that you have to distinguish between css-selectors (the best and recommended way to select an element), css-classes, css-id’s or other css-specific attributes.<\/p>\n
To get an html element via css attributes remember the following things:<\/p>\n