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.
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 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.
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
      cy.visit("https://www.tutorialspoint.com/index.htm");
   });
});
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.
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.
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.
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.
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.
Videos − All the test step execution are recorded and stored in this folder.
node_modules − This is the main folder for Cypress test execution.
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.
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.
package.json − All the project dependencies and scripts are contained here.