Cypress Introduction
Official website - docs.cypress.io
Cypress is a JavaScript based testing tool implemented for testing front end web applications. It addresses pain points faced by automation testers such as handling AJAX calls, synchronization, handling waits etc. Cypress can be used to test anything running in a web browser. Since it runs on a real browser, it can work without needing to have driver binaries.
Cypress Architecture
As shown in the image below, cypress is handled by node server. However, the cypress code runs along side the application code inside the browser (both are running in iFrames), it can access anything inside the application. This allows cypress to mock JavaScript of a webpage or change the JavaScript object on the fly. The cypress inside node server acts as a proxy and uses HTTP requests to manage the tests running inside the browser.
- Easy to setup as it does not need driver binaries
- It has built-in waits. Therefore no need to implement waits for tests
- Access and change JS code on the fly
- It has a dashboard for reporting
- Supports parallel execution
- Screen grabs to show how tests are executed. (Easy to debug)
Setting up Cypress in a Windows machine
Install node JS in your machine
Use the Download | Node.js (nodejs.org) link to download and install node JS.
Once installed, launch command line and run node -v to see if it has been successfully installed.
Install Cypress using npm install in your machine
Enter npm install cypress --save-dev in the project folder to install cypress.
Open project using visual studio code
File > Add Folder to Workspace
Use .\node_modules\.bin\cypress open in terminal to start cypress. (If this is your first time starting cypress, expect a slight delay before you see cypress test runner)
Then cypress test runner will be opened.
Then cypress folder structure will be created. Open visual studio code project to see the folder structure created.
Copy the following to package.json file
"scripts": {
"cypress:open": "cypress open"
}
Then save the changes.
Now you can run npm run cypress:open and launch cypress test runner.
