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 frameworks 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 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 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:
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",
Generally copy everything here.
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.
Continuing our journey
This is the first Cypress article from Metigy. It’s the start of the journey for us to embrace E2E in our development. Our future Cypress articles are coming soon and include:
- Cypress Lambda
- How to setup standardjs to lint Cypress
- How to deal with iframes in Cypress
How have your experiences been using Cypress? Let us know in the comments below and if you have any tips!