A Beginner's Guide to Testing with Cypress

Marie Drake

https://www.mariedrake.com/

https://twitter.com/mcruzdrake

https://www.linkedin.com/in/marie-drake/

Unit

Integration

UI

Remember the

Test Pyramid?

Testing...

Everyone knows that Test Automation is important but...

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

https://www.cypress.io/

"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

Visual UI Test Runner

Clear error messages

Faster Debugging

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

Cypress v4.6

Excellent Documentation

https://docs.cypress.io/

 

https://www.cypress.io/blog/

 

https://github.com/cypress-io/cypress-example-recipes

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.

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

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

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

 

• Comparing Cypress with Selenium
• Cypress test automation for people in a hurry
• Cypress cookbook for testers

 

Any questions?

@mcruzdrake