Building Basic Test in Cypress

Once Cypress installation is done and the test runner is successfully set up we shall create a JavaScript file under the examples folder. This comes under the integration folder provided by the Cypress framework template.

In order to create a Cypress test, we need to follow any of the Javascript testing frameworks like Jasmine or Macha. We have to implement our Cypress test and make it runnable with the help of these frameworks.

Mocha framework gets by default bundled with the Cypress installation. We shall follow the rules listed below as supported by Mocha or Jasmine framework −

  • First we should have a test suite block containing single or multiple test cases. This is achieved with describe function.

  • Inside the test suite we shall have the test case block. This is achieved with the help of the it () function.

  • Inside each it function, we shall have the individual test step for each test case.

Code Implementation.

// test suite
describe('Tutorialspoint Test', function () {
   // test case
   it('Test Case1', function (){
      // test step to launch a URL

In the above code, cy is a global command which enables us to invoke any Cypress command. This cy does not require any object declaration and it comes automatically on downloading node modules. The visit() method is used to launch any web application.

Once completed, we shall find this JavaScript file in the test runner and we can run the test case from there by simply clicking on it.

To run the test case from the command line, we need to run the command ./node_modules/.bin/cypress run. If this command is executed all the test cases under the examples folder get triggered. However if we want to run a specific test case, we need to run the command cypress run –spec "<<path of the spec file>>".

Please note, while running from command line, Cypress test case runs in headless mode and in Electron browser automatically.

To run the same test case in headed mode, the command is ./node_modules/.bin/cypress run -- headed.

Now let us discuss the folder structure that we have on Cypress Test Framework.

  • Fixtures − All the test data information is stored in fixtures so that they can be easily loaded to our test case. The data is stored here in the form of a keyvalue pair. Thus it helps to reduce lines of code to a large extent.

  • Integration − All the test cases are created inside the integration folder.

  • Plugins – This folder contains all the Cypress events. We can have customized code to handle the before and after events.

  • Support − All the reusable methods are created inside the support folder so that they are available directly to the test cases.

  • Videos − All the test step execution are recorded and stored in this folder.

  • node_modules − This is the main folder for Cypress test execution.

  • cypress.json − To change the default Cypress configuration, this folder is used. We need to set the new configuration here and this will override the default configuration.

  • package.json − All the project dependencies and scripts are contained here.

Updated on: 05-Aug-2020


Kickstart Your Career

Get certified by completing the course

Get Started