Introduction to Cypress:

Cypress is a Javascript End to End testing framework. In contrast to Puppeteer, which is a library, Cypress gives you a solid platform for writing and automating UI tests. Cypress is a next generation front end testing tool built for the modern web. Cypress is not constrained by the same restrictions as Selenium and is both fundamentally and architecturally different.

Cypress enables you to write all types of tests:

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

Cypress can test anything that runs in a browser. Cypress consists of a free, open source, locally installed Test Runner and a Dashboard Service for recording your tests.

Features:

  1. Time Travel: Cypress takes snapshots as your tests run. Hover over commands in the Command Log to see exactly what happened at each step.
  2. Debuggability: Stop guessing why your tests are failing. Debug directly from familiar tools like Developer Tools. Our readable errors and stack traces make debugging lightning fast.
  3. Automatic Waiting: Never add waits or sleeps to your tests. Cypress automatically waits for commands and assertions before moving on. No more async hell.
  4. Spies, Stubs, and 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.
  5. Network Traffic Control: Easily control, stub, and test edge cases without involving your server. You can stub network traffic however you like.
  6. Consistent Results: Our architecture doesn’t use Selenium or WebDriver. Say hello to fast, consistent and reliable tests that are flake-free.
  7. Screenshots and Videos: View screenshots taken automatically on failure, or videos of your entire test suite when run from the CLI.

Cypress Installation Steps:

# path where Cypress will be installed
$ cd /project/path

# this will install Cypress locally as a dev dependency for your project
$ npm install cypress --save-dev

Note: Make sure that you have already run npm init or have a node_modules folder or package.json file in the root of your project to ensure cypress is installed in the correct directory.

How to run Cypress scripts:

# if Cypress has now been installed to your ./node_modules directory, with its binary executable accessible from ./node_modules/.bin
$ ./node_modules/.bin/cypress open

OR 

# run shortcut using npm bin
$ $(npm bin)/cypress open

OR

# this command is much easier and clearer to add Cypress commands to the scripts field in your package.json file **
$ npm run cypress:open

Sample Cypress Script:

Filename of the automated script: facebook_login.js

describe('Login to Facebook', function() {
    // ---- Login to Facebook ---- //
    it('login successful', function() {
        cy.visit('https://www.facebook.com/')
        cy.get('input[name="email"]').type('test@example.com')
        cy.get('input[name="pass"]').type('test_pass')
        cy.get('label[id="loginbutton"]').click({ multiple: true, force: true})
        cy.wait(4000)
    });
});

** Adding npm scripts:

While there’s nothing wrong with writing out the full path to the Cypress executable each time, it’s much easier and clearer to add Cypress commands to the scripts field in your package.json file.

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