node -v
npm -v
npm install
npm start
http://localhost:4200/
npm install cypress --save-dev
npx cypress open
npm install -g npm-check-updates
npm-check-updates -u
npm install
Add configuration in cypress.json
{
"baseUrl": "http://localhost:4200",
"ignoreTestFiles": "**/examples/*",
"viewportHeight": 768,
"viewportWidth": 1024
}
firstTest.spec.js
npm start
npx cypress open
CLI
npx cypress run
npx cypress run --browser chrome
npx cypress run --record --spec "cypress/integration/my-spec.js"
"video": false
in cypress.jsonnpm install --save-dev start-server-and-test
This command is meant to be used with NPM script commands. If you have a "start server", and "test" script names for example, you can start the server, wait for a url to respond, then run tests. When the test process exits, the server is shut down.
"cypress:e2e":"start-test start http-get://localhost:4200 cypress:run"
in package.json -> scripts npm run cypress:e2e
Cypress-plugin-retries
npm install -D cypress-plugin-retries
import 'cypress-plugin-retries'
module.exports = (on, config) => {
require('cypress-plugin-retries/lib/plugin')(on)
}
CYPRESS_RETRIES=2
in cypress:runenv
key in your cypress.json
configuration file to set the retry number for all spec files
{
"env":
{
"RETRIES": 2
}
}
npx cypress open --env configFile=qa
Reporters
npm install --save-dev cypress-multi-reporters mocha-junit-reporter
cypress.json
{
"reporter": "cypress-multi-reporters",
"reporterOptions": {
"configFile": "reporter-config.json"
}
}
reporter-config.json
{
"reporterEnabled": "spec, mocha-junit-reporter",
"mochaJunitReporterReporterOptions": {
"mochaFile": "cypress/results/results-[hash].xml"
}
}
package.json
then call npm run report.
{
"scripts": {
"delete:reports": "rm cypress/results/* || true",
"prereport": "npm run delete:reports",
"report": "cypress run --reporter cypress-multi-reporters --reporter-options configFile=reporter-config.json"
}
}
npm install --save-dev mochawesome mochawesome-merge mochawesome-report-generator junit-merge
reporter-config.json
"reporterOptions": {
"reportDir": "cypress/results",
"overwrite": false,
"html": false,
"json": true
}
"mochawesome:merge":"npx mochawesome-merge \"cypress/results/*.json\" > mochawesome.json && npx marge mochawesome.json"
Docker
Dockerfile
Dockerfile
FROM cypress/base:12.18.0
RUN npm install --save-dev cypress
RUN $(npm bin)/cypress verify
RUN $(npm bin)/cypress run
docker build -t cypress .
docker-compose.yml
docker-compose up
Cross Browser Testing
// Run the test if Cypress is run via Firefox
it('Download extension in Firefox', { browser: 'firefox' }, () => {
cy.get('#dl-extension')
.should('contain', 'Download Firefox Extension')
})
// Run happy path tests if Cypress is run via Firefox
describe('happy path suite', { browser: 'firefox' }, () => {
it('...')
it('...')
it('...')
})
// Ignore test if Cypress is running via Chrome
// This test is not recorded to the Cypress Dashboard
it('Show warning outside Chrome', { browser: '!chrome' }, () => {
cy.get('.browser-warning')
.should('contain', 'For optimal viewing, use Chrome browser')
})