JavaScript End to End Testing for Web Apps - Cypress

JavaScript End to End Testing for Web Apps - Cypress

Cypress is the new standard in front-end testing that every developer and QA engineer needs. Cypress is open-sourced and written in JavaScript. Cypress provides a complete end-to-end testing experience that can test anything that runs on the browser. Cypress is a fast, easy, and reliable end-to-end testing framework for anything that runs on your browser.

Software testing plays a crucial role in the software development process. I like this quote below by the great Aristotle, which is applicable to us in the modern world as software developers.

“Quality is not an act, it is a habit” – Aristotle

Overlooking testing is a common problem that we need to overcome intentionally as developers. In this article I am going to give you a brief overview about Cypress, a super fast and intuitive way to end to end test your web applications. But before we learn about Cypress, we need to understand what end to end tests really are.

What are End to End Tests?

End to end testing is used to test the full flow of an application. The goal of an end to end test, is to interact with the application like an end user does. Manual end to end tests are still practiced in several development teams. This means, QAs and developers have to manually click through an application and test its flow. This as you can predict takes plenty of hours, and is error prone. We could easily miss testing certain workflows and have uncaught bugs.

Automated end to end tests, test an application from start to finish, by simulating a real user scenario.

Benefits of good automated end to end tests are plenty. Some of them are listed below:

  • Catches bug early on
  • Saves hours spent on manual testing
  • High quality software

What is Cypress?

Cypress is a fast, easy, and reliable end-to-end testing framework for anything that runs on your browser. Cypress is open-sourced and written in JavaScript. Traditionally, end to end tests are usually slower and more expensive. With Cypress, there is a significant improvement to the end to end testing experience.

Cypress provides a complete end-to-end testing experience that can test anything that runs on the browser

Benefits of Cypress:

  • Faster
  • Easy setup
  • Easy to write and run tests
  • Overall less expensive for development teams to write end to end tests.

Cypress offer some awesome features like time travel debugging, automatic waiting, along with screenshot and videos as well.

Install and Run Cypress Tests

Getting setup and going with Cypress is quite simple. To get Cypress integrated within your project you can install it using the command below. You can use Cypress with any of your frontend projects, it can be in React, Angular, Vue or just plain JavaScript. Depending on whether you use npm or _yarn _ you can use either commands to install.

npm install cypress --save-dev

or

yarn add cypress --dev

On VS Code, there is an awesome plugin for Cypress, named Cypress Snippets. Make sure to install it, and that can provide code snippets for your Cypress code within VS Code.

By default, if you integrate Cypress within an existing project, it generates sub-folders within the main cypressfolder. The folder structure is as shown in the picture below with folders for fixtures, integration, plugins and support.

The integration folder is where you will add your Cypress test files.

Writing Your First Test

Within the integration folder, create a new test file with the extension .js. Let’s call it first_spec.js. _I am going to write a simple test to validate that the client is running at a certain url. Let’s say your web app is running at _http:_localhost:4100. _We are going to write a quick test to ensure that the app indeed loads at that url.

/// <reference types="Cypress"/>

describe ('My First Test Suite', () => {

    it('test url works', () => {
        cy.visit('http://localhost:4100')
    });
})

We can enable IntelliSense on VS Code, using the first line on the code snippet above. This makes our IDE provide intelligent code suggestions. Notice, that the test uses keywords like _describe _and _it. _These maybe familiar to you from other testing frameworks as well. They come from Mocha, another popular testing framework.

We are using a Cypress command visit to that visits a given URL. Cypress comes with many commands that facilitate you to test your application. All Cypress commands begin with cy. followed by the name of the command. The _visit _command takes a url as an argument.

Our test file is complete, and it is time to run it.

Running Your Test

You can run your Cypress tests either from command line or from the Cypress test runner. I like the visual features of the Cypress test runner. To open the Cypress test runner, run the following command.

npm run cypress:open

This command, open the test runner as shown below:

Within the Cypress test runner, you can select the test you want to run, and also pick a browser to rub the tests against. Since we have only one test written so far, we see that on the test runner. Clicking on this test will run it on a new browser.

You will notice how fast the Cypress test runs and you can also see how Cypress interacts with the application just like a real user does. On the left side you can see the tests executing and each command and assertion is displayed, and on the right you can see the browser opens up and runs the application. Cypress visits the url localhost:4100 and the web app is running locally. This means our initial end-to-end test passed! Yay!

You can try this out with your web app as well, and this will get you all ready to start writing Cypress tests.

Next Steps

We just scratched the surface here with Cypress. I gave you a quick overview on Cypress, and getting setup and started with it. We will cover more on Cypress tests in the upcoming articles.

You can also checkout my course linked below on Cypress, where I teach Cypress from scratch, and write Cypress tests for a real world application.

Cypress End-to-end JavaScript Testing by Adhithi Ravichandran

Other Resources:

https://www.cypress.io/

I hope you enjoyed this article. If you liked this post, don’t forget to share it with your network. You can follow me on twitter @AdhithiRavi for more updates or if you have any questions.

The Original Article can be found on programmingwithmosh.com

javascript testing developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.

Developer Career Path: To Become a Team Lead or Stay a Developer?

For a developer, becoming a team leader can be a trap or open up opportunities for creating software. Two years ago, when I was a developer, ... by Oleg Sklyarov, Fullstack Developer at Skyeng company

JavaScript Testing - Unit Tests, Integration Tests & e2e Tests

JavaScript testing - i.e. unit tests, integration tests and e2e (UI) tests - can be intimidating. It shouldn't be! This video guides you through all the basics (including the "Why"?) of JavaScript testing. JavaScript Testing Introduction Tutorial - Unit Tests, Integration Tests & e2e Tests. Master JavaScript testing now!

Property-Based Testing for JavaScript Developers

This guide helps you write your first property-based test in JavaScript using the fast-check framework. All experienced frontend developers know one thing to be true: Users are unpredictable. No matter how much user research you conduct or how thick the font-weight is on your input label, you can never be certain how users will interact with your product. That’s why, as the creators of the interface, we put in constraints. And to ensure that those constraints work properly, we write tests.

How To Implement Linked Lists With Test Driven Development In JavaScript

Linked lists are one of the most popular data structures interviewers ask about in technical interviews. On top of covering linked lists in this video, I will also be covering how you can use test driven development to make writing code easier. We will be designing the entirety of the linked list with test driven development to show you how to write better tests.