SlideShare a Scribd company logo
Cypress
- JavaScript unit testing tool
Testing the way it should be...
- Shivam BharadwajJune 07, 2018
Agenda ★ The Problem
★ Why Cypress?
★ Cypress Vs Selenium
★ Installing Cypress
★ Unit testing in Cypress
★ Live Demo
★ Stubbing and Mocking
★ Live Demo
★ Takeaways
2Shivam Bharadwaj
The Problem
Modern Web? (react/vue/p5)
Another testing tool, Why?
3
Why Cypress?
➔ JavaScript testing tool
➔ Free and open source
➔ Easy Control of response bodies, status and
headers
➔ Fast, <20 ms response time
➔ Built on top of Mocha and Chai
➔ Ability to choose whether to stub responses or
allow them to actually hit your server
➔ Active community on GitHub, Gitter and
stackoverflow
➔ Rich documentation
➔ Auto Reload, act as real user
➔ Commands automatically retries assertions
➔ Helps you finding locator
- Test your code, not your patience
4
What sets
Cypress apart?
★ Time travel
★ Real time reloads
★ Automatic waiting
★ Spies, stubs, and clocks
★ Network traffic control
★ Screenshots and videos
★ Runs directly in browser
★ Debugging (hover)
★ Helpful error messages
★ First visibility actions
★ Testing of responsive web apps
5
6
Architecture
Cypress Vs Selenium
➢ No configuration needed with Cypress
➢ Cypress only supports Chrome and Electron (FireFox
support is on its way)
➢ Selenium WebDriver runs remotely outside the browser,
Cypress is the exact opposite, it runs inside the browser
➢ Cypress only supports jQuery selectors (CSS selectors)
➢ Cypress is super fast than selenium and it records video as
well
➢ Cypress is commercial company and, not sure they will
keep their open source promise
➢ Running Cypress in Continuous Integration is the same as
running it locally
The web has evolved. Finally, testing has too
7
npm init
npm install cypress --save-dev
Installing Cypress
*You should have node.js installed
8
1
Inatalling Cypress
List any research or data you have to
support the need for a solution.
9
Folder Structure
Like maven projects in Java, Cypress
also exhibits its own structure
/cypress
/fixtures
- example.json
/integration
- example_spec.js
/plugins
- index.js
/support
- commands.js
- index.js
10
Writing and
Running Test
The test interface borrowed from Mocha
provides describe(), context(), it() and
specify().
context() is identical to describe() and
specify() is identical to it()
11
12
I am being used by?
Live Demo
---
13
Mocking and Stubbing
14
Mocking = Imitation, Fake
● Mocking is creating objects that simulates the behaviour of real objects
● A dummy implementation of your object
● Sinon is famous JavaScript mocking library that provides mocks, stubs, and spies
15
Stubbing = A Small Piece
● Stubbing means replacing a method, function or an entire object with a version that produces
hard-coded responses
● Dummy objects that exhibits properties of real objects
● The stub implements just enough behaviour to allow the object under test to execute the test
● Real time examples -
○ James Bond
○ Module Dependency
16
Stubbing with Cypress
❏ cy.fixture()
● Load a fixed set of data
❏ cy.server()
● Start a server to begin routing responses
❏ cy.route()
● manages the behavior of network requests
cy.route('GET', /sessions/,
'@sessionsJson');
17
18
19
Finds
Locator
Live Demo
20
Takeaways
It provides very good features to enable you to create integration tests.
Experienced with the problems related to Selenium we @Frontline decided to switch our tactics and use
Cypress as our primary E2E tool. It works as expected and makes our lives a lot easier.
I have used Cypress way too little to like it very much and think this is the tool we required.
In any way do try Cypress.
21
Questions?
References
● https://www.cypress.io/
● Demo Video Creating First Project
● https://gorrion.io/blog/getting-
started-with-cypress-io/
@its_ShivamB
Thank You!!
22Shivam Bharadwaj

More Related Content

What's hot

Introduction to Integration Testing With Cypress
Introduction to Integration Testing With CypressIntroduction to Integration Testing With Cypress
Introduction to Integration Testing With Cypress
Erez Cohen
 
Introduction cypress
Introduction cypressIntroduction cypress
Introduction cypress
Oim Trust
 
Cypress e2e automation testing - day1 intor by: Hassan Hameed
Cypress e2e automation testing -  day1 intor by: Hassan HameedCypress e2e automation testing -  day1 intor by: Hassan Hameed
Cypress e2e automation testing - day1 intor by: Hassan Hameed
Hassan Muhammad
 
e2e testing with cypress
e2e testing with cypresse2e testing with cypress
e2e testing with cypress
Tomasz Bak
 
Cypress Automation
Cypress  AutomationCypress  Automation
Cypress Automation
Susantha Pathirana
 
Progressive Web App Testing With Cypress.io
Progressive Web App Testing With Cypress.ioProgressive Web App Testing With Cypress.io
Progressive Web App Testing With Cypress.io
Knoldus Inc.
 
Cypress E2E Testing
Cypress E2E TestingCypress E2E Testing
Cypress E2E Testing
AnaBrankovic7
 
End to end test automation with cypress
End to end test automation with cypressEnd to end test automation with cypress
End to end test automation with cypress
Kushan Shalindra Amarasiri - Technical QE Specialist
 
Getting Started With Cypress
Getting Started With CypressGetting Started With Cypress
Getting Started With Cypress
Knoldus Inc.
 
End to end test automation with cypress
End to end test automation with cypressEnd to end test automation with cypress
End to end test automation with cypress
PankajSingh184960
 
Cypress report
Cypress reportCypress report
Cypress report
Adarsh
 
Component testing with cypress
Component testing with cypressComponent testing with cypress
Component testing with cypress
Walmyr Lima e Silva Filho
 
Cypress vs Selenium WebDriver: Better, Or Just Different? -- by Gil Tayar
Cypress vs Selenium WebDriver: Better, Or Just Different? -- by Gil TayarCypress vs Selenium WebDriver: Better, Or Just Different? -- by Gil Tayar
Cypress vs Selenium WebDriver: Better, Or Just Different? -- by Gil Tayar
Applitools
 
Introduction to cypress in Angular (Chinese)
Introduction to cypress in Angular (Chinese)Introduction to cypress in Angular (Chinese)
Introduction to cypress in Angular (Chinese)
Hong Tat Yew
 
QA Challenge Accepted 4.0 - Cypress vs. Selenium
QA Challenge Accepted 4.0 - Cypress vs. SeleniumQA Challenge Accepted 4.0 - Cypress vs. Selenium
QA Challenge Accepted 4.0 - Cypress vs. Selenium
Lyudmil Latinov
 
Introduction to E2E in Cypress
Introduction to E2E in CypressIntroduction to E2E in Cypress
Introduction to E2E in Cypress
Fabio Biondi
 
BDD with Cucumber
BDD with CucumberBDD with Cucumber
BDD with Cucumber
Knoldus Inc.
 
Cypress test techniques cucumber bdd framework,tdd,api tests course
Cypress test techniques cucumber bdd framework,tdd,api tests courseCypress test techniques cucumber bdd framework,tdd,api tests course
Cypress test techniques cucumber bdd framework,tdd,api tests course
Narayanan Palani
 
Cypress Automation Testing Tutorial (Part 1).pdf
Cypress Automation Testing Tutorial (Part 1).pdfCypress Automation Testing Tutorial (Part 1).pdf
Cypress Automation Testing Tutorial (Part 1).pdf
bacancytechnology
 
Test Automation and Selenium
Test Automation and SeleniumTest Automation and Selenium
Test Automation and Selenium
Karapet Sarkisyan
 

What's hot (20)

Introduction to Integration Testing With Cypress
Introduction to Integration Testing With CypressIntroduction to Integration Testing With Cypress
Introduction to Integration Testing With Cypress
 
Introduction cypress
Introduction cypressIntroduction cypress
Introduction cypress
 
Cypress e2e automation testing - day1 intor by: Hassan Hameed
Cypress e2e automation testing -  day1 intor by: Hassan HameedCypress e2e automation testing -  day1 intor by: Hassan Hameed
Cypress e2e automation testing - day1 intor by: Hassan Hameed
 
e2e testing with cypress
e2e testing with cypresse2e testing with cypress
e2e testing with cypress
 
Cypress Automation
Cypress  AutomationCypress  Automation
Cypress Automation
 
Progressive Web App Testing With Cypress.io
Progressive Web App Testing With Cypress.ioProgressive Web App Testing With Cypress.io
Progressive Web App Testing With Cypress.io
 
Cypress E2E Testing
Cypress E2E TestingCypress E2E Testing
Cypress E2E Testing
 
End to end test automation with cypress
End to end test automation with cypressEnd to end test automation with cypress
End to end test automation with cypress
 
Getting Started With Cypress
Getting Started With CypressGetting Started With Cypress
Getting Started With Cypress
 
End to end test automation with cypress
End to end test automation with cypressEnd to end test automation with cypress
End to end test automation with cypress
 
Cypress report
Cypress reportCypress report
Cypress report
 
Component testing with cypress
Component testing with cypressComponent testing with cypress
Component testing with cypress
 
Cypress vs Selenium WebDriver: Better, Or Just Different? -- by Gil Tayar
Cypress vs Selenium WebDriver: Better, Or Just Different? -- by Gil TayarCypress vs Selenium WebDriver: Better, Or Just Different? -- by Gil Tayar
Cypress vs Selenium WebDriver: Better, Or Just Different? -- by Gil Tayar
 
Introduction to cypress in Angular (Chinese)
Introduction to cypress in Angular (Chinese)Introduction to cypress in Angular (Chinese)
Introduction to cypress in Angular (Chinese)
 
QA Challenge Accepted 4.0 - Cypress vs. Selenium
QA Challenge Accepted 4.0 - Cypress vs. SeleniumQA Challenge Accepted 4.0 - Cypress vs. Selenium
QA Challenge Accepted 4.0 - Cypress vs. Selenium
 
Introduction to E2E in Cypress
Introduction to E2E in CypressIntroduction to E2E in Cypress
Introduction to E2E in Cypress
 
BDD with Cucumber
BDD with CucumberBDD with Cucumber
BDD with Cucumber
 
Cypress test techniques cucumber bdd framework,tdd,api tests course
Cypress test techniques cucumber bdd framework,tdd,api tests courseCypress test techniques cucumber bdd framework,tdd,api tests course
Cypress test techniques cucumber bdd framework,tdd,api tests course
 
Cypress Automation Testing Tutorial (Part 1).pdf
Cypress Automation Testing Tutorial (Part 1).pdfCypress Automation Testing Tutorial (Part 1).pdf
Cypress Automation Testing Tutorial (Part 1).pdf
 
Test Automation and Selenium
Test Automation and SeleniumTest Automation and Selenium
Test Automation and Selenium
 

Similar to Why you should switch to Cypress for modern web testing?

Front-End Modernization for Mortals
Front-End Modernization for MortalsFront-End Modernization for Mortals
Front-End Modernization for Mortals
cgack
 
Front end-modernization
Front end-modernizationFront end-modernization
Front end-modernization
devObjective
 
Test pyramid in an Android Agile Project - TDC2013
Test pyramid in an Android Agile Project - TDC2013Test pyramid in an Android Agile Project - TDC2013
Test pyramid in an Android Agile Project - TDC2013
Thiago Ghisi
 
Hands on Exploration of Page Objects and Abstraction Layers with Selenium Web...
Hands on Exploration of Page Objects and Abstraction Layers with Selenium Web...Hands on Exploration of Page Objects and Abstraction Layers with Selenium Web...
Hands on Exploration of Page Objects and Abstraction Layers with Selenium Web...
Alan Richardson
 
Js tacktalk team dev js testing performance
Js tacktalk team dev js testing performanceJs tacktalk team dev js testing performance
Js tacktalk team dev js testing performance
Артем Захарченко
 
Hotfixing iOS apps with Javascript
Hotfixing iOS apps with JavascriptHotfixing iOS apps with Javascript
Hotfixing iOS apps with Javascript
Sergio Padrino Recio
 
Enterprise Strength Mobile JavaScript
Enterprise Strength Mobile JavaScriptEnterprise Strength Mobile JavaScript
Enterprise Strength Mobile JavaScript
Troy Miles
 
CBDW2014 - MockBox, get ready to mock your socks off!
CBDW2014 - MockBox, get ready to mock your socks off!CBDW2014 - MockBox, get ready to mock your socks off!
CBDW2014 - MockBox, get ready to mock your socks off!
Ortus Solutions, Corp
 
2019 StartIT - Boosting your performance with Blackfire
2019 StartIT - Boosting your performance with Blackfire2019 StartIT - Boosting your performance with Blackfire
2019 StartIT - Boosting your performance with Blackfire
Marko Mitranić
 
Throwing complexity over the wall: Rapid development for enterprise Java (Jav...
Throwing complexity over the wall: Rapid development for enterprise Java (Jav...Throwing complexity over the wall: Rapid development for enterprise Java (Jav...
Throwing complexity over the wall: Rapid development for enterprise Java (Jav...
Dan Allen
 
The Many Ways to Test Your React App
The Many Ways to Test Your React AppThe Many Ways to Test Your React App
The Many Ways to Test Your React App
All Things Open
 
Automation Abstractions: Page Objects and Beyond
Automation Abstractions: Page Objects and BeyondAutomation Abstractions: Page Objects and Beyond
Automation Abstractions: Page Objects and Beyond
TechWell
 
Android Test Pyramid - Ágiles 2013
Android Test Pyramid - Ágiles 2013Android Test Pyramid - Ágiles 2013
Android Test Pyramid - Ágiles 2013
Rafael Portela
 
Testing Vue Apps with Cypress.io (STLJS Meetup April 2018)
Testing Vue Apps with Cypress.io (STLJS Meetup April 2018)Testing Vue Apps with Cypress.io (STLJS Meetup April 2018)
Testing Vue Apps with Cypress.io (STLJS Meetup April 2018)
Christian Catalan
 
GeeCON 2012 hurdle run through ejb testing
GeeCON 2012 hurdle run through ejb testingGeeCON 2012 hurdle run through ejb testing
GeeCON 2012 hurdle run through ejb testingJakub Marchwicki
 
Getting Started with Rails on GlassFish (Hands-on Lab) - Spark IT 2010
Getting Started with Rails on GlassFish (Hands-on Lab) - Spark IT 2010Getting Started with Rails on GlassFish (Hands-on Lab) - Spark IT 2010
Getting Started with Rails on GlassFish (Hands-on Lab) - Spark IT 2010
Arun Gupta
 
Developers Testing - Girl Code at bloomon
Developers Testing - Girl Code at bloomonDevelopers Testing - Girl Code at bloomon
Developers Testing - Girl Code at bloomon
Ineke Scheffers
 
2014 11 20 Drupal 7 -> 8 test migratie
2014 11 20 Drupal 7 -> 8 test migratie2014 11 20 Drupal 7 -> 8 test migratie
2014 11 20 Drupal 7 -> 8 test migratie
hcderaad
 
Agile JavaScript Testing
Agile JavaScript TestingAgile JavaScript Testing
Agile JavaScript Testing
Scott Becker
 

Similar to Why you should switch to Cypress for modern web testing? (20)

Front-End Modernization for Mortals
Front-End Modernization for MortalsFront-End Modernization for Mortals
Front-End Modernization for Mortals
 
Front end-modernization
Front end-modernizationFront end-modernization
Front end-modernization
 
Front end-modernization
Front end-modernizationFront end-modernization
Front end-modernization
 
Test pyramid in an Android Agile Project - TDC2013
Test pyramid in an Android Agile Project - TDC2013Test pyramid in an Android Agile Project - TDC2013
Test pyramid in an Android Agile Project - TDC2013
 
Hands on Exploration of Page Objects and Abstraction Layers with Selenium Web...
Hands on Exploration of Page Objects and Abstraction Layers with Selenium Web...Hands on Exploration of Page Objects and Abstraction Layers with Selenium Web...
Hands on Exploration of Page Objects and Abstraction Layers with Selenium Web...
 
Js tacktalk team dev js testing performance
Js tacktalk team dev js testing performanceJs tacktalk team dev js testing performance
Js tacktalk team dev js testing performance
 
Hotfixing iOS apps with Javascript
Hotfixing iOS apps with JavascriptHotfixing iOS apps with Javascript
Hotfixing iOS apps with Javascript
 
Enterprise Strength Mobile JavaScript
Enterprise Strength Mobile JavaScriptEnterprise Strength Mobile JavaScript
Enterprise Strength Mobile JavaScript
 
CBDW2014 - MockBox, get ready to mock your socks off!
CBDW2014 - MockBox, get ready to mock your socks off!CBDW2014 - MockBox, get ready to mock your socks off!
CBDW2014 - MockBox, get ready to mock your socks off!
 
2019 StartIT - Boosting your performance with Blackfire
2019 StartIT - Boosting your performance with Blackfire2019 StartIT - Boosting your performance with Blackfire
2019 StartIT - Boosting your performance with Blackfire
 
Throwing complexity over the wall: Rapid development for enterprise Java (Jav...
Throwing complexity over the wall: Rapid development for enterprise Java (Jav...Throwing complexity over the wall: Rapid development for enterprise Java (Jav...
Throwing complexity over the wall: Rapid development for enterprise Java (Jav...
 
The Many Ways to Test Your React App
The Many Ways to Test Your React AppThe Many Ways to Test Your React App
The Many Ways to Test Your React App
 
Automation Abstractions: Page Objects and Beyond
Automation Abstractions: Page Objects and BeyondAutomation Abstractions: Page Objects and Beyond
Automation Abstractions: Page Objects and Beyond
 
Android Test Pyramid - Ágiles 2013
Android Test Pyramid - Ágiles 2013Android Test Pyramid - Ágiles 2013
Android Test Pyramid - Ágiles 2013
 
Testing Vue Apps with Cypress.io (STLJS Meetup April 2018)
Testing Vue Apps with Cypress.io (STLJS Meetup April 2018)Testing Vue Apps with Cypress.io (STLJS Meetup April 2018)
Testing Vue Apps with Cypress.io (STLJS Meetup April 2018)
 
GeeCON 2012 hurdle run through ejb testing
GeeCON 2012 hurdle run through ejb testingGeeCON 2012 hurdle run through ejb testing
GeeCON 2012 hurdle run through ejb testing
 
Getting Started with Rails on GlassFish (Hands-on Lab) - Spark IT 2010
Getting Started with Rails on GlassFish (Hands-on Lab) - Spark IT 2010Getting Started with Rails on GlassFish (Hands-on Lab) - Spark IT 2010
Getting Started with Rails on GlassFish (Hands-on Lab) - Spark IT 2010
 
Developers Testing - Girl Code at bloomon
Developers Testing - Girl Code at bloomonDevelopers Testing - Girl Code at bloomon
Developers Testing - Girl Code at bloomon
 
2014 11 20 Drupal 7 -> 8 test migratie
2014 11 20 Drupal 7 -> 8 test migratie2014 11 20 Drupal 7 -> 8 test migratie
2014 11 20 Drupal 7 -> 8 test migratie
 
Agile JavaScript Testing
Agile JavaScript TestingAgile JavaScript Testing
Agile JavaScript Testing
 

Recently uploaded

Cracking the code review at SpringIO 2024
Cracking the code review at SpringIO 2024Cracking the code review at SpringIO 2024
Cracking the code review at SpringIO 2024
Paco van Beckhoven
 
Using IESVE for Room Loads Analysis - Australia & New Zealand
Using IESVE for Room Loads Analysis - Australia & New ZealandUsing IESVE for Room Loads Analysis - Australia & New Zealand
Using IESVE for Room Loads Analysis - Australia & New Zealand
IES VE
 
Advanced Flow Concepts Every Developer Should Know
Advanced Flow Concepts Every Developer Should KnowAdvanced Flow Concepts Every Developer Should Know
Advanced Flow Concepts Every Developer Should Know
Peter Caitens
 
Understanding Globus Data Transfers with NetSage
Understanding Globus Data Transfers with NetSageUnderstanding Globus Data Transfers with NetSage
Understanding Globus Data Transfers with NetSage
Globus
 
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
Shahin Sheidaei
 
Large Language Models and the End of Programming
Large Language Models and the End of ProgrammingLarge Language Models and the End of Programming
Large Language Models and the End of Programming
Matt Welsh
 
How to Position Your Globus Data Portal for Success Ten Good Practices
How to Position Your Globus Data Portal for Success Ten Good PracticesHow to Position Your Globus Data Portal for Success Ten Good Practices
How to Position Your Globus Data Portal for Success Ten Good Practices
Globus
 
How Recreation Management Software Can Streamline Your Operations.pptx
How Recreation Management Software Can Streamline Your Operations.pptxHow Recreation Management Software Can Streamline Your Operations.pptx
How Recreation Management Software Can Streamline Your Operations.pptx
wottaspaceseo
 
Software Testing Exam imp Ques Notes.pdf
Software Testing Exam imp Ques Notes.pdfSoftware Testing Exam imp Ques Notes.pdf
Software Testing Exam imp Ques Notes.pdf
MayankTawar1
 
2024 RoOUG Security model for the cloud.pptx
2024 RoOUG Security model for the cloud.pptx2024 RoOUG Security model for the cloud.pptx
2024 RoOUG Security model for the cloud.pptx
Georgi Kodinov
 
Vitthal Shirke Microservices Resume Montevideo
Vitthal Shirke Microservices Resume MontevideoVitthal Shirke Microservices Resume Montevideo
Vitthal Shirke Microservices Resume Montevideo
Vitthal Shirke
 
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
Juraj Vysvader
 
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdfDominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
AMB-Review
 
Corporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMSCorporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMS
Tendenci - The Open Source AMS (Association Management Software)
 
Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...
Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...
Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...
Globus
 
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
Anthony Dahanne
 
Enhancing Research Orchestration Capabilities at ORNL.pdf
Enhancing Research Orchestration Capabilities at ORNL.pdfEnhancing Research Orchestration Capabilities at ORNL.pdf
Enhancing Research Orchestration Capabilities at ORNL.pdf
Globus
 
Globus Connect Server Deep Dive - GlobusWorld 2024
Globus Connect Server Deep Dive - GlobusWorld 2024Globus Connect Server Deep Dive - GlobusWorld 2024
Globus Connect Server Deep Dive - GlobusWorld 2024
Globus
 
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2
 
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...
Globus
 

Recently uploaded (20)

Cracking the code review at SpringIO 2024
Cracking the code review at SpringIO 2024Cracking the code review at SpringIO 2024
Cracking the code review at SpringIO 2024
 
Using IESVE for Room Loads Analysis - Australia & New Zealand
Using IESVE for Room Loads Analysis - Australia & New ZealandUsing IESVE for Room Loads Analysis - Australia & New Zealand
Using IESVE for Room Loads Analysis - Australia & New Zealand
 
Advanced Flow Concepts Every Developer Should Know
Advanced Flow Concepts Every Developer Should KnowAdvanced Flow Concepts Every Developer Should Know
Advanced Flow Concepts Every Developer Should Know
 
Understanding Globus Data Transfers with NetSage
Understanding Globus Data Transfers with NetSageUnderstanding Globus Data Transfers with NetSage
Understanding Globus Data Transfers with NetSage
 
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
 
Large Language Models and the End of Programming
Large Language Models and the End of ProgrammingLarge Language Models and the End of Programming
Large Language Models and the End of Programming
 
How to Position Your Globus Data Portal for Success Ten Good Practices
How to Position Your Globus Data Portal for Success Ten Good PracticesHow to Position Your Globus Data Portal for Success Ten Good Practices
How to Position Your Globus Data Portal for Success Ten Good Practices
 
How Recreation Management Software Can Streamline Your Operations.pptx
How Recreation Management Software Can Streamline Your Operations.pptxHow Recreation Management Software Can Streamline Your Operations.pptx
How Recreation Management Software Can Streamline Your Operations.pptx
 
Software Testing Exam imp Ques Notes.pdf
Software Testing Exam imp Ques Notes.pdfSoftware Testing Exam imp Ques Notes.pdf
Software Testing Exam imp Ques Notes.pdf
 
2024 RoOUG Security model for the cloud.pptx
2024 RoOUG Security model for the cloud.pptx2024 RoOUG Security model for the cloud.pptx
2024 RoOUG Security model for the cloud.pptx
 
Vitthal Shirke Microservices Resume Montevideo
Vitthal Shirke Microservices Resume MontevideoVitthal Shirke Microservices Resume Montevideo
Vitthal Shirke Microservices Resume Montevideo
 
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
 
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdfDominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
 
Corporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMSCorporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMS
 
Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...
Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...
Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...
 
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
 
Enhancing Research Orchestration Capabilities at ORNL.pdf
Enhancing Research Orchestration Capabilities at ORNL.pdfEnhancing Research Orchestration Capabilities at ORNL.pdf
Enhancing Research Orchestration Capabilities at ORNL.pdf
 
Globus Connect Server Deep Dive - GlobusWorld 2024
Globus Connect Server Deep Dive - GlobusWorld 2024Globus Connect Server Deep Dive - GlobusWorld 2024
Globus Connect Server Deep Dive - GlobusWorld 2024
 
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
 
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...
 

Why you should switch to Cypress for modern web testing?

  • 1. Cypress - JavaScript unit testing tool Testing the way it should be... - Shivam BharadwajJune 07, 2018
  • 2. Agenda ★ The Problem ★ Why Cypress? ★ Cypress Vs Selenium ★ Installing Cypress ★ Unit testing in Cypress ★ Live Demo ★ Stubbing and Mocking ★ Live Demo ★ Takeaways 2Shivam Bharadwaj
  • 3. The Problem Modern Web? (react/vue/p5) Another testing tool, Why? 3
  • 4. Why Cypress? ➔ JavaScript testing tool ➔ Free and open source ➔ Easy Control of response bodies, status and headers ➔ Fast, <20 ms response time ➔ Built on top of Mocha and Chai ➔ Ability to choose whether to stub responses or allow them to actually hit your server ➔ Active community on GitHub, Gitter and stackoverflow ➔ Rich documentation ➔ Auto Reload, act as real user ➔ Commands automatically retries assertions ➔ Helps you finding locator - Test your code, not your patience 4
  • 5. What sets Cypress apart? ★ Time travel ★ Real time reloads ★ Automatic waiting ★ Spies, stubs, and clocks ★ Network traffic control ★ Screenshots and videos ★ Runs directly in browser ★ Debugging (hover) ★ Helpful error messages ★ First visibility actions ★ Testing of responsive web apps 5
  • 7. Cypress Vs Selenium ➢ No configuration needed with Cypress ➢ Cypress only supports Chrome and Electron (FireFox support is on its way) ➢ Selenium WebDriver runs remotely outside the browser, Cypress is the exact opposite, it runs inside the browser ➢ Cypress only supports jQuery selectors (CSS selectors) ➢ Cypress is super fast than selenium and it records video as well ➢ Cypress is commercial company and, not sure they will keep their open source promise ➢ Running Cypress in Continuous Integration is the same as running it locally The web has evolved. Finally, testing has too 7
  • 8. npm init npm install cypress --save-dev Installing Cypress *You should have node.js installed 8
  • 9. 1 Inatalling Cypress List any research or data you have to support the need for a solution. 9
  • 10. Folder Structure Like maven projects in Java, Cypress also exhibits its own structure /cypress /fixtures - example.json /integration - example_spec.js /plugins - index.js /support - commands.js - index.js 10
  • 11. Writing and Running Test The test interface borrowed from Mocha provides describe(), context(), it() and specify(). context() is identical to describe() and specify() is identical to it() 11
  • 12. 12 I am being used by?
  • 15. Mocking = Imitation, Fake ● Mocking is creating objects that simulates the behaviour of real objects ● A dummy implementation of your object ● Sinon is famous JavaScript mocking library that provides mocks, stubs, and spies 15
  • 16. Stubbing = A Small Piece ● Stubbing means replacing a method, function or an entire object with a version that produces hard-coded responses ● Dummy objects that exhibits properties of real objects ● The stub implements just enough behaviour to allow the object under test to execute the test ● Real time examples - ○ James Bond ○ Module Dependency 16
  • 17. Stubbing with Cypress ❏ cy.fixture() ● Load a fixed set of data ❏ cy.server() ● Start a server to begin routing responses ❏ cy.route() ● manages the behavior of network requests cy.route('GET', /sessions/, '@sessionsJson'); 17
  • 18. 18
  • 21. Takeaways It provides very good features to enable you to create integration tests. Experienced with the problems related to Selenium we @Frontline decided to switch our tactics and use Cypress as our primary E2E tool. It works as expected and makes our lives a lot easier. I have used Cypress way too little to like it very much and think this is the tool we required. In any way do try Cypress. 21
  • 22. Questions? References ● https://www.cypress.io/ ● Demo Video Creating First Project ● https://gorrion.io/blog/getting- started-with-cypress-io/ @its_ShivamB Thank You!! 22Shivam Bharadwaj