Cypress Basic Learning

What is Cypress
Cypress is a next generation front end testing tool built for the modern web. We address
the key pain points developers and QA engineers face when testing modern
applications. This enables you to write faster, easier, and more reliable tests.
Cypress is a JavaScript-based tool for frontend testing.
With it, you can write all types of tests: End-to-end tests, Integration tests, and Unit
tests.
Fast, easy and reliable testing for anything that runs in a browser.
Cypress Features
Time travel: Cypress takes snapshots as your tests run
Debugging: Readable errors and stack traces make debugging easier
Automatic waiting: Automatically waits for commands and assertions before moving
on
Spies, stubs, and clocks: Verify and control the behavior of functions, server
responses, or timers
Network Traffic Control: Control, stub, and test edge cases without involving the
server
Screenshots 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
Pros & Cons
Pros..
Cypress framework captures snapshots at the time of test execution. This allows QAs or
developers to hover over a specific command in the Command Log to see exactly what
happened at that particular step.
One doesnt need to add explicit or implicit wait commands in test scripts, unlike
Selenium. Cypress waits automatically for commands and assertions.
Auto reload, act as real user
Uses Mocha as a testing framework & chai is assertion library
Rich documentation
Cons..
Only supports Javascript language
Only supports css selector
It doesnt provide support for multi-tabs
Cypress doesnt provide support for browsers like Safari at this moment.
Tech Stack
Cypress
VS code
Javascript Programming
Mocha framework
Reports: Mocha Awesome
Installation of Cypress
Download Node.js from https://nodejs.org/en/download/ as per your operating
System, as the Cypress is build on the node.js
Create a folder and import the folder in Visual Studio code editor (or Atom,sublime) and
open the terminal
Setup a new npm package : npm init
Open the terminal and enter npm install cypress --save-dev
Enter following command to open cypress studio ./node_modules/.bin/cypress open.
Refer Cypress installation documentation
https://docs.cypress.io/guides/getting-started/installing-cypress#npm-install
Understanding folder structure
Fixtures: for all the test data information
Integration: for writing test cases
Plugins: kind of listeners, customized methods to handle cypress events
Support: for utility methods, like method, is getting used by many test cases. No need
to import support folder, Cypress will automatically sense the method
Videos/Screenshots: for running tests

Thanks,
Vital Kumar U
Linkedin