Start Automating E2E Tests with Cypress

Nowadays, running a web application without E2E testing is like driving a car without a safety belt. Cypress is one of the most trendy Javascript End to End (E2E)testing framework at the moment. It offers open-source and has some compelling features like auto-wait, consistent results and real time reloads.

Cypress Kitchen Sink is a sample open-source project built by Cypress itself. If you already have a web app and now need to add Cypress to safeguard your features, it is the best project for you to get started with. It contains just enough examples as well as settings for you can use directly in your own project.

cypress-io/cypress-example-kitchensink

Cypress Kitchen Sink contains a fully working web app in the app folder, but the folder you need to copy over is the cypress folder. It contains 4 subfolders:

• Fixture (for storing mocking data)
• Integration (for testing code. Remove the example folder and add your own test cases)
• Plugin (Just in case you need it)
• Support (Mainly for creating your own cypress commands)

The following files are also worth checking out:

1. package.json

Inside the script tag, there are various commands to run Cypress. Below are 3 of them for a quick start.

"cy:run": "cypress run",    
"cy:run:record": "cypress run --record",    
"cy:open": "cypress open",

In the dependency section, the plugins for eslint is included as well.

"cypress": "3.4.1",    
"eslint": "5.16.0",    
"eslint-plugin-cypress": "2.6.1",    
"eslint-plugin-cypress-dev": "2.1.0",    
"eslint-plugin-mocha": "5.3.0",

2. .eslintrc

Generally copy everything here.

3. .gitignore

Used for ignoring cypress generated files or certain fixtures.

cypress/screenshots
cypress/videoscypress/logs
cypress/fixtures/profile.json
cypress/fixtures/users.json

Now you would have cypress integrated with lint and gitignore. Just run yarn && yarn cy:open to get started.

Continue our journey

This is the first Cypress article from Metigy. It is the start of the journey for us to embrace E2E in our development. More Cypress articles are coming:

• Cypress Lambda
• How to setup standardjs to lint Cypress
• How to deal with iframes in Cypress

Let us know in the comments below what you think and if there are any tips you have yourself. And don’t forget to give this article some claps!