Cypress TutorialsCypress.io

Cypress Tutorial | How To Organize Cypress Test

In this Cypress tutorial we are going to talk about test structure, how to organize cypress tests.

Let’s open a new blank test file exampleTest.spec.js
In each spec file, you should start with set in the first row the reference command

/// <reference types="cypress" />

This command will give your cypress test autocomplete power and will help you to code faster.

Mocha

Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun.
Mocha tests run serially, allowing for flexible and accurate reporting while mapping uncaught exceptions to the correct test cases.

Mocha, provides describe(), context(), it() and specify() blocks.
context() is identical to describe() and specify() is identical to it(), so choose whatever works best for you. I work with the describe() and it().

Describe() Block

In the describe() you provide the general description of what your test will be about.
Then you open a callback function with curly braces and this will create the body when you will insert the tests.

describe('this is a describe block', () => {

    
})

Create it() block inside the describe, this block is the test case where you type the actual test code.
In the result, you will see that the test case demo was executed and the name of the test was test case demo.

describe('this is a describe block', () => {

    it('test case demo', () => {
        
      
    });
    
})

This is the most simple structure, how the test should be organized inside the spec file.
You can put as many tests as you want inside the describe block.

describe('this is a describe block', () => {

    it('first demo', () => {
        
    });

    it('second demo', () => {
        
    });

    it('third demo', () => {
        
    });
    
})

There is also an option to include many describe blocks as you want inside the same spec file.
Each describe is actually a suite of tests.

You can use the beforeEach() hook inside the describe block and this will be executed only inside the specific describe block in each it() block.
Let’s say you are testing a login process like enter username and password for all the tests in the same suit, in order not to copy and paste this code in each and every test you can just put this code once in the beforeEach() hook.


For example, I will create a spec file with two describe blocks and I will set the beforeEach() hook for the first describe, this will include the visit command.
The result will be that only the tests cases within the first describe will have the visit command.
The tests of the second describe will not include the beforeEach() hook visit command.

describe('first describe block', () => {

    beforeEach('will visit google site', () => {

        cy.visit('www.google.com');
    })

    it('first demo', () => {
        
    });

    it('second demo', () => {
        
    });

    it('third demo', () => {
        
    });
    
})

describe('second describe block', () => {

    it('first demo', () => {
        
    });

    it('second demo', () => {
        
    });

    it('third demo', () => {
        
    });
    
})

This is an example of how you can organize your tests, depends on your structure and functionality you decide how to do it.


Next article – Cypress Tutorial | Basic Cypress Commands (get, visit, type, click)

Ofir Blumental

QA Automation Engineer - ofirblumental1@gmail.com

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button