Cypress Tales: Effective E2E Testing

Cypress Tales: Effective E2E Testing

slido.com

#armadajs

Nikola Đuza

Software Engineer at ToptalΒ πŸ–₯

Novi Sad JS Organizer πŸ—£

Rails and React πŸ’Ž

What this talk is?

  • High level principles of testing (with Cypress) ⬆️
  • Low level principles of Cypress testing ⬇️
  • Opinionated πŸ€”πŸ˜„

What this talk is NOT?

  • Detailed Cypress walkthrough πŸšΆβ€β™€οΈ
  • Convincing you that you should test
  • An ad πŸ›‘

Write tests.

Why test?

  • Make sure software works
  • And that it will work
  • Future proof

Why test?

CONFIDENCE

Why test?

Why test?

Why test?

Why test?

BE SURE TO

TEST YOUR CODE

Not too many.

Code coverage

Code coverage

Code coverage

How much is enough?

Code coverage

How much is enough?

Β―\_(ツ)_/Β―

Code coverage

How much is enough?

Β―\_(ツ)_/Β― IT DEPENDS

Code coverage

YOU SHOULD HAVE IT

Mostly integration.

The "Smoking" Testing Pyramid

The Testing Square

The Testing Trophy

Static tests (analysis)

Flow

ESLint

Static tests (analysis)

Check out

Unit tests

Integration tests

E2E tests

What is

❓

Let's see it πŸ‘€

$ npm install cypress

What is

  • Takes snapshots πŸ“Έ
  • Time travel 🏍
  • Easy debugging πŸ›
  • Native access πŸ–₯
  • Cypress Dashboard πŸ—Ί

Pros:

What is

Cons:

  • Not easy to talk to outside world 🌍
  • No cross-browser testing

What is

Cons:

  • Not easy to talk to outside world 🌍
  • No cross-browser testing
    (coming soon)

Cypress Best Practices

Cypress Best Practices

Test login flow

Cypress Best Practices

Test login flow

BUT

ONLY ONCE

Login test example

Login test example

Viewing the settings page

Viewing the settings page

Login without UI test example

Page Object pattern

Page Object pattern

Cypress Custom Commands

Adding a Cypress Custom Command

Login without UI test example

Testing Login Flow only once

gives you

  • More speed 🏎
  • Testing in isolation πŸ•
  • Less complex tests πŸ’†β€β™€οΈ

Cypress Best Practices

DO NOT USE

UI

TO POPULATE DATA

Cypress Best Practices

CLEAN UP STATE

BEFORE

TESTS RUN

Selenium-based tools

In Cypress

There's no guarentee this will run

Clean up state before tests run

Cypress Best Practices

START A WEB SERVER PRIOR TO RUNNING CYPRESS

Start a web server prior to running Cypress

$ npm start & cypress run

Start a web server prior to running Cypress

πŸ™…β€β™€οΈπŸ›‘βœ‹πŸ™…β€β™€οΈ

$ npm start & cypress run

Start a web server prior to running Cypress

$ npm start & cypress run

πŸ™…β€β™€οΈπŸ›‘βœ‹πŸ™…β€β™€οΈ

$ npm start & wait-on http://localhost:8080 \
	    & cypress run

Start a web server prior to running Cypress

$ npm test

Cypress Best Practices

Check out more at:

Cypress + React = ❀️

Snapshot testing

Snapshot testing

HTML

Snapshot testing

JSON response

Redux

exposing the store

Redux

dispatching action objects

Redux

dispatching actions from our code

Redux + Snapshots

checking state with snapshot testing

React Unit Tests

React Unit Tests

File upload

File upload

BUT WAIT βœ‹

BUT WAIT βœ‹

Β 

YOU JUST STUBBED

A SERVER RESPONSE

BUT WAIT βœ‹

Β 

YOU JUST STUBBED

A SERVER RESPONSE

Β 

IT'S NOT A "TRUE" E2E TEST?! πŸ€”

STUBBING REQUESTS

REAL REQUESTS

Writing E2E tests in Cypress

MEANS WRITING BOTH

  • E2E tests πŸ–πŸ”β›°

  • integration tests πŸ—»πŸ”„πŸ”

Testing Trophy

Testing Trophy

cheap

πŸ’΅πŸ’°

Testing Trophy

cheap

πŸπŸ’¨

🐒

πŸ’΅πŸ’°

Testing Trophy

cheap

πŸπŸ’¨

🐒

πŸ’΅πŸ’°

BIG PROBLEMS 🀯

Small problems 😌

Integration tests provide best balance of:

  • πŸ’΅
  • πŸπŸ’¨
  • 😌

That's why E2E testing in Cypress is:

  • cheap πŸ’΅
  • fast πŸπŸ’¨
  • fun 😌
$ npm install cypress

Novi Sad JavaScript community

e2e testing with Cypress

By Nikola Đuza

e2e testing with Cypress

Why and how to do (e2e) tests with Cypress.

  • 3,246