Cypress: Integration Tests Made Easy!

Search for a command to run...

No comments yet. Be the first to comment.
In this series, expect some detailed blogs on useful snippets or coding procedures that I find useful for my day-to-day life as a web developer!
How I was able to load static images dynamically in <img> elements
In the world of web development using C#, the Response.Redirect method is a common way to guide users to different pages within a web application. However, there's a glaring issue that we need to address: the second parameter, which introduces unnece...

Ever need to trap the focus of the browser to a modal, a tour guide, or something else while trying to balance accessibility? I am far from an expert, but one thing I found on StackOverflow that helped me was this snippet from Shane McCurdy from th...

The Intro We had a dilemma today of an issue found in our code that needed to be fixed. After some time hunting I was able to find a distinct "this is good" reference in time and a distinct "this is not good" reference - but had no idea which commit ...

Introduction Ideally - we want our components to be kinda "dumb". Mostly just displaying data or gathering input from the user - the front end components shouldn't be smart enough to know what to do with said info once they have it. Usually this mea...

Before I Start You can find the podcast episode around this topic below! Introduction I shall begin with a quick story of something I went through this past week. I had a task to create analytics events for a few new key features that we wanted to ...

Tdlr; I had put automated integration testing on the back burner due to "lack of time" but once I saw how easy it was - I felt rather silly for taking so long. Try out Cypress! You might be as surprised as I was!
I am not sponsored in any way in this post - this is purely my experience!
You can find Cypress at https://www.cypress.io/
it('Should see a button on first visit', () => {
cy.get('.button').contains('cool popup button');
});
it('Should click button and view new feature', () => {
cy.get('.button').contains('cool popup button').click();
cy.get('div.popupClassName');
cy.get('p').contains('New Feature Title');
});
it('Should click to view the details of the feature release', () => {
cy.get('div.popupClassName > button').contains('more').click();
cy.get('p').contains('Detailed View');
});
And that's it. Super easy.
It is a good idea to have full end-to-end testing, but sometimes you want to purely test the front end of a project and mock all the api calls.
cy.intercept('GET', '**/endpointName*', {
body: {
data1: 123123,
date2: 'content',
},
});
cy.intercept('GET', '**/endpointName2*', {
fixture: 'endpoints/endpointName2.json',
});
That is it. Seriously.
Sometimes it is worth taking 5 minutes to see how much effort a process is. I learned this after putting it off for far too long. Don't make the same mistake as me and start today on making integration testing part of your regular development workflow!
You can find Cypress at https://www.cypress.io/