Introduction to Automation Testing with Cypress for the Modern Webweb admin
Cypress is a front end automation tool created for the modern web. Cypress is built using new architecture and it runs in the same run-loop as the application under test. Which results in Cypress providing better, faster, and more reliable testing for anything that runs in a browser. Cypress works on any front-end framework or website
Some of the key features of Cypress are Time Travel, Debug ability, Automatic wait, Spies, Stubs, and Clocks, Network Traffic Control, Consistent Results, Screenshots and Videos
What you may like:
- Cypress does not use Selenium as most of the other end to end testing tools are using Selenium, that’s why others have almost the same problems
- Easy and effortless installation and updating. If you’re using Node.js and want to install Cypress in the project it will be just a single line in the console. (npm install cypress)
- Cypress supports any framework or website quite well. There are thousands of projects built using the latest React, Angular, Vue, Elm, etc. frameworks. Cypress also works equally well on server rendered pages or applications.
- Cypress has no issues with nodes, their versions, and related dependencies.
- It has an awesome dashboard and preview window. Just look at the screenshot below. It gives you a precise overview of what’s being tested.
- Screenshot for every step, of the script, which can be quite helpful if there, is any false passing or failing test which is good for debugging also.
- Broad range of debug and test tracking options. The list have integration with dev tools, screenshots, snaps etc
- Headless option and ease of integrating with CI. At present, Cypress can be integrated with around 15 CI providers. Cypress runs much faster with end to end tools.
- Network traffic control. i.e. Detection, debugging, verification, waiting for requests
- Eliminating all sorts of timers. Cypress features a built-in mechanism to handle waiting for DOM elements
- Easy to use & intuitive syntax (Mocha and Chai are all there)
- Wide range of selectors plus Cypress ‘built-in’ commands serves all requirement
What you may dislike:
- Structure is different to the other Selenium end to end tools, so in first place need to spend more time understanding.
- Community: As Cypress is relatively new may find trouble getting answers
- No native event handling capabilities like files upload etc. & No cross-browsers testing.
- No Page Object Model, It supports altogether different approach
Pros and Cons: Cypress vs. Selenium
Going ahead with cypress:
· Limitation as cannot parallelize test execution
· No Cross Browser Testing & No Support for native event handling
· No out of box support for Page Object Model
Setting up cypress:
· Download and install Node.js
· Download and install VS Code
· Create a project folder say “eazyagile”
· Open the folder in VS Code
· In VS Code terminal run npm init -y
- Install Cypress
· In VS Code terminal run npm install cypress
- Create Folder Structure for Cypress tests & Write tests
· In VS Code terminal run npx cypress open (To create folder structure required for cypress tests)
· Delete examples folder from integration
· Create authentication folder under integration
· Create authentication folder under support
· Create login.spec.js in authentication folder under integration
· Create login-form.js & index.js in authentication folder under support
- Tests Execution
· In VS Code terminal run npm start
- Runner Window
- Execution in Progress