A Beginner's Guide to Testing with Cypress

Unit

Integration

UI

High Maintenance

Slow

Difficult

Remember the

Test Pyramid?

Cheap

Fast

💰💰💰

😫 😫 😫

Testing...

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"

UI/E2E testing should also be as easy as writing unit tests

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

What is Cypress?

  • A tool which simulates browser actions like a real user.

  • Provides an easy way for Developers and QAs to write tests.

  • Great alternative to Selenium, but built differently.

  • Tests are run directly inside the browser

How is Cypress different?

Why use Cypress?

Easy to Setup

Easy to run tests

npm i -g cypress
cypress run

cypress open

Visual UI Test Runner

Cross browser support as of v4.0.0

Clear error messages

Faster Debugging

Cypress v4.6

Excellent Documentation

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

Now, let's write our first Cypress test.

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

 

Additional Resources

Any questions?

A Beginner's Guide to Testing with Cypress

By Marie Cruz

A Beginner's Guide to Testing with Cypress

Lunch and learn (News UK tech community) where we will talk about what Cypress is and how we can write our first automated test with Cypress.

  • 2,717