Frontend End-to-End Testing with Cypress/

...

/

What Makes Cypress Different?

What Makes Cypress Different?

Learn how Cypress differs from other testing tools in five major points, as well as how it differs from Selenium.

We'll cover the following...

We have already seen what Cypress is, why you should use it, and where it is heading. But how does it differ from existing testing tools? In this lesson, we will go over what makes Cypress stand out from the crowd.

Cypress’s tools

First and foremost, Cypress is an all-in-one tool. We don’t need to install any tools or libraries to get our test suite up and running, Cypress provides all of this in one go. Let’s see what is included in Cypress.

Mocha

Mocha is a JavaScript testing framework with a Behavior-driven Development (BDD) syntax. Cypress heavily relies on the syntax of Mocha, namely when we outline our different test cases:

describe('Describe your E2E test', () => {
    beforeEach(() => {
        // Code that should run before each test
        // This will log a message to the command log.
        cy.log('Running before test case.');
    });
    
    afterEach(() => {
        // Code that should run after each test
        cy.log('Running after test case.');
    });

    it('Should explain the first test case', () => {
        // Your test case
        cy.log('First test case.');
    });

    it('Should explain the second test case', () => {
        // Your test case
        cy.log('Second test case.');
    });
});
"describe" is a top-most block that describes the test file. You can create individual test blocks inside it using the "it" function

Mocha also supports async functions. These let us test different functionalities that require asynchronous behavior, such as user login. We can test it on our own by adding an argument, i.e., done to the it function and call it when the event completes.

Press + to interact
describe('User authentication', () => {
    it('Should log the user in', done => {
        httpService.post('login', userData).then(response => {
            done(response); // done tells Mocha that the request is done
        });
    });
});

We can also use the aync/await keywords to achieve a similar behavior before using the expect statements:

Press + to interact
it('should remove the user on account delete', () => {
    httpService.delete('deleteUser', userId).then(async () => {
        let user;
        await userService.getUser(userId).then(response => user = response);
        expect(user).to.deep.equal({});
    });
});

Chai

While Mocha provides a great overall structure for our test cases, Chai provides the ability to write assertions easily with an expressive, easy-to-read BDD style language:

const answer = 42;

describe('Chai', () => {
    it('Should expect values to match', () => {
        expect(true).to.be.true;
        expect(answer).to.equal(42);
    });
});

Not only that, but Cypress also includes the Chai-jQuery library to make our lives easier whenever we need to work with the DOM.

Sinon.JS

Lastly, when it comes to writing tests, we may also need to stub or spy on your methods. This is why Cypress includes the famous Sinon.js library. Sinon can be called anywhere in our ...