Modern Web Testing with Cypress

Marie Drake, Quality Engineering Manager @ Zoopla

mariedrake.com

@mcruzdrake

/in/marie-drake/

Unit

Integration

E2E

High Maintenance

Slow

Difficult

Remember the

Test Automation Pyramid?

Cheap

Fast

💰💰💰

😫 😫 😫

@mcruzdrake

But, what do our users care about?

@mcruzdrake

Integration

E2E

Unit

@mcruzdrake

Everyone knows that Test Automation is important but...

"We don't have time to write UI tests"

"Writing automated tests slows us down"

"We have a tight deadline so we need to release ASAP"

"I don't know how to use Selenium"

"I have a lot of tickets to test manually"

"Tests are so flaky"

"How do you debug it?"

"Setup is difficult"

"Let's leave it to the SDETs. It's their job"

"I don't understand the error messages"

@mcruzdrake

Developer Experience is Key!

@mcruzdrake

https://www.cypress.io/

"The Web has evolved. Finally, testing has too."

@mcruzdrake

Cypress automates the browser

@mcruzdrake

Cypress is a complete testing framework

@mcruzdrake

Cypress is developer friendly

@mcruzdrake

Cypress helps developers and testers write tests

@mcruzdrake

@mcruzdrake

Why use Cypress?

@mcruzdrake

Easy to Setup

Easy to run tests

npm i -D cypress

npx cypress run

npx cypress open

@mcruzdrake

Visual UI Test Runner

Cross browser support as of v4.0.0

@mcruzdrake

Clear error messages

@mcruzdrake

Faster Debugging

https://www.cypress.io/blog/2020/05/20/faster-debugging-with-test-failure-code-frames-in-cypress-4-6/

Cypress v4.6

@mcruzdrake

Extensive list of plugins

Accessibility testing? cypress-axe
Gherkin syntax? cypress-cucumber-preprocessor
Visual testing? cypress-image-snapshots or Applitools

.. and much more here https://docs.cypress.io/plugins

@mcruzdrake

✅ End-to-end tests

✅ Component tests

✅ API tests

✅ Accessibility tests

✅ Client side performance tests

✅ Visual tests

What tests can it cover?

Now, let's write our first Cypress test.

https://github.com/mdcruz/cypress-demo-todo

http://todomvc.com/examples/react/#/

@mcruzdrake

Are there limitations?

No support for multiple tabs.
No support for visiting more than 1 domain.
Iframe support limited

But.. workarounds are documented here.

https://docs.cypress.io/guides/references/trade-offs.html

@mcruzdrake

Any questions?

@mcruzdrake