/cypress-baby-steps

Let's do some baby steps with Cypress! 🏝

Primary LanguageJavaScript

Cypress Baby Steps

Everyone is talking about the JavaScript Testing-Framework Cypress these days. Let's have a look with a few experiments, what one can do with it. Let's go!

Why use Cypress

  • No other dependencies required to run tests as Cypress contains everything you need.
  • Setup is minimal
  • Cypress supports BDD and TDD style assertion syntax so this would already be familiar to engineers who have used other JavaScript testing libraries.
  • Cypress Test Runner is useful in debugging your tests. You can also directly inspect from Chrome dev tools.

Requirements

Make sure you have the following installed on your machine:

  • Node (The JavaScript runtime environment)
  • NPM (Node Package Manager)

Libraries and plugins used

Cucumber

The lib cypress-cucumber-preprocessor, makes it possible to use feature files and gherkin-syntaxed specs to implement tests. The biggest advantage of writing tests in Gherkin is, that they are simple enough for non-programmers to be understood.

Cypress Recorder

With the Cypress Recorder Chrome extension, you can record a Cypress web session. This extension may help you to speed up the development of your test scripts.

API Testing

Compared to UI-Testing where we interact with the UI elements of an application, in API Testing we call with HTTP requests the applications business layer and verify its responses. The plugin cy-api adds the custom command cy.api to Cypress to additionally support API testing. In the spec file sample_api.spec.js you will find some example tests. These tests run against http://jsonplaceholder.typicode.com and https://restful-booker.herokuapp.com.

Cypress Testing Library

The cypress testing library extends the cypress command cy with some useful find... functions. A complete list of all the available library definitions can be found here. There is also a main Testing Library site made by Kent C. Dodds which you can find here.

cypress-axe

The cypress-axe package provides three simple commands to check for web accessibility issues in a application. These commands are:

Some example can be found here.

Mochawesome report

Mochawesome report is a custom reporter for use with the Javascript testing framework Mocha. It runs on Node.js (>=8) and works in conjunction with mochawesome-report-generator to generate a standalone HTML/CSS report to helps visualize your test results.

Mochawesome-merge

Cypress executes each spec in isolation. This leads to Mocha generating a separate test report for each spec. Thus, there’s no out-of-the-box solution to generate one mochawesome report for all your specs. In order to make all spec as one single file, we need to install one more package which is mochawesome-merge.

Cypress Image Snapshot

Under construction... 🚧

circleci

cypress-io/cypress@1.25.0

This project integrates the circelci orb for cypress

How to run

  • Clone this repo and install the project dependencies with: npm install or npm i
  • To run the tests against the Cypress Test Runner, hit: npm run cypress:open or npx cypress open
    • Once the test runner has loaded, click on the feature or spec file you wish to run.
  • To run the tests from the terminal, hit: npm run cy:test
  • To run all the tests headless (without the Cypress Test Runner), hit: npx cypress run

References

Initial ideas for this project are taken from Marie Drake

Learning Resources