Cypres UI Automation tool for Angular, react and vue developer and Tester

1. End to End Test Automation with
Cypress.io- The future of test
automation tool for both Developers and
QA
• Pankaj Singh

2. Cypress
 Cypress is an open-source JavaScript-based test automation framework built on NodeJS. Built for the modern web, Cypress
operates directly in the browser so it’s easy for developers to work with.
 Cypress runs tests (written in JavaScript) in its unique and interactive window. It supports different types of testing such as end
to end testing, unit testing, integration testing, visual testing and API testing. Since it is a NodeJS based framework, testers need
to have Node runtime executables in their system to execute Cypress tests.
Cypress.io is a custom implementation for selenium’s web driver API, no need to install drivers for the specific browsers and
their versions.
• Cypress Statistics
Stars: 32.6K
Forks: 1.9K
Used By: 235K
Contributors: 288
Weekly downloads: 2,384,947
Data Source: Cypress Github and NPM

3. Can we use Selenium WebDriver to test
AngularJS applications?
Yes we can use traditional WebDriver to test AngularJS applications.
But tool like cypress.io and Protractor makes the life much more easier .
It has Automatic Waiting for elements which handles asynchronous loading. Selenium cannot handle
such asynchronous calls.
Angular elements are identified by - by. Model and by. Binding, which is not supported by the traditional
WebDriver.
Angular uses IDs heavily for interaction and DOM manipulation. As a result, WebDriver tests cannot rely
on IDs to locate elements, and locating by name is bit more hassle (non-unique etc).

4. Can we always rely on Selenium?

5. Tools to Automate AngularJS applications and
Alternative tools for Protractor

7. Why to choose Cypress
 Open Source
 Automation tool for both
Developers and QA
 Supports frameworks like
Jest, Mocha
 Runs very fast
 Real time reloads
 Automatic waiting, no need to add
sleeps
 Easy to set up, with just one line
command
 Easy to Write test, JavaScript
testing framework
 Easy to debug tests
 Travel back in time
 Not based on selenium
 Runs directly in the browser
 Direct access to Application under test
 No need to add any drivers for the browser and it’s version-specific.
 Screenshots and Videos can be captured automatically
 Easy to set up with CI tools
 Flake resistant
 Parallelization
 Supports reporting like Mochawesome or Slack reporting
 Supports all modern web browsers {angular, react, vue} testing.

8. Cypress.io all in one

9. What’s New in Cypress.io

10. Cypress Features & Advantages
Front-end testing tool
Open Source
Unit, Integration & end-to-end testing
Automatic waits, no need to add sleeps
to your test
Script written in JavaScript
Framework – Mocha
Assertion – Chai
Architecturally different from Selenium
Browsers driver are by default included

11. Browsers Support & System
requirements:
 Chrome
 Chromium
 Electron {Headless}
 Firefox
 Edge
macOS 10.9 and above (64-bit only)
Linux Ubuntu 12.04 and above, Fedora 21 and
Debian 8 (64-bit only)
Windows 7 and above
• If using npm to install Cypress, we support:
Node.js 12 and above

12. Cypress Installation and Project Setup
Three ways to install Cypress:
 Using npm
• npm install cypress –save-dev
 Using yarn
• yarn add cypress –dev
 Direct download
• https://download.cypress.io/desktop
Prerequisites :-
 Download Node and NPM
 Set NODE_HOME Env. Variable
 Create Cypress Working Folder
 Install Cypress
 Download visual studio code editor

13. Cypress framework structure

14. Writing your first Test Case
 Create a new file in cypress/integration/core.button.js
 describe is a Cypress method (borrowed from Mocha) for containing one or more related tests.
Every time you start writing a new suite of tests for a functionality wrap it in a describe block
 Next up we're going to meet another function called it which is the actual Test case

15. Limitations of Cypress
Programming Language: Cypress Supports only JavaScript/Typescript.
Multiple Tab: Cypress does not support multiple tabs or the ability to switch to Parent and Child windows.
Native Mobile Apps: Cypress does not support native mobile app automation.
iframe Support: Cypress support for iframes is limited.
Parallel/Concurrent Execution: Cypress doesn’t support parallel execution of tests on the same or multiple
browsers.
Single Origin Tests: Users cannot create tests under different origins or URLs. Tests must be always in line
with single origin.
Selector Support: Cypress supports only CSS selectors natively but there are third-party packages that can
be plugged to use XPath.
Assertion Libraries: Cypress supports only Mocha and Chai assertion libraries.
Third-party authentication: If testers have to test third-party authentication mechanisms like SSO or Active
Directory login, these functions cannot be automated. QAs need to use API calls to create login sessions.