SlideShare une entreprise Scribd logo
1  sur  52
Télécharger pour lire hors ligne
1
TOPIC
Building reliable
web applications
using Cypress
@mauricedb
Who am I?
@mauricedb
@mauricedb
@mauricedebeijer
Maurice de Beijer
@cloudgen_verona
#CodeGen2021
4
Agenda
• What is Cypress and why should you care?
• End 2 end versus unit testing
• Getting started with Cypress
• Accessible queries using Cypress Testing Library
• Cypress and AJAX requests
• Using visual regression testing
• Cypress testing and a CI server
• Dealing with flaky Tests
5
What is Cypress and why should you care?
6
Cypress.io
• Cypress is a front end testing tool
• Built for the modern web
• Tests are easy to write
• Using simple JavaScript
• Time Travel runner lets you inspect test at each step
• Click on a step to see the state of the browser
• Automatic waiting for elements
• Makes tests more resilient
• Video recording of running test
• Helps debugging failing tests on the CI server
7
8
Cypress.io
• Lets you fake the network
• Or use the real backend as appropriate
• Automatically retry
• Run flaky tests multiple times
• Many standard and 3rd party extensions
• Or write your own in JavaScript
• Can run in Docker containers
• Consistent cross platform behavior
• Runs inside the browser
• Not based on Selenium
9
Running Cypress tests
10
End to End versus Unit testing
11
The traditional testing pyramid
Manual
End to End
Integration testing
Unit testing
12
Both windows are fine
Source
13
A sturdy latch
Source
14
A better testing pyramid for the web
Manual
End to End
Integration testing
Unit testing
15
Getting started with Cypress
16
Getting started with
Cypress
Install Cypress
• Using `npm install cypress –save-dev`
Start Cypress
• Using `npx cypress open`
No drivers or servers required
17
Basic Cypress tests
Building reliable web applications using Cypress
19
Cypress Testing Library
20
Accessible queries using Cypress Testing Library
The more your tests resemble the way your software
is used, the more confidence they can give you.
(Kent C. Dobbs)
• Test the application like a user would use it
• Avoid implementation details in your tests
• Adds commands to select elements based on:
• Aria roles & labels of elements
• Labels associated with input elements
• Placeholder text
• ARIA = Accessible Rich Internet Applications
21
Find a table cell using it’s ARIA role
22
Finding an input element by using it’s label
23
Building reliable web applications using Cypress
25
Improve tests with ARIA attributes
• Some elements don’t have a useful label
• For example a movie row
• Add an `aria-label` to query it as needed
• Often better then a selector class, id or data-testid
26
Adding an ARIA label
27
Searching for the ARIA label
Building reliable web applications using Cypress
29
Cypress and AJAX requests
30
Cypress and AJAX requests
• By default the application will run as normal
• The real backend services will be called
• Using `cy.intercept()` you can change that
• Either call the API and use the same result in your test
• Or intercept and mock the whole request
31
Both have pros & cons
Real AJAX requests
Slower responses
Harder to control data
Often requires a DB reset
Often not an option with
external API’s
Tests the real application
Mock AJAX requests
Faster responses
Easy control over data
Doesn’t test the
backend services
Building reliable web applications using Cypress
33
Visual Regression Testing
34
Using Visual Regression Testing
Visual regression testing ensures the UI is unchanged
• Testing by selecting/manipulating elements proves the
application works
• But not that a user can actually use it
• You might have a white button on a white background
• The button is there and works
• But the user can’t see it
35
Visual Regression Testing
Pros
• Checks that the
appearance is
unchanged
• Complete check even for
elements you don’t think
about
• Validate elements like
the browsers canvas
Cons
• Hard to do if you don’t
control the data
• Difficult cross platform
because of small
rendering differences (CI)
Building reliable web applications using Cypress
37
Faking standard functions
• Stubs allow you to modify functions
• Including standard JavaScript functions
• Using the cy.stub()
• Control how time passes
• For setInterval(), setTimeout, Date.now() or new Date()
• Using the cy.clock()
38
Faking Math.random()
Building reliable web applications using Cypress
40
Continuous Integration
41
Cypress testing and a CI server
• Execute the `cypress run` command
• GitHub actions make testing the application easy
• Use cypress-io/github-action@2
• For CI servers that are not directly supported
• Use the start-server-and-test NPM package
42
GitHub Action to run Cypress tests
43
Visual Regression Testing and the CI Server
• The best way is to use a Docker container
• Standard container images like cypress/included:6.3.0
• Works cross platform and on the CI server
• Tip: Add --env failOnSnapshotDiff=false to cypress open
• Avoids a local run from failing on snapshot differences
44
GitHub Action for Visual Regression Testing
Building reliable web applications using Cypress
46
Flaky Tests
47
Flaky Tests
• Sometimes tests are not as reliable as you would like
• The same test fails occasionally
• Automatic retries will help pass the test
• Retry a failing test one or more times
• Often a sign that there is an issue
• Can be the test or the application
48
Enable retries
49
Cypress Dashboard - Runs
50
Cypress Dashboard - Flaky Tests
51
Conclusion
• Cypress is a great tool for End to End testing
• More reliable then relying on unit testing and manual testing
• Great infrastructure
• Useful dashboard to record runs
• Many plugins and extensions
• Write tests that use the application as users would
• Cypress Testing Library helps a lot
• Use visual regression tests where appropriate
• But don’t forget to test the application behavior
Thank you
Any questions?
@mauricedb @mauricedb @mauricedebeijer

Contenu connexe

Tendances

ASP.NET MVC 5 and SignalR 2
ASP.NET MVC 5 and SignalR 2ASP.NET MVC 5 and SignalR 2
ASP.NET MVC 5 and SignalR 2Jaliya Udagedara
 
Validating latest changes with XCI
Validating latest changes with XCIValidating latest changes with XCI
Validating latest changes with XCIVictor Morales
 
Continous integration and delivery for single page applications
Continous integration and delivery for single page applicationsContinous integration and delivery for single page applications
Continous integration and delivery for single page applicationsSunil Dalal
 
Make It Cooler: Using Decentralized Version Control
Make It Cooler: Using Decentralized Version ControlMake It Cooler: Using Decentralized Version Control
Make It Cooler: Using Decentralized Version Controlindiver
 
JIRA Performance Testing in Pictures - Edward Bukoski Michael March
JIRA Performance Testing in Pictures - Edward Bukoski Michael MarchJIRA Performance Testing in Pictures - Edward Bukoski Michael March
JIRA Performance Testing in Pictures - Edward Bukoski Michael MarchAtlassian
 
How to practice TDD without shooting yourself in the foot
How to practice TDD without shooting yourself in the footHow to practice TDD without shooting yourself in the foot
How to practice TDD without shooting yourself in the footDennis Doomen
 
How to contribute to an open source project and don’t die during the Code Rev...
How to contribute to an open source project and don’t die during the Code Rev...How to contribute to an open source project and don’t die during the Code Rev...
How to contribute to an open source project and don’t die during the Code Rev...Victor Morales
 
Software design with Domain-driven design
Software design with Domain-driven design Software design with Domain-driven design
Software design with Domain-driven design Allan Mangune
 
From the Trenches: Effectively Scaling Your Cloud Infrastructure and Optimizi...
From the Trenches: Effectively Scaling Your Cloud Infrastructure and Optimizi...From the Trenches: Effectively Scaling Your Cloud Infrastructure and Optimizi...
From the Trenches: Effectively Scaling Your Cloud Infrastructure and Optimizi...Allan Mangune
 
Continuous Integration on AWS
Continuous Integration on AWSContinuous Integration on AWS
Continuous Integration on AWSPetar Petrov
 
Serverless meetup - OpenWhisk overview and architecture
Serverless meetup - OpenWhisk overview and architectureServerless meetup - OpenWhisk overview and architecture
Serverless meetup - OpenWhisk overview and architectureSandeep Paliwal
 
#ESPC18 How to do #devops with the #SharePoint Framework and why it matters?
#ESPC18 How to do #devops with the #SharePoint Framework and why it matters?#ESPC18 How to do #devops with the #SharePoint Framework and why it matters?
#ESPC18 How to do #devops with the #SharePoint Framework and why it matters?Vincent Biret
 
Celery
CeleryCelery
CeleryYipit
 
Microsoft ASP.NET 5 - The new kid on the block
Microsoft ASP.NET 5 - The new kid on the block Microsoft ASP.NET 5 - The new kid on the block
Microsoft ASP.NET 5 - The new kid on the block Christos Matskas
 
Efficient HTTP applications on the JVM with Ratpack - Voxxed Days Berlin 2016
Efficient HTTP applications on the JVM with Ratpack - Voxxed Days Berlin 2016Efficient HTTP applications on the JVM with Ratpack - Voxxed Days Berlin 2016
Efficient HTTP applications on the JVM with Ratpack - Voxxed Days Berlin 2016Alvaro Sanchez-Mariscal
 
CI/CD and Asset Serving for Single Page Apps
CI/CD and Asset Serving for Single Page AppsCI/CD and Asset Serving for Single Page Apps
CI/CD and Asset Serving for Single Page AppsMike North
 
IaC? VSTS to the rescue! Abbreviations explained
IaC? VSTS to the rescue! Abbreviations explainedIaC? VSTS to the rescue! Abbreviations explained
IaC? VSTS to the rescue! Abbreviations explainedJeroen Niesen
 
How to Build Single Page HTML5 Apps that Scale
How to Build Single Page HTML5 Apps that ScaleHow to Build Single Page HTML5 Apps that Scale
How to Build Single Page HTML5 Apps that ScalePhil Leggetter
 

Tendances (20)

ASP.NET MVC 5 and SignalR 2
ASP.NET MVC 5 and SignalR 2ASP.NET MVC 5 and SignalR 2
ASP.NET MVC 5 and SignalR 2
 
Validating latest changes with XCI
Validating latest changes with XCIValidating latest changes with XCI
Validating latest changes with XCI
 
Continous integration and delivery for single page applications
Continous integration and delivery for single page applicationsContinous integration and delivery for single page applications
Continous integration and delivery for single page applications
 
Make It Cooler: Using Decentralized Version Control
Make It Cooler: Using Decentralized Version ControlMake It Cooler: Using Decentralized Version Control
Make It Cooler: Using Decentralized Version Control
 
JIRA Performance Testing in Pictures - Edward Bukoski Michael March
JIRA Performance Testing in Pictures - Edward Bukoski Michael MarchJIRA Performance Testing in Pictures - Edward Bukoski Michael March
JIRA Performance Testing in Pictures - Edward Bukoski Michael March
 
How to practice TDD without shooting yourself in the foot
How to practice TDD without shooting yourself in the footHow to practice TDD without shooting yourself in the foot
How to practice TDD without shooting yourself in the foot
 
How to contribute to an open source project and don’t die during the Code Rev...
How to contribute to an open source project and don’t die during the Code Rev...How to contribute to an open source project and don’t die during the Code Rev...
How to contribute to an open source project and don’t die during the Code Rev...
 
Software design with Domain-driven design
Software design with Domain-driven design Software design with Domain-driven design
Software design with Domain-driven design
 
From the Trenches: Effectively Scaling Your Cloud Infrastructure and Optimizi...
From the Trenches: Effectively Scaling Your Cloud Infrastructure and Optimizi...From the Trenches: Effectively Scaling Your Cloud Infrastructure and Optimizi...
From the Trenches: Effectively Scaling Your Cloud Infrastructure and Optimizi...
 
Continuous Integration on AWS
Continuous Integration on AWSContinuous Integration on AWS
Continuous Integration on AWS
 
Serverless meetup - OpenWhisk overview and architecture
Serverless meetup - OpenWhisk overview and architectureServerless meetup - OpenWhisk overview and architecture
Serverless meetup - OpenWhisk overview and architecture
 
#ESPC18 How to do #devops with the #SharePoint Framework and why it matters?
#ESPC18 How to do #devops with the #SharePoint Framework and why it matters?#ESPC18 How to do #devops with the #SharePoint Framework and why it matters?
#ESPC18 How to do #devops with the #SharePoint Framework and why it matters?
 
Celery
CeleryCelery
Celery
 
Spring insight what just happened
Spring insight   what just happenedSpring insight   what just happened
Spring insight what just happened
 
ASP.NET Core Unit Testing
ASP.NET Core Unit TestingASP.NET Core Unit Testing
ASP.NET Core Unit Testing
 
Microsoft ASP.NET 5 - The new kid on the block
Microsoft ASP.NET 5 - The new kid on the block Microsoft ASP.NET 5 - The new kid on the block
Microsoft ASP.NET 5 - The new kid on the block
 
Efficient HTTP applications on the JVM with Ratpack - Voxxed Days Berlin 2016
Efficient HTTP applications on the JVM with Ratpack - Voxxed Days Berlin 2016Efficient HTTP applications on the JVM with Ratpack - Voxxed Days Berlin 2016
Efficient HTTP applications on the JVM with Ratpack - Voxxed Days Berlin 2016
 
CI/CD and Asset Serving for Single Page Apps
CI/CD and Asset Serving for Single Page AppsCI/CD and Asset Serving for Single Page Apps
CI/CD and Asset Serving for Single Page Apps
 
IaC? VSTS to the rescue! Abbreviations explained
IaC? VSTS to the rescue! Abbreviations explainedIaC? VSTS to the rescue! Abbreviations explained
IaC? VSTS to the rescue! Abbreviations explained
 
How to Build Single Page HTML5 Apps that Scale
How to Build Single Page HTML5 Apps that ScaleHow to Build Single Page HTML5 Apps that Scale
How to Build Single Page HTML5 Apps that Scale
 

Similaire à Building reliable web applications using Cypress

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
 
MyHeritage - End 2 End testing Infra
MyHeritage - End 2 End testing InfraMyHeritage - End 2 End testing Infra
MyHeritage - End 2 End testing InfraMatanGoren
 
Behat bdd training (php) course slides pdf
Behat bdd training (php) course slides pdfBehat bdd training (php) course slides pdf
Behat bdd training (php) course slides pdfseleniumbootcamp
 
MyHeritage - QA Automations in a Continuous Deployment environment
MyHeritage -  QA Automations in a Continuous Deployment environmentMyHeritage -  QA Automations in a Continuous Deployment environment
MyHeritage - QA Automations in a Continuous Deployment environmentMatanGoren
 
Infinum Android Talks #13 - Developing Android Apps Like Navy Seals by Ivan Kušt
Infinum Android Talks #13 - Developing Android Apps Like Navy Seals by Ivan KuštInfinum Android Talks #13 - Developing Android Apps Like Navy Seals by Ivan Kušt
Infinum Android Talks #13 - Developing Android Apps Like Navy Seals by Ivan KuštInfinum
 
BYOP: Custom Processor Development with Apache NiFi
BYOP: Custom Processor Development with Apache NiFiBYOP: Custom Processor Development with Apache NiFi
BYOP: Custom Processor Development with Apache NiFiDataWorks Summit
 
Operating a High Velocity Large Organization with Spring Cloud Microservices
Operating a High Velocity Large Organization with Spring Cloud MicroservicesOperating a High Velocity Large Organization with Spring Cloud Microservices
Operating a High Velocity Large Organization with Spring Cloud MicroservicesNoriaki Tatsumi
 
8 cloud design patterns you ought to know - Update Conference 2018
8 cloud design patterns you ought to know - Update Conference 20188 cloud design patterns you ought to know - Update Conference 2018
8 cloud design patterns you ought to know - Update Conference 2018Taswar Bhatti
 
From Zero to Serverless
From Zero to ServerlessFrom Zero to Serverless
From Zero to ServerlessChad Green
 
Test-Driven-Development for Networking: Making CI Work for You by Colin McNam...
Test-Driven-Development for Networking: Making CI Work for You by Colin McNam...Test-Driven-Development for Networking: Making CI Work for You by Colin McNam...
Test-Driven-Development for Networking: Making CI Work for You by Colin McNam...DevOps4Networks
 
Threat Modeling the CI/CD Pipeline to Improve Software Supply Chain Security ...
Threat Modeling the CI/CD Pipeline to Improve Software Supply Chain Security ...Threat Modeling the CI/CD Pipeline to Improve Software Supply Chain Security ...
Threat Modeling the CI/CD Pipeline to Improve Software Supply Chain Security ...Denim Group
 
Introduction to Protractor
Introduction to ProtractorIntroduction to Protractor
Introduction to ProtractorFlorian Fesseler
 
Hacker Proof web app using Functional tests
Hacker Proof web  app using Functional testsHacker Proof web  app using Functional tests
Hacker Proof web app using Functional testsAnkita Gupta
 
Automated Acceptance Testing from Scratch
Automated Acceptance Testing from ScratchAutomated Acceptance Testing from Scratch
Automated Acceptance Testing from ScratchExcella
 
Scribe online 03 scribe online cdk and api overview
Scribe online 03   scribe online cdk and api overviewScribe online 03   scribe online cdk and api overview
Scribe online 03 scribe online cdk and api overviewScribe Software Corp.
 
Continuous Deployment To The Cloud @DevoxxPL 2017
Continuous Deployment To The Cloud @DevoxxPL 2017 Continuous Deployment To The Cloud @DevoxxPL 2017
Continuous Deployment To The Cloud @DevoxxPL 2017 Marcin Grzejszczak
 
Cloud Design Patterns - Hong Kong Codeaholics
Cloud Design Patterns - Hong Kong CodeaholicsCloud Design Patterns - Hong Kong Codeaholics
Cloud Design Patterns - Hong Kong CodeaholicsTaswar Bhatti
 
Sencha Roadshow 2017: What's New in Sencha Test
Sencha Roadshow 2017: What's New in Sencha TestSencha Roadshow 2017: What's New in Sencha Test
Sencha Roadshow 2017: What's New in Sencha TestSencha
 
Continuous Delivery: How RightScale Releases Weekly
Continuous Delivery: How RightScale Releases WeeklyContinuous Delivery: How RightScale Releases Weekly
Continuous Delivery: How RightScale Releases WeeklyRightScale
 

Similaire à Building reliable web applications using Cypress (20)

Introduction to cypress in Angular (Chinese)
Introduction to cypress in Angular (Chinese)Introduction to cypress in Angular (Chinese)
Introduction to cypress in Angular (Chinese)
 
MyHeritage - End 2 End testing Infra
MyHeritage - End 2 End testing InfraMyHeritage - End 2 End testing Infra
MyHeritage - End 2 End testing Infra
 
Behat bdd training (php) course slides pdf
Behat bdd training (php) course slides pdfBehat bdd training (php) course slides pdf
Behat bdd training (php) course slides pdf
 
MyHeritage - QA Automations in a Continuous Deployment environment
MyHeritage -  QA Automations in a Continuous Deployment environmentMyHeritage -  QA Automations in a Continuous Deployment environment
MyHeritage - QA Automations in a Continuous Deployment environment
 
Infinum Android Talks #13 - Developing Android Apps Like Navy Seals by Ivan Kušt
Infinum Android Talks #13 - Developing Android Apps Like Navy Seals by Ivan KuštInfinum Android Talks #13 - Developing Android Apps Like Navy Seals by Ivan Kušt
Infinum Android Talks #13 - Developing Android Apps Like Navy Seals by Ivan Kušt
 
BYOP: Custom Processor Development with Apache NiFi
BYOP: Custom Processor Development with Apache NiFiBYOP: Custom Processor Development with Apache NiFi
BYOP: Custom Processor Development with Apache NiFi
 
Operating a High Velocity Large Organization with Spring Cloud Microservices
Operating a High Velocity Large Organization with Spring Cloud MicroservicesOperating a High Velocity Large Organization with Spring Cloud Microservices
Operating a High Velocity Large Organization with Spring Cloud Microservices
 
8 cloud design patterns you ought to know - Update Conference 2018
8 cloud design patterns you ought to know - Update Conference 20188 cloud design patterns you ought to know - Update Conference 2018
8 cloud design patterns you ought to know - Update Conference 2018
 
From Zero to Serverless
From Zero to ServerlessFrom Zero to Serverless
From Zero to Serverless
 
Test-Driven-Development for Networking: Making CI Work for You by Colin McNam...
Test-Driven-Development for Networking: Making CI Work for You by Colin McNam...Test-Driven-Development for Networking: Making CI Work for You by Colin McNam...
Test-Driven-Development for Networking: Making CI Work for You by Colin McNam...
 
Threat Modeling the CI/CD Pipeline to Improve Software Supply Chain Security ...
Threat Modeling the CI/CD Pipeline to Improve Software Supply Chain Security ...Threat Modeling the CI/CD Pipeline to Improve Software Supply Chain Security ...
Threat Modeling the CI/CD Pipeline to Improve Software Supply Chain Security ...
 
Introduction to Protractor
Introduction to ProtractorIntroduction to Protractor
Introduction to Protractor
 
Hacker Proof web app using Functional tests
Hacker Proof web  app using Functional testsHacker Proof web  app using Functional tests
Hacker Proof web app using Functional tests
 
Automated Acceptance Testing from Scratch
Automated Acceptance Testing from ScratchAutomated Acceptance Testing from Scratch
Automated Acceptance Testing from Scratch
 
Scribe online 03 scribe online cdk and api overview
Scribe online 03   scribe online cdk and api overviewScribe online 03   scribe online cdk and api overview
Scribe online 03 scribe online cdk and api overview
 
Continuous Deployment To The Cloud @DevoxxPL 2017
Continuous Deployment To The Cloud @DevoxxPL 2017 Continuous Deployment To The Cloud @DevoxxPL 2017
Continuous Deployment To The Cloud @DevoxxPL 2017
 
Cloud Design Patterns - Hong Kong Codeaholics
Cloud Design Patterns - Hong Kong CodeaholicsCloud Design Patterns - Hong Kong Codeaholics
Cloud Design Patterns - Hong Kong Codeaholics
 
Power of Azure Devops
Power of Azure DevopsPower of Azure Devops
Power of Azure Devops
 
Sencha Roadshow 2017: What's New in Sencha Test
Sencha Roadshow 2017: What's New in Sencha TestSencha Roadshow 2017: What's New in Sencha Test
Sencha Roadshow 2017: What's New in Sencha Test
 
Continuous Delivery: How RightScale Releases Weekly
Continuous Delivery: How RightScale Releases WeeklyContinuous Delivery: How RightScale Releases Weekly
Continuous Delivery: How RightScale Releases Weekly
 

Plus de Maurice De Beijer [MVP]

Practice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components AppPractice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components AppMaurice De Beijer [MVP]
 
A foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software ProjectA foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software ProjectMaurice De Beijer [MVP]
 
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using CypressSurati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using CypressMaurice De Beijer [MVP]
 
Build reliable Svelte applications using Cypress
Build reliable Svelte applications using CypressBuild reliable Svelte applications using Cypress
Build reliable Svelte applications using CypressMaurice De Beijer [MVP]
 
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureBuilding Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureMaurice De Beijer [MVP]
 
Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18Maurice De Beijer [MVP]
 
Building reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and AzureBuilding reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and AzureMaurice De Beijer [MVP]
 
Building large and scalable mission critical applications with React
Building large and scalable mission critical applications with ReactBuilding large and scalable mission critical applications with React
Building large and scalable mission critical applications with ReactMaurice De Beijer [MVP]
 
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureBuilding Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureMaurice De Beijer [MVP]
 
Getting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent renderingGetting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent renderingMaurice De Beijer [MVP]
 
React suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred HitchcockReact suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred HitchcockMaurice De Beijer [MVP]
 
From zero to hero with the Reactive extensions for JavaScript
From zero to hero with the Reactive extensions for JavaScriptFrom zero to hero with the Reactive extensions for JavaScript
From zero to hero with the Reactive extensions for JavaScriptMaurice De Beijer [MVP]
 
From zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScriptFrom zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScriptMaurice De Beijer [MVP]
 
Create flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apisCreate flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apisMaurice De Beijer [MVP]
 
Create flexible react applications using GraphQL API's
Create flexible react applications using GraphQL API'sCreate flexible react applications using GraphQL API's
Create flexible react applications using GraphQL API'sMaurice De Beijer [MVP]
 

Plus de Maurice De Beijer [MVP] (20)

Practice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components AppPractice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components App
 
A foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software ProjectA foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software Project
 
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using CypressSurati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
 
Build reliable Svelte applications using Cypress
Build reliable Svelte applications using CypressBuild reliable Svelte applications using Cypress
Build reliable Svelte applications using Cypress
 
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureBuilding Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
 
Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18
 
Building reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and AzureBuilding reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and Azure
 
Building large and scalable mission critical applications with React
Building large and scalable mission critical applications with ReactBuilding large and scalable mission critical applications with React
Building large and scalable mission critical applications with React
 
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureBuilding Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
 
Getting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent renderingGetting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent rendering
 
React suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred HitchcockReact suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred Hitchcock
 
From zero to hero with the Reactive extensions for JavaScript
From zero to hero with the Reactive extensions for JavaScriptFrom zero to hero with the Reactive extensions for JavaScript
From zero to hero with the Reactive extensions for JavaScript
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
 
The new React
The new React The new React
The new React
 
From zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScriptFrom zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScript
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
 
I am hooked on React
I am hooked on ReactI am hooked on React
I am hooked on React
 
Create flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apisCreate flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apis
 
Create flexible react applications using GraphQL API's
Create flexible react applications using GraphQL API'sCreate flexible react applications using GraphQL API's
Create flexible react applications using GraphQL API's
 

Dernier

AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 

Dernier (20)

AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 

Building reliable web applications using Cypress

  • 4. 4 Agenda • What is Cypress and why should you care? • End 2 end versus unit testing • Getting started with Cypress • Accessible queries using Cypress Testing Library • Cypress and AJAX requests • Using visual regression testing • Cypress testing and a CI server • Dealing with flaky Tests
  • 5. 5 What is Cypress and why should you care?
  • 6. 6 Cypress.io • Cypress is a front end testing tool • Built for the modern web • Tests are easy to write • Using simple JavaScript • Time Travel runner lets you inspect test at each step • Click on a step to see the state of the browser • Automatic waiting for elements • Makes tests more resilient • Video recording of running test • Helps debugging failing tests on the CI server
  • 7. 7
  • 8. 8 Cypress.io • Lets you fake the network • Or use the real backend as appropriate • Automatically retry • Run flaky tests multiple times • Many standard and 3rd party extensions • Or write your own in JavaScript • Can run in Docker containers • Consistent cross platform behavior • Runs inside the browser • Not based on Selenium
  • 10. 10 End to End versus Unit testing
  • 11. 11 The traditional testing pyramid Manual End to End Integration testing Unit testing
  • 12. 12 Both windows are fine Source
  • 14. 14 A better testing pyramid for the web Manual End to End Integration testing Unit testing
  • 16. 16 Getting started with Cypress Install Cypress • Using `npm install cypress –save-dev` Start Cypress • Using `npx cypress open` No drivers or servers required
  • 20. 20 Accessible queries using Cypress Testing Library The more your tests resemble the way your software is used, the more confidence they can give you. (Kent C. Dobbs) • Test the application like a user would use it • Avoid implementation details in your tests • Adds commands to select elements based on: • Aria roles & labels of elements • Labels associated with input elements • Placeholder text • ARIA = Accessible Rich Internet Applications
  • 21. 21 Find a table cell using it’s ARIA role
  • 22. 22 Finding an input element by using it’s label
  • 23. 23
  • 25. 25 Improve tests with ARIA attributes • Some elements don’t have a useful label • For example a movie row • Add an `aria-label` to query it as needed • Often better then a selector class, id or data-testid
  • 27. 27 Searching for the ARIA label
  • 30. 30 Cypress and AJAX requests • By default the application will run as normal • The real backend services will be called • Using `cy.intercept()` you can change that • Either call the API and use the same result in your test • Or intercept and mock the whole request
  • 31. 31 Both have pros & cons Real AJAX requests Slower responses Harder to control data Often requires a DB reset Often not an option with external API’s Tests the real application Mock AJAX requests Faster responses Easy control over data Doesn’t test the backend services
  • 34. 34 Using Visual Regression Testing Visual regression testing ensures the UI is unchanged • Testing by selecting/manipulating elements proves the application works • But not that a user can actually use it • You might have a white button on a white background • The button is there and works • But the user can’t see it
  • 35. 35 Visual Regression Testing Pros • Checks that the appearance is unchanged • Complete check even for elements you don’t think about • Validate elements like the browsers canvas Cons • Hard to do if you don’t control the data • Difficult cross platform because of small rendering differences (CI)
  • 37. 37 Faking standard functions • Stubs allow you to modify functions • Including standard JavaScript functions • Using the cy.stub() • Control how time passes • For setInterval(), setTimeout, Date.now() or new Date() • Using the cy.clock()
  • 41. 41 Cypress testing and a CI server • Execute the `cypress run` command • GitHub actions make testing the application easy • Use cypress-io/github-action@2 • For CI servers that are not directly supported • Use the start-server-and-test NPM package
  • 42. 42 GitHub Action to run Cypress tests
  • 43. 43 Visual Regression Testing and the CI Server • The best way is to use a Docker container • Standard container images like cypress/included:6.3.0 • Works cross platform and on the CI server • Tip: Add --env failOnSnapshotDiff=false to cypress open • Avoids a local run from failing on snapshot differences
  • 44. 44 GitHub Action for Visual Regression Testing
  • 47. 47 Flaky Tests • Sometimes tests are not as reliable as you would like • The same test fails occasionally • Automatic retries will help pass the test • Retry a failing test one or more times • Often a sign that there is an issue • Can be the test or the application
  • 50. 50 Cypress Dashboard - Flaky Tests
  • 51. 51 Conclusion • Cypress is a great tool for End to End testing • More reliable then relying on unit testing and manual testing • Great infrastructure • Useful dashboard to record runs • Many plugins and extensions • Write tests that use the application as users would • Cypress Testing Library helps a lot • Use visual regression tests where appropriate • But don’t forget to test the application behavior
  • 52. Thank you Any questions? @mauricedb @mauricedb @mauricedebeijer

Notes de l'éditeur

  1. https://forms.gle/k3C3rnWpJ1LNVzrg8 https://docs.google.com/forms/d/10DfiJbLmoAaPkWhL8DU3zwciH1U8zdqAnQ5GB-Zm8Ik/edit#responses