cypress-example-docker-circle

Cypress + Docker + CircleCI = ❤️

Running your Cypress E2E tests on Circle CI v2.0 is very simple. See circle.yml for the current build commands. You can use our base image cypress/base with all dependencies pre-installed.

Then check out the code and call cypress run command. That is it! See test runs for this example at circleci.com

Note: if you want to use CircleCI Workflows feature to run multiple tests in parallel, check out our example repo cypress-example-docker-circle-workflows.

Artifacts

You can save generated videos and screenshots as CircleCI artifacts

steps:
  - checkout
  - run:
      name: Running E2E tests
      command: cypress run
  - store_artifacts:
      path: cypress/videos
  - store_artifacts:
      path: cypress/screenshots

Test summary

Generate just XML report

CircleCI can store test results from a large number of test reporters. Cypress can output test results with custom reporters, including using built-in junit format. Just add the following options to the CI command to generate and store test results.

- run:
    name: Running E2E tests
    command: cypress run --reporter junit --reporter-options "mochaFile=results/my-test-output.xml"
- store_test_results:
    path: results

The generated file will be placed in folder results and the folder will be uploaded to CircleCI storage. This summary will be really helpful when a test fails. For example, I have introduced a different label into the test, the word testing never appears on the page, yet the test is looking for it.

// a-spec.js
it('has h2', () => {
  cy.contains('h2', 'testing')
})

See the failed CI test run at https://circleci.com/gh/cypress-io/cypress-example-docker-circle/10.

The CircleCI test summary shows failed test and user-friendly message.

Switching to the artifacts tab, we can find the screenshot PNG image taken at the failure moment.

Finally, we can open either the video, or the screenshot artifact

The failure is now easy to see and fix.

In this repository take a look at test-junit script inside package.json

Spec + XML reports

You can generate XML junit report and see spec output while CI is running using mocha-multi-reporters.

npm install --save-dev mocha mocha-multi-reporters mocha-junit-reporter
cypress run --reporter mocha-multi-reporters --reporter-options configFile=config.json

File config.json has

{
  "reporterEnabled": "spec, mocha-junit-reporter",
  "mochaJunitReporterReporterOptions": {
    "mochaFile": "multiple-results/results.xml"
  }
}

The standard output will have spec names during the test run, and the final result will be saved in JUnit XML format in file multiple-results/results.xml.

Take a look at test-multiple script inside package.json for example.

Happy testing

If you find problems with Cypress and CI, please

• consult the documentation
• ask in our Gitter channel
• find an existing issue or open a new one