Cypress is a purely JavaScript-based front-end testing tool built for the modern web. We use RealWorld to practice API Automation with Cypress.
npm install cypress --save-dev
npx cypress open
you can find here table of contents:
- Events
- Assertions
- Chi
- BDD-Assertions
- TDD-Assertions
- Chai-jQuery
- sinon-chai
- Commands
- Utilities
- Cypress API
- 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 |
npx cypress run
npm install --save-dev start-server-and-test
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.
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
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"
}
}
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"]
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.
Sorry Cypress is a free, MIT licensed open source software. Self-hosted, alternative dashboard for unlimited parallelization, recording and debugging of cypress tests
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.