Mocking API with Cypress

Cypress is a purely JavaScript-based front-end testing tool built for the modern web. We use RealWorld to practice API Automation with Cypress.

• Mocking API with Cypress
  • Installing and opening Cypress
  • APIs
  • Command Line
  • Environment Variables
  • Configuration API
  • Multiple Test Reports
  • Docker
  • Cross Browser Testing
  • Open Source Cypress Dashboard
  • Visual Testing

Installing and opening Cypress

npm install cypress --save-dev
npx cypress open

APIs

you can find here table of contents:

• Events
• Assertions
  • Chi
  • BDD-Assertions
  • TDD-Assertions
  • Chai-jQuery
  • sinon-chai
    • cy.stub()
    • cy.spy()
    • Stubs, Spies, and Clocks
• Commands
• Utilities
• Cypress API
  • intercept: Spy and stub network requests and responses.
  • its: Get a property's value on the previously yielded subject.
• Plugins

Cypress automatically bundles and wraps these libraries:

Name	What it does
sinon	provides the cy.stub() and cy.spy() APIs
lolex	provides the cy.clock() and cy.tick() APIs
sinon-chai	adds chai assertions for stubs and spies

Command Line

Cypress CLI:

npx cypress run

npm install --save-dev start-server-and-test

Environment Variables

Environment Variables are useful when:

• Values are different across developer machines.
• Values are different across multiple environments: (dev, staging, qa, prod)
• Values change frequently and are highly dynamic.

Configuration API

Cypress enables you to dynamically modify configuration values and environment variables from your Cypress configuration.

// promisified fs module
const fs = require('fs-extra')
const path = require('path')

function getConfigurationByFile(file) {
  const pathToConfigFile = path.resolve('..', 'config', `${file}.json`)

  return fs.readJson(pathToConfigFile)
}

// plugins file
module.exports = (on, config) => {
  // accept a configFile value or use development by default
  const file = config.env.configFile || 'development'

  return getConfigurationByFile(file)
}

cypress run
cypress run --env configFile=qa
cypress run --env configFile=staging
cypress run --env configFile=production

Multiple Test Reports

Cypress is built on top of Mocha, that means any reporter built for Mocha can be used with Cypress.

npm install --save-dev cypress-multi-reporters mocha-junit-reporter junit-report-merger
npm install --save-dev mochawesome mochawesome-merge mochawesome-report-generator

cypress.config.ts

import { defineConfig } from 'cypress'

export default defineConfig({
  reporter: 'cypress-multi-reporters',
  reporterOptions: {
    configFile: 'reporter-config.json'
  }
})

reporter-config.json :

  {
    "reporterEnabled": "mocha-junit-reporter, mochawesome",
    "mochaJunitReporterReporterOptions": {
      "mochaFile": "cypress/results/junit/results-[hash].xml"
    },
    "reporterOptions": {
        "reportDir": "cypress/results/mochawesome",
        "overwrite": false,
        "html": false,
        "json": true
      }
  }

package.json

{
  "scripts": {
    "delete:reports": "rm cypress/results/* || true",
    "combine:reports": "jrm cypress/results/combined-report.xml \"cypress/results/*.xml\"",
    "prereport": "npm run delete:reports",
    "report": "cypress run --reporter cypress-multi-reporters --reporter-options configFile=reporter-config.json",
    "postreport": "npm run combine:reports"
  }
}

Docker

There are Docker images:

https://github.com/cypress-io/cypress-docker-images

• cypress/base: has the operating system dependencies required to run Cypress.
• cypress/browsers: extends the base images with pre-installed browsers.
• cypress/included: extends the base images with pre-installed Cypress versions.

FROM cypress/base:18.12.0

RUN mkdir /app
WORKDIR /app

COPY . /app

RUN npm install

RUN $(npm bin)/cypress verify

CMD ["npm", "run", "cy:e2e"]

Cross Browser Testing

Cypress has the capability to run tests across multiple browsers. Currently, Cypress has support for Chrome-family browsers (including Electron and Chromium-based Microsoft Edge), WebKit (Safari's browser engine), and Firefox.

Open Source Cypress Dashboard

Sorry Cypress is a free, MIT licensed open source software. Self-hosted, alternative dashboard for unlimited parallelization, recording and debugging of cypress tests

Visual Testing

Cypress is a functional test runner.Your visual styles may also rely on more than CSS, perhaps you want to ensure an SVG or image has rendered correctly or shapes were correctly drawn to a canvas.Cypress gives a stable platform for writing plugins that can perform visual testing. Listed in the Visual Testing plugins section.