Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
What to Upload to SlideShare
Loading in …3
×
1 of 52

Building reliable web applications using Cypress

0

Share

Download to read offline

Tired of having users email you that your web application is broken? Turns out that building reliable web applications is hard and requires a lot of testing. You can write unit tests but quite often these all pass and the application is still broken. Why? Because they test parts of the application in isolation. But for a reliable application we need more. We need to make sure that all parts work together as intended.

Cypress is a great tool to achieve this. It will test you complete web application in the browser and use it like a real user would. In this session Maurice will show you how to use Cypress during development and on the CI server. He will share tips and tricks to make your tests more resilient and more like how an actual end user would behave.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Building reliable web applications using Cypress

  1. 1. 1 TOPIC Building reliable web applications using Cypress @mauricedb
  2. 2. Who am I? @mauricedb @mauricedb @mauricedebeijer Maurice de Beijer
  3. 3. @cloudgen_verona #CodeGen2021
  4. 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. 5 What is Cypress and why should you care?
  6. 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. 7
  8. 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
  9. 9. 9 Running Cypress tests
  10. 10. 10 End to End versus Unit testing
  11. 11. 11 The traditional testing pyramid Manual End to End Integration testing Unit testing
  12. 12. 12 Both windows are fine Source
  13. 13. 13 A sturdy latch Source
  14. 14. 14 A better testing pyramid for the web Manual End to End Integration testing Unit testing
  15. 15. 15 Getting started with Cypress
  16. 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
  17. 17. 17 Basic Cypress tests
  18. 18. 19 Cypress Testing Library
  19. 19. 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
  20. 20. 21 Find a table cell using it’s ARIA role
  21. 21. 22 Finding an input element by using it’s label
  22. 22. 23
  23. 23. 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
  24. 24. 26 Adding an ARIA label
  25. 25. 27 Searching for the ARIA label
  26. 26. 29 Cypress and AJAX requests
  27. 27. 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
  28. 28. 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
  29. 29. 33 Visual Regression Testing
  30. 30. 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
  31. 31. 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)
  32. 32. 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()
  33. 33. 38 Faking Math.random()
  34. 34. 40 Continuous Integration
  35. 35. 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
  36. 36. 42 GitHub Action to run Cypress tests
  37. 37. 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
  38. 38. 44 GitHub Action for Visual Regression Testing
  39. 39. 46 Flaky Tests
  40. 40. 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
  41. 41. 48 Enable retries
  42. 42. 49 Cypress Dashboard - Runs
  43. 43. 50 Cypress Dashboard - Flaky Tests
  44. 44. 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
  45. 45. Thank you Any questions? @mauricedb @mauricedb @mauricedebeijer

Editor's Notes

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