DEV Community

Charles Ouellet
Charles Ouellet

Posted on • Originally published at snipcart.com on

 

Testing Your Frontend with Cypress.io Framework

Testing Your Frontend with Cypress.io Framework

Editor’s note: this is a guest post by our friend Michael Yagudaev, founder of Nano 3 Labs. He has spent the last 7 years working with tech startups, mid-size and large corporations as a software engineer, UX designer and project manager.

Modern JavaScript frameworks present an easier and more organized way to create web applications. However, they also add complexity that sometimes breaks things in a subtle yet impactful way.

To combat this and ensure we don’t introduce more bugs than we fix, we can turn to automated frontend testing. The best form of automated tests? Running through the interface as a real user would, clicking on buttons and filling out forms.

Today I’m going to introduce you to testing with Cypress.io—a modern, frontend-centric testing framework. But first, a bit of history!

The old ways

selenium

For years we have relied on tools like Selenium for End-to-End (E2E) tests on Multi-page web applications. They worked great, letting us write tests in any language (Ruby, Python, JavaScript, etc.) through specific language binding. They also featured a robust community for support and examples.

Then we moved to Single-Page-Applications (SPA) with complex JavaScript code using frameworks like React, Vue.js or Angular, and an API written in a server-side language like Ruby, Python, Go, Node.js, etc. Now things started to break.

→ Read the full post here

Top comments (0)

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!