E2E Testing with Cypress - 01 - Introduction

The web has evolved. Finally, testing has too. Cypress provides fast, easy, and reliable testing for anything that runs in a browser.

Introduction

Cypress provides a complete end-to-end testing experience. Until now, end-to-end testing was not easy. It was the part developers always hated but not anymore. Cypress makes setting up, writing, running, and debugging tests easy.

Who uses Cypress?

Cypress users are typically developers or QA engineers building web applications using modern JavaScript frameworks.

Cypress enables you to write all type of tests:

• End-to-end tests
• Integration tests
• Unit tests

Cypress can test anything that runs in a browser.

How Cypress is different?

• Cypress does not use Selenium

  The architecture is completely different. Most end-to-end testing tools operate by running outside of the browser and executing remote commands across the network. Cypress is the exact opposite. Cypress is executed in the same run loop as your application. Behind Cypress is a Node.js server process. Cypress and the Node.js process constantly communicate, synchronize, and perform tasks on behalf of each other. Having access to both parts (front and back) gives us the ability to respond to your application’s events in real-time, while at the same time, work outside of the browser for tasks that require a higher privilege.

• Cypress tests are only written in JavaScript

  Cypress tests anything that runs in a web browser. All the architecture surrounding Cypress is built to handle modern JavaScript frameworks especially well. We have hundreds of projects using the latest React, Angular, Vue, Elm, etc. frameworks. Cypress also works equally well on older server-rendered pages or applications.

• Cypress is all in one

  Writing end-to-end tests takes a lot of different tools to work together. With Cypress, you get multiple tools in one. There is no need to install 10 separate tools and libraries to get your test suite set up. We have taken some best-in-class tools you are likely already familiar with and made them all work together seamlessly.

• Cypress is for developers and QA Engineers

  One of our goals was to make test-driven development a reality for end-to-end testing. Cypress is at its best when you use it as you build your application. We give you the power to code as fast as possible.

• Cypress runs much, much faster

  These architectural improvements unlock the ability to do TDD with full end-to-end tests for the very first time. Cypress has been built so that testing and development can happen simultaneously. You can develop faster while driving the entire dev process with tests.

Features

• Time Travel:

  Yes, you heard it right. Time travel is finally possible. Cypress takes snapshots as your tests run. Hover over the commands in the Command Log to see exactly what happened at each step.

• Real-Time Reloads:

  Cypress automatically reloads whenever you make changes to your tests. See commands execute in real-time in your application.

• Automatic Waiting:

  Never add wait or sleep to your tests. Cypress automatically waits for commands and assertions before moving on. No more async hell.

• Spies, Stubs & Clocks:

  Verify and control the behavior of functions, server responses, or timers. The same functionality you love from unit testing is right at your fingertips.

• Network Traffic Control:

  Easily control, stub, and test edge cases without involving your server. You can stub network traffic however you like.

• Screenshot and Videos:

  View screenshots taken automatically on failure, or videos of your entire test suite when run from the CLI.

• Cross Browser Testing:

  

  Run tests within Firefox and Chrome-family browsers (including Edge and Electron) locally and optimally in a continuous integration pipeline.

  

Installation And Requirements

• System Requirement

  • OS

    Cypress is a desktop application that is installed on your computer. The desktop application supports these operating systems:

    • macOS: 10.9 and above (64-bit only)

    • Linux: Ubuntu 12.04 and above, Fedora 21 and Debian 8 (64-bit only)

      • For Ubuntu/Debian
        

        
          sudo apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
        
        

      • For CentOS
        

        
          yum install -y xorg-x11-server-Xvfb gtk2-devel gtk3-devel libnotify-devel GConf2 nss libXScrnSaver alsa-lib
        
        

    • Windows: 7 and above

• Node.js

  If you're using npm to install Cypress, then
  Node.js 10 or 12 and above

• Installing

  The recommended approach is to install Cypress with npm because :

  • Cypress is versioned like any other dependency.

  • It simplifies running Cypress in Continuous Integration.
    

    
      cd /your/project/path
      npm install cypress --save-dev
    
    

    Or, you could always install with yarn
    

    
      cd /your/project/path
      yarn add cypress --dev
    
    

• Opening Cypress

  If you used npm to install, Cypress has now been installed to your ./node_modules directory, with its binary executable accessible from ./node_modules/.bin.

  Now you can open Cypress from your project root one of the following ways:

  • Use the shortcut using npm bin
    

    
      $(npm bin)/cypress open
    
    

  • Adding npm scripts

    Inside your package.json file:
    

    
      {
          "scripts": {
              "cypress:open": "cypress open"
          }
      }
    
    

    Now you can invoke the command from your project root like so:
    

    
      npm run cypress:open
    
    

  • You can always use other options like yarn or npx to open Cypress.
    

    
      # using yarn
      yarn run cypress open
      # using yarn
      npx cypress open
    
    

What's next?

🎉 That's it! You can now set up Cypress as a testing framework for your project. In the next parts of this series, we will guide you to write, run, and debug tests using Cypress technology. If you have any thoughts or comments about the post, please do comment. Till then, Cheers. 🥳 🙌