SlideShare a Scribd company logo
1 of 17
Download to read offline
Component Testing
with Cypress
by Walmyr Filho
Who am I?
I'm a software craftsman, clean coder,
blogger, YouTuber, Cypress.io ambassador,
online teacher, mentor, speaker, an active
member of the testing automation and
JavaScript communities, and a fan of good
music, tattoos, and skateboarding.
Walmyr Filho
01
02
03
Agenda
Concepts. What's Cypress? What's
component testing? Does
component testing replaces end-to-
end testing?
Step-by-step for:
- Installation
- Configuration
- Writing component tests
- Running component tests
Hands-on:
- Exploring a real project
- Continuous integration, Percy.io
and on Cypress.io's Dashboard
04
Q&A, Testing complex components,
docs, and other references
Concepts
What's Cypress?
Cypress is a modern testing framework for
anything that runs in a web browser.
What's component testing?
Component testing is about testing frontend web
components in isolation.
Does component testing replaces
end-to-end testing?
Nope. They complement each other.
Step-by-step
Installation
npm install --save-dev cypress @cypress/react
@cypress/webpack-dev-server webpack-dev-server
Configuration
Configuration - part 2
Writing component tests
Running component tests
npx cypress run-ct (headless mode)
npx cypress open-ct (interactive mode)
Hands-on
Q&A
References
https://docs.cypress.io/guides/component-testing/introduction
https://docs.cypress.io/guides/component-testing/framework-configuration
https://github.com/wlsf82/hackernews
https://glebbahmutov.com/blog/my-vision-for-component-tests
https://github.com/cypress-io/cypress/tree/master/npm/react#examples
Thanks!
https://walmyr.dev

More Related Content

What's hot

What's hot (20)

e2e testing with cypress
e2e testing with cypresse2e testing with cypress
e2e testing with cypress
 
Cypress for Testing
Cypress for TestingCypress for Testing
Cypress for Testing
 
Why you should switch to Cypress for modern web testing?
Why you should switch to Cypress for modern web testing?Why you should switch to Cypress for modern web testing?
Why you should switch to Cypress for modern web testing?
 
Introduction to E2E in Cypress
Introduction to E2E in CypressIntroduction to E2E in Cypress
Introduction to E2E in 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 Integration Testing With Cypress
Introduction to Integration Testing With CypressIntroduction to Integration Testing With Cypress
Introduction to Integration Testing With Cypress
 
Getting Started With Cypress
Getting Started With CypressGetting Started With Cypress
Getting Started With Cypress
 
Cypress Testing.pptx
Cypress Testing.pptxCypress Testing.pptx
Cypress Testing.pptx
 
Strategies For Software Test Documentation
Strategies For Software Test Documentation Strategies For Software Test Documentation
Strategies For Software Test Documentation
 
Cypress first impressions
Cypress first impressionsCypress first impressions
Cypress first impressions
 
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 report
Cypress reportCypress report
Cypress report
 
Introduction to cypress in Angular (Chinese)
Introduction to cypress in Angular (Chinese)Introduction to cypress in Angular (Chinese)
Introduction to cypress in Angular (Chinese)
 
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 Best Pratices for Test Automation
Cypress Best Pratices for Test AutomationCypress Best Pratices for Test Automation
Cypress Best Pratices for Test Automation
 
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 E2E Testing
Cypress E2E TestingCypress E2E Testing
Cypress E2E Testing
 
Test and Behaviour Driven Development (TDD/BDD)
Test and Behaviour Driven Development (TDD/BDD)Test and Behaviour Driven Development (TDD/BDD)
Test and Behaviour Driven Development (TDD/BDD)
 
Jenkins presentation
Jenkins presentationJenkins presentation
Jenkins presentation
 
How to fit Performance Testing in Devops environment.pptx.pdf
How to fit Performance Testing in Devops environment.pptx.pdfHow to fit Performance Testing in Devops environment.pptx.pdf
How to fit Performance Testing in Devops environment.pptx.pdf
 

Similar to Component testing with cypress

Consistent Development Environment with Vagrant and Chef
Consistent Development Environment with Vagrant and ChefConsistent Development Environment with Vagrant and Chef
Consistent Development Environment with Vagrant and Chef
Gerald Villorente
 
Sai devops - the art of being specializing generalist
Sai   devops - the art of being specializing generalistSai   devops - the art of being specializing generalist
Sai devops - the art of being specializing generalist
Odd-e
 
Testing and DevOps Culture: Lessons Learned
Testing and DevOps Culture: Lessons LearnedTesting and DevOps Culture: Lessons Learned
Testing and DevOps Culture: Lessons Learned
LB Denker
 
Application lifecycle management in SharePoint
Application lifecycle management in SharePointApplication lifecycle management in SharePoint
Application lifecycle management in SharePoint
Jeremy Thake
 
Design patterns for efficient DevOps processes - Rebecca Fitzhugh - DevOpsDay...
Design patterns for efficient DevOps processes - Rebecca Fitzhugh - DevOpsDay...Design patterns for efficient DevOps processes - Rebecca Fitzhugh - DevOpsDay...
Design patterns for efficient DevOps processes - Rebecca Fitzhugh - DevOpsDay...
DevOpsDays Tel Aviv
 
Continuous Delivery (Internet-Briefing 2012-04-03)
Continuous Delivery (Internet-Briefing 2012-04-03)Continuous Delivery (Internet-Briefing 2012-04-03)
Continuous Delivery (Internet-Briefing 2012-04-03)
Netcetera
 

Similar to Component testing with cypress (20)

Introduction To Cypress | Differences Between Cypress & Selenium
Introduction To Cypress | Differences Between Cypress & SeleniumIntroduction To Cypress | Differences Between Cypress & Selenium
Introduction To Cypress | Differences Between Cypress & Selenium
 
10 practices that every developer needs to start right now
10 practices that every developer needs to start right now10 practices that every developer needs to start right now
10 practices that every developer needs to start right now
 
Consistent Development Environment with Vagrant and Chef
Consistent Development Environment with Vagrant and ChefConsistent Development Environment with Vagrant and Chef
Consistent Development Environment with Vagrant and Chef
 
Sai devops - the art of being specializing generalist
Sai   devops - the art of being specializing generalistSai   devops - the art of being specializing generalist
Sai devops - the art of being specializing generalist
 
Paris Web - Javascript as a programming language
Paris Web - Javascript as a programming languageParis Web - Javascript as a programming language
Paris Web - Javascript as a programming language
 
Continuous Load Testing with CloudTest and Jenkins
Continuous Load Testing with CloudTest and JenkinsContinuous Load Testing with CloudTest and Jenkins
Continuous Load Testing with CloudTest and Jenkins
 
Ember. it is time to try
Ember. it is time to tryEmber. it is time to try
Ember. it is time to try
 
Testing beyond the default click-paths
Testing beyond  the default click-pathsTesting beyond  the default click-paths
Testing beyond the default click-paths
 
Continuous Load Testing with CloudTest and Jenkins
Continuous Load Testing with CloudTest and JenkinsContinuous Load Testing with CloudTest and Jenkins
Continuous Load Testing with CloudTest and Jenkins
 
QA or the Highway 2022.pptx
QA or the Highway 2022.pptxQA or the Highway 2022.pptx
QA or the Highway 2022.pptx
 
Cypress Testing Demystified: A Practical Guide
Cypress Testing Demystified: A Practical GuideCypress Testing Demystified: A Practical Guide
Cypress Testing Demystified: A Practical Guide
 
Testing and DevOps Culture: Lessons Learned
Testing and DevOps Culture: Lessons LearnedTesting and DevOps Culture: Lessons Learned
Testing and DevOps Culture: Lessons Learned
 
AvenDATA and Devops
AvenDATA and DevopsAvenDATA and Devops
AvenDATA and Devops
 
Application lifecycle management in SharePoint
Application lifecycle management in SharePointApplication lifecycle management in SharePoint
Application lifecycle management in SharePoint
 
Using DevOps to Improve Software Quality in the Cloud
Using DevOps to Improve Software Quality in the CloudUsing DevOps to Improve Software Quality in the Cloud
Using DevOps to Improve Software Quality in the Cloud
 
How EVERFI Moved from No Automation to Continuous Test Generation in 9 Months
How EVERFI Moved from No Automation to Continuous Test Generation in 9 MonthsHow EVERFI Moved from No Automation to Continuous Test Generation in 9 Months
How EVERFI Moved from No Automation to Continuous Test Generation in 9 Months
 
Design patterns for efficient DevOps processes - Rebecca Fitzhugh - DevOpsDay...
Design patterns for efficient DevOps processes - Rebecca Fitzhugh - DevOpsDay...Design patterns for efficient DevOps processes - Rebecca Fitzhugh - DevOpsDay...
Design patterns for efficient DevOps processes - Rebecca Fitzhugh - DevOpsDay...
 
Continuous Delivery (Internet-Briefing 2012-04-03)
Continuous Delivery (Internet-Briefing 2012-04-03)Continuous Delivery (Internet-Briefing 2012-04-03)
Continuous Delivery (Internet-Briefing 2012-04-03)
 
Integration Testing on Steroids: Run Your Tests on the Real Things
Integration Testing on Steroids: Run Your Tests on the Real ThingsIntegration Testing on Steroids: Run Your Tests on the Real Things
Integration Testing on Steroids: Run Your Tests on the Real Things
 
Serverless and CI/CD
Serverless and CI/CDServerless and CI/CD
Serverless and CI/CD
 

More from Walmyr Lima e Silva Filho

More from Walmyr Lima e Silva Filho (18)

Testando na Gringa - Se preparando para uma entrevista técnica para uma vaga ...
Testando na Gringa - Se preparando para uma entrevista técnica para uma vaga ...Testando na Gringa - Se preparando para uma entrevista técnica para uma vaga ...
Testando na Gringa - Se preparando para uma entrevista técnica para uma vaga ...
 
Writing cypress tests without cucumber
Writing cypress tests without cucumberWriting cypress tests without cucumber
Writing cypress tests without cucumber
 
Como criar testes rápidos e robustos com Cypress
Como criar testes rápidos e robustos com CypressComo criar testes rápidos e robustos com Cypress
Como criar testes rápidos e robustos com Cypress
 
Esquenta QAX
Esquenta QAXEsquenta QAX
Esquenta QAX
 
Agile Testing - A quality culture in the company's core business
Agile Testing - A quality culture in the company's core businessAgile Testing - A quality culture in the company's core business
Agile Testing - A quality culture in the company's core business
 
How to kill software quality in five steps
How to kill software quality in five stepsHow to kill software quality in five steps
How to kill software quality in five steps
 
Lessons learned as a software engineer working at appear.in
Lessons learned as a software engineer working at appear.inLessons learned as a software engineer working at appear.in
Lessons learned as a software engineer working at appear.in
 
Oslo QA Meetup
Oslo QA MeetupOslo QA Meetup
Oslo QA Meetup
 
Estratégias para o uso de integração e entrega contínua com gocd
Estratégias para o uso de integração e entrega contínua com gocdEstratégias para o uso de integração e entrega contínua com gocd
Estratégias para o uso de integração e entrega contínua com gocd
 
Agile testing coach Agile Lean Ireland 2017
Agile testing coach   Agile Lean Ireland 2017Agile testing coach   Agile Lean Ireland 2017
Agile testing coach Agile Lean Ireland 2017
 
Protractor tests no processo de integração contínua
Protractor tests no processo de integração contínuaProtractor tests no processo de integração contínua
Protractor tests no processo de integração contínua
 
Workshop - E2e tests with protractor
Workshop - E2e tests with protractorWorkshop - E2e tests with protractor
Workshop - E2e tests with protractor
 
TDC 2016 Trilha Testes - Floripa
TDC 2016 Trilha Testes - FloripaTDC 2016 Trilha Testes - Floripa
TDC 2016 Trilha Testes - Floripa
 
Protractor style guide - Agile Testers Conference 2016
Protractor style guide - Agile Testers Conference 2016Protractor style guide - Agile Testers Conference 2016
Protractor style guide - Agile Testers Conference 2016
 
Primeiros passos com protractor - GUTS-SC
Primeiros passos com protractor - GUTS-SCPrimeiros passos com protractor - GUTS-SC
Primeiros passos com protractor - GUTS-SC
 
Protractor + visual review 2
Protractor + visual review 2Protractor + visual review 2
Protractor + visual review 2
 
Agile testing coach - Agile Trends Floripa
Agile testing coach - Agile Trends FloripaAgile testing coach - Agile Trends Floripa
Agile testing coach - Agile Trends Floripa
 
Palestra agile testing coaching
Palestra agile testing coaching Palestra agile testing coaching
Palestra agile testing coaching
 

Recently uploaded

Abortion Pills For Sale WhatsApp[[+27737758557]] In Birch Acres, Abortion Pil...
Abortion Pills For Sale WhatsApp[[+27737758557]] In Birch Acres, Abortion Pil...Abortion Pills For Sale WhatsApp[[+27737758557]] In Birch Acres, Abortion Pil...
Abortion Pills For Sale WhatsApp[[+27737758557]] In Birch Acres, Abortion Pil...
drm1699
 

Recently uploaded (20)

Evolving Data Governance for the Real-time Streaming and AI Era
Evolving Data Governance for the Real-time Streaming and AI EraEvolving Data Governance for the Real-time Streaming and AI Era
Evolving Data Governance for the Real-time Streaming and AI Era
 
GraphSummit Milan & Stockholm - Neo4j: The Art of the Possible with Graph
GraphSummit Milan & Stockholm - Neo4j: The Art of the Possible with GraphGraphSummit Milan & Stockholm - Neo4j: The Art of the Possible with Graph
GraphSummit Milan & Stockholm - Neo4j: The Art of the Possible with Graph
 
The Evolution of Web App Testing_ An Ultimate Guide to Future Trends.pdf
The Evolution of Web App Testing_ An Ultimate Guide to Future Trends.pdfThe Evolution of Web App Testing_ An Ultimate Guide to Future Trends.pdf
The Evolution of Web App Testing_ An Ultimate Guide to Future Trends.pdf
 
Weeding your micro service landscape.pdf
Weeding your micro service landscape.pdfWeeding your micro service landscape.pdf
Weeding your micro service landscape.pdf
 
Abortion Clinic In Polokwane ](+27832195400*)[ 🏥 Safe Abortion Pills in Polok...
Abortion Clinic In Polokwane ](+27832195400*)[ 🏥 Safe Abortion Pills in Polok...Abortion Clinic In Polokwane ](+27832195400*)[ 🏥 Safe Abortion Pills in Polok...
Abortion Clinic In Polokwane ](+27832195400*)[ 🏥 Safe Abortion Pills in Polok...
 
Abortion Pill Prices Jane Furse ](+27832195400*)[ 🏥 Women's Abortion Clinic i...
Abortion Pill Prices Jane Furse ](+27832195400*)[ 🏥 Women's Abortion Clinic i...Abortion Pill Prices Jane Furse ](+27832195400*)[ 🏥 Women's Abortion Clinic i...
Abortion Pill Prices Jane Furse ](+27832195400*)[ 🏥 Women's Abortion Clinic i...
 
Optimizing Operations by Aligning Resources with Strategic Objectives Using O...
Optimizing Operations by Aligning Resources with Strategic Objectives Using O...Optimizing Operations by Aligning Resources with Strategic Objectives Using O...
Optimizing Operations by Aligning Resources with Strategic Objectives Using O...
 
^Clinic ^%[+27788225528*Abortion Pills For Sale In soweto
^Clinic ^%[+27788225528*Abortion Pills For Sale In soweto^Clinic ^%[+27788225528*Abortion Pills For Sale In soweto
^Clinic ^%[+27788225528*Abortion Pills For Sale In soweto
 
Lessons Learned from Building a Serverless Notifications System.pdf
Lessons Learned from Building a Serverless Notifications System.pdfLessons Learned from Building a Serverless Notifications System.pdf
Lessons Learned from Building a Serverless Notifications System.pdf
 
Prompt Engineering - an Art, a Science, or your next Job Title?
Prompt Engineering - an Art, a Science, or your next Job Title?Prompt Engineering - an Art, a Science, or your next Job Title?
Prompt Engineering - an Art, a Science, or your next Job Title?
 
Food Delivery Business App Development Guide 2024
Food Delivery Business App Development Guide 2024Food Delivery Business App Development Guide 2024
Food Delivery Business App Development Guide 2024
 
Abortion Clinic In Johannesburg ](+27832195400*)[ 🏥 Safe Abortion Pills in Jo...
Abortion Clinic In Johannesburg ](+27832195400*)[ 🏥 Safe Abortion Pills in Jo...Abortion Clinic In Johannesburg ](+27832195400*)[ 🏥 Safe Abortion Pills in Jo...
Abortion Clinic In Johannesburg ](+27832195400*)[ 🏥 Safe Abortion Pills in Jo...
 
Abortion Pills For Sale WhatsApp[[+27737758557]] In Birch Acres, Abortion Pil...
Abortion Pills For Sale WhatsApp[[+27737758557]] In Birch Acres, Abortion Pil...Abortion Pills For Sale WhatsApp[[+27737758557]] In Birch Acres, Abortion Pil...
Abortion Pills For Sale WhatsApp[[+27737758557]] In Birch Acres, Abortion Pil...
 
Abortion Clinic In Pretoria ](+27832195400*)[ 🏥 Safe Abortion Pills in Pretor...
Abortion Clinic In Pretoria ](+27832195400*)[ 🏥 Safe Abortion Pills in Pretor...Abortion Clinic In Pretoria ](+27832195400*)[ 🏥 Safe Abortion Pills in Pretor...
Abortion Clinic In Pretoria ](+27832195400*)[ 🏥 Safe Abortion Pills in Pretor...
 
GraphSummit Milan - Visione e roadmap del prodotto Neo4j
GraphSummit Milan - Visione e roadmap del prodotto Neo4jGraphSummit Milan - Visione e roadmap del prodotto Neo4j
GraphSummit Milan - Visione e roadmap del prodotto Neo4j
 
Workshop: Enabling GenAI Breakthroughs with Knowledge Graphs - GraphSummit Milan
Workshop: Enabling GenAI Breakthroughs with Knowledge Graphs - GraphSummit MilanWorkshop: Enabling GenAI Breakthroughs with Knowledge Graphs - GraphSummit Milan
Workshop: Enabling GenAI Breakthroughs with Knowledge Graphs - GraphSummit Milan
 
[GeeCON2024] How I learned to stop worrying and love the dark silicon apocalypse
[GeeCON2024] How I learned to stop worrying and love the dark silicon apocalypse[GeeCON2024] How I learned to stop worrying and love the dark silicon apocalypse
[GeeCON2024] How I learned to stop worrying and love the dark silicon apocalypse
 
The mythical technical debt. (Brooke, please, forgive me)
The mythical technical debt. (Brooke, please, forgive me)The mythical technical debt. (Brooke, please, forgive me)
The mythical technical debt. (Brooke, please, forgive me)
 
The Strategic Impact of Buying vs Building in Test Automation
The Strategic Impact of Buying vs Building in Test AutomationThe Strategic Impact of Buying vs Building in Test Automation
The Strategic Impact of Buying vs Building in Test Automation
 
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
 

Component testing with cypress