Search⌘ K
AI Features
Home
Courses
Frontend End-to-End Testing with Cypress

The Testing Approach

Explore how Cypress revolutionizes end-to-end testing by controlling browser internals, network requests, and timing functions. Understand stubbing, intercepting, and time control techniques that create stable and deterministic test cases. Learn about shortcuts to speed up tests, Cypress's built-in mechanisms for avoiding flaky tests, debugging support, and the trade-offs involved with this specialized JavaScript testing tool.

We'll cover the following...

Having control of both inside and outside the browser has paved the way to a new kind of testing approach that was never possible before. In this lesson, we will go over a couple of points on how Cypress approaches testing.

Cypress’s new ways of testing

As Cypress has control of almost everything, it means we can alter almost every aspect of our application’s behavior during the testing phase. This lets us create robust and stable test cases that will run regardless of how many asynchronous functions we have or how bad the network connection is at the time of execution.

Stubbing

We’ve seen that Sinon.js is bundled inside Cypress, which makes it easy to stub, spy, or mock functions. We may often have to force impure functions to behave the same way every time to ensure our test cases are deterministic. This is really straightforward in Cypress. Take the following as an example:

Javascript (babel-node)
cy.stub(object, method, replaceFunction);
// Stubbing a function
user.add = cy.stub();
expect(user.add).to.be.called;
// Stubbing a method
cy.stub(user, 'add');
expect(user.add).to.be.called;
// Stubbing with a callback
let userAdded = false;
cy.stub(user, 'add', () => {
    userAdded = true;
});
// This will trigger the stub, instead of the actual function
user.add();
expect(userAdded).to.be.true;

Testing edge cases

stubs allow us to easily test different edge cases, such as a function returning an unexpected value:

We can stub client-side functions and also tinker with network requests. With the help of cy.intercept, we can stub or spy on incoming and outgoing network requests ...