cypress 6.0 and cypress-cucumber

 

We've used cypress for a couple of years now to write e2e tests for our apps. Recently I have the opportunity to setup an cypress test suite using cypress-cucumber node package which supports gherkin syntax (new for me). These are my notes and learnings.

cypress.io

• created in 2014, written in javascript, first beta 2017
• lots of cool features, can view state on each line of cypress tests, api info logged to console
• wait on apis (no more sleeps or set wait times and flakey timing problems)
• now up to version 6.5, e.g. route replaced by intercept
• uses testing tech you're used to describe and it from Mocha and expect from Chai (see more here)
• cypress docs, guides, tutorials, recipes are awesome

cypress-cucumber

• write cypress tests using gherkin syntax (feature, scenario, given when then etc.) which is based on BDD (see below)
• npm package
• a way to write, organize and reuse cypress tests

BDD 

• a way for business and technical people to work together to reach a shared understanding of the problem to be solved, to enable small releases and also document the system
• breaks works into small pieces to be delivered
• 3 step iterative process
1. Discovery - have the team take a user story and discuss concrete examples to explore, discover and understand 
• conversations between the people involved in imagining and delivering the software 
• grow teams understanding of what needs to be built and the rules, identify gaps
• product, eng, tester (and design) and done as close to build as possible
• ~30 mins a story
2. Formulation - document those examples in a way which can be automated e.g. gherkin syntax 
3. Automation - implement the behavior starting with the automated test 
• this story discussion is key to developing software "a story is a placeholder for a conversation"

installation

When I created a new repo and installed cypress and then tried to open cypress it failed with this error:

Cypress cannot run because this binary file does not have executable permissions here:

/Users/<user>/Library/Caches/Cypress/6.5.0/Cypress.app/Contents/MacOS/Cypress

This has happened to others and the solution is to remove Cypress from the /Caches folder and npm install cypress again (blow away node_modules)

Once I did that cypress:open worked

Install @testing-library/cypress to get findByTestId() and more helpers

You could install faker if it makes sense for your needs.

Best practices

• Logging in via api (instead of form input) is a best practice and a big time saver (did I mention the recipes are awesome). Interesting tutorial on login flow when csrf tokens are required.
• "Cypress enables you to write all types of tests: End-to-end tests, Integration tests, Unit tests" - you could, but you shouldn't. There are performance overhead. imo e2e user flows are the sweet spot, stay away from unit testing with cypress and use other faster tools for that
• intercept() has replaced server() and route() which are being deprecated in v6 because route() only supports xmlhttprequests, intercept supports fetch and <script> tag loads as well
• stubbing and passing a fixture to a route like so 'fixture:users.json' does not work with intercept and needs to be an object { fixture: 'users.json' } 
• there are other differences too, so check the migration guide

Documentation

• Cypress has lots of configuration options and 6 different ways to pass configuration params.
• numTestsKeptInMemory  - critical for developer debugging, set to at least the number of it tests you have when developing, "If this is set to 0, then snapshots will never be available as we are not saving the memory data for snapshots.

  If this is set to 1, you would only have snapshots available for the 1 test, aka the last test ran (the it function). All other snapshots would be unavailable."

minimatch

• can someone please build an online minimatch matcher ui? I know I can execute commands in the console but a tool would be much better UX
• cheatsheet
• I know how to define minmatch for must have one of, e..g. /apples?*+(green=1)* how do you define should not have (using !) e.g. match routes which don't have green it in?