Cypress.io is a frontend automation testing tool built for modern web applications developed on some of the emerging technologies like Reactjs, Ionic, Vue, and Angular. Cypress is a test automation tool that can perform fast, easy and reliable testing for anything that runs in a browser.

1. Progressive Web App
Testing With
Cypress.io
Presented By: Gaurav Kumar Shukla

2. Agenda
● What is Cypress.io
● Why Cypress
● Architecture of Cypress
● Cypress Installation
● Cypress Test Runner
● Cypress Locator Strategy
● Example
● Q&A

4. What is Cypress.io?
● Cypress.io is a frontend automation testing tool built for modern web
applications developed on some of the emerging technologies like
Reactjs, Ionic, Vue,and Angular.
● Cypress is a test automation tool that can perform fast, easy and reliable
testing for anything that runs in a browser.

5. Why Cypress.io?
● Cypress is next generation automation testing tool, that address the
major pain points developers and QA team face while testing modern
applications.
○ Test
■ Setup
■ Write
■ Run
■ Debug
○ Cypress makes it amazingly simple.

8. How is it different from Selenium?
● Native Access, as your test code can access all the same objects that
your application code can.
● Stub the browser or your application’s functions and force them to
behave as needed in your test case.
● Expose data stores (like in Redux) so you can programmatically alter the
state of your application directly from your test code.
● Test edge cases like ‘empty views’ by forcing your server to send empty
responses.
● Test how your application responds to errors on your server by modifying
response status codes to be 500 so that timers or polls automatically fire
without having to wait for the required time in your tests.

9. Cypress Supported Browser/Language.
● Browser
○ Chrome
○ Electron
○ Firefox & IE [Not Supported/ Under Construction.]
● Language Support
○ JavaScript

11. Cypress Setup
● As cypress is a JavaScript automation tool, that’s why we need to work
with modern JavaScript tools like Node.JS and NPM. To install node.js
from scratch please visit the node.js official website.
○ $ node –version
// to check the node installed or not.
○ $ npm init -y
// This command will create a package.json file and initialize a folder to accept the npm
command.
○ $ npm install cypress@[version]
// install an specific version of cypress, here version is an optional field.

12. Run Cypress
● $ npx cypress open
// It will open cypress test runner and create a folder structure in your project directory.
○ Cypress
■ Fixture: It contains all the data files which contains some static configuration and
user data. for ex. username, password etc.
■ Integration: It contains all the test files, the test that we write will be in this folder.
● Examples: It is a sub folder in integration older that contains some of
predefined examples, it is automatically generated when we first install the
cypress.
■ plugins: As cypress is also a node process, so we can integrate ‘n’ number of
plugins here by putting them in this folder.
■ support: it includes reusable behavior such as Custom Commands or global
overrides that you want applied and available to all of your spec files.

13. Cypress Test Runner
● Cypress runs tests in a unique interactive runner that allows you to see
commands as they execute while also viewing the application under test.
● Cypress Test Runner Contains:
○ Command Log
○ Test Status Menu
○ URL Preview
○ App Preview and more...

15. Write a basic test.
● As cypress support javascript so we need to follow the standards of at
least one javascript framework like Chai, Jasmine or Mocha.
● Cypress recommend to use inbuilt framework Mocha.

16. Cypress Locator Strategy
● Cypress support Jquery locators.
○ CSS Selector
● Some commands in Cypress are for interacting with the DOM such as:
○ .click()
○ .dblclick()
○ .rightclick()
○ .type()
○ .clear()
○ .check()
○ .uncheck()
○ .select()
○ .trigger()

19. References:
● https://www.cypress.io/
● https://www.udemy.com/course/cypress-tutorial/
● https://rap.knoldus.com/

20. Thank You.
^.^