Install Xvfb and Run Cypress Again.

What is Continuous Integration?

Setting upward CI

Basics

Running Cypress in Continuous Integration is almost the same every bit running it locally in your terminal. Y'all mostly but need to do two things:

1. Install Cypress

                          npm              install              cypress --salvage-dev                      

2. Run Cypress

Depending on which CI provider you use, you lot may need a config file. You'll want to refer to your CI provider'due south documentation to know where to add together the commands to install and run Cypress. For more configuration examples check out our examples.

Boot your server

Challenges

Typically y'all volition demand to kicking a local server prior to running Cypress. When y'all boot your web server, it runs equally a long running process that volition never exit. Because of this, you'll demand it to run in the background - else your CI provider volition never move onto the side by side control.

Backgrounding your server process means that your CI provider will continue to execute the next command after executing the signal to start your server.

Many people approach this state of affairs by running a command like the following:

                          npm              start              &              cypress run // Do not              exercise              this                      

The trouble is - what happens if your server takes time to boot? At that place is no guarantee that when the next control runs (cypress run) that your spider web server is upward and available. Then your Cypress examination may start and try to visit your local server earlier it is ready to be visited.

Solutions

Luckily, there are some solutions for this. Instead of introducing capricious waits (similar sleep 20) yous tin can utilise a better option.

wait-on module

Using the look-on module, y'all can block the cypress run command from executing until your server has booted.

                          npm              start              &              wait-on http://localhost:8080                      

get-go-server-and-examination module

If the server takes a very long time to start, we recommend trying the start-server-and-exam module.

                          npm              install              --save-dev get-go-server-and-exam                      

In your bundle.json scripts, pass the command to kicking your server, the url your server is hosted on and your Cypress test command.

                          {              ...              "scripts"              :              {              "showtime"              :              "my-server -p 3030"              ,              "cy:run"              :              "cypress run"              ,              "test"              :              "start-server-and-test start http://localhost:3030 cy:run"              }              }                      

In the case above, the cy:run command will only be executed when the URL http://localhost:3030 responds with an HTTP status lawmaking of 200. The server will also shut down when the tests complete.

Gotchas

When working with webpack-dev-server that does not answer to HEAD requests, utilise an explicit Go method to ping the server like this:

                          {              "scripts"              :              {              "test"              :              "commencement-server-and-test first http-get://localhost:3030 cy:run"              }              }                      

When working with local https in webpack, set an environs variable to permit local document:

                          {              "scripts"              :              {              "offset"              :              "my-server -p 3030 --https"              ,              "cy:run"              :              "cypress run"              ,              "cy:ci"              :              "START_SERVER_AND_TEST_INSECURE=ane beginning-server-and-test offset https-become://localhost:3030 cy:run"              }              }                      

Record tests

Cypress can record your tests and make the results bachelor in the Cypress Dashboard, which is a service that gives y'all access to recorded tests - typically when running Cypress tests from your CI provider. The Dashboard provides yous insight into what happened when your tests ran.

Recording tests allow you to:

• Come across the number of failed, awaiting and passing tests.
• Get the entire stack trace of failed tests.
• View screenshots taken when tests fail and when using cy.screenshot().
• Scout a video of your unabridged exam run or a clip at the indicate of test failure.
• See which machines ran each test when parallelized.

To tape tests:

1. Set up your project to record
2. Laissez passer the --tape flag to cypress run inside CI.

            cypress run --record --key=abc123                      

Read the full guide on the Dashboard Service.

Run tests in parallel

Cypress tin can run tests in parallel across multiple machines.

You'll desire to refer to your CI provider'due south documentation on how to set up multiple machines to run in your CI surround.

Once multiple machines are available within your CI surroundings, yous can pass the --parallel flag to have your tests run in parallel.

            cypress run --tape --central=abc123 --parallel                      

Read the total guide on parallelization.

Official Cypress Docker Images

We accept created an official cypress/base of operations container with all of the required dependencies installed. You can add together Cypress and get! Nosotros are too adding images with browsers pre-installed nether cypress/browsers proper noun. A typical Dockerfile would look like this:

            FROM cypress/base RUN npm install RUN $(npm bin)/cypress run                      

Docker images & CI examples

See our examples for additional information on our maintained images and configurations on several CI providers.

Advanced setup

Automobile requirements

Hardware requirements to run Cypress depend how much memory the browser, the application nether examination, and the server (if running information technology locally) need to run the tests without crashing.

Some signs that your motorcar may not have plenty CPU or memory to run Cypress:

• The recorded video artifacts take random pauses or dropped frames.
• Debug logs of the CPU and memory oft show CPU percent above 100%.
• The browser crashes.

You tin meet the total bachelor machine retentivity and the current free retentiveness by running the cypress info control.

            npx cypress info              ... Cypress Version:              6.3.0 Organisation Platform: linux              (Debian -              10.5              )              Organization Retentivity:              73.viii              GB              complimentary              25              GB                      

You can see the CPU parameters on the CI machines by executing the command beneath.

            node -p              'bone.cpus()'              [              {              model:              'Intel(R) Xeon(R) Platinum 8124M CPU @ three.00GHz',     speed:              3399,     times:              {              user:              760580, nice:              1010, sys:              158130, idle:              1638340, irq:              0              }              }              ...              ]                      

Example projects and the machine configurations used to run them on CI:

• Cypress Documentation and Real World App projects run tests on the default CircleCI automobile using the Docker executor on the default medium size machine with 2 vCPUs and 4GB of RAM. cypress info reports System Memory: 73.8 GB gratuitous 25 GB with CPUs reported as Intel(R) Xeon(R) Platinum 8124M CPU @ 3.00GHz. Note that the free retentivity varies on CircleCI, typically nosotros see values anywhere from 6GB to 30GB.
• Real Globe App likewise executes its tests using GitHub Deportment with the default hosted runner with 2 vCPUs and 7GB of RAM. cypress info reports Organisation Memory: 7.29 GB free 632 MB with CPUs reported as Intel(R) Xeon(R) Platinum 8171M CPU @ 2.60GHz.

Tip: if at that place are problems with longer specs, attempt splitting them into shorter ones, post-obit this case.

Dependencies

If yous are non using 1 of the in a higher place CI providers then brand certain your system has these dependencies installed.

Linux

Ubuntu/Debian

                          apt-get              install              libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb                      

CentOS

            yum              install              -y xorg-x11-server-Xvfb gtk2-devel gtk3-devel libnotify-devel GConf2 nss libXScrnSaver alsa-lib                      

Caching

As of Cypress version 3.0, Cypress downloads its binary to the global system cache - on linux that is ~/.cache/Cypress. By ensuring this enshroud persists beyond builds you can save minutes off install time by preventing a large binary download.

We recommend users:

• Cache the ~/.enshroud binder after running npm install, yarn, npm ci or equivalents as demonstrated in the configs below.

• Do not cache node_modules across builds. This bypasses more intelligent caching packaged with npm or yarn, and can cause problems with Cypress not downloading the Cypress binary on npm install.

• If you are using npm install in your build procedure, consider switching to npm ci and caching the ~/.npm directory for a faster and more than reliable build.

• If yous are using yarn, caching ~/.cache volition include both the yarn and Cypress caches. Consider using yarn install --frozen-lockfile as an npm ci equivalent.

• If you lot need to override the binary location for some reason, use CYPRESS_CACHE_FOLDER environment variable.

• Make sure yous are not restoring the previous enshroud using lax keys; then the Cypress binaries can "snowball", read Do Not Allow Cypress Cache Snowball on CI.

Tip: you can find lots of CI examples with configured caching in our cypress-example-kitchensink repository.

Surroundings variables

You can gear up diverse environment variables to modify how Cypress runs.

Configuration Values

You can set whatsoever configuration value as an surround variable. This overrides values in your configuration file (cypress.json by default).

Typical utilize cases would exist modifying things like:

• CYPRESS_BASE_URL
• CYPRESS_VIDEO_COMPRESSION
• CYPRESS_REPORTER
• CYPRESS_INSTALL_BINARY

Refer to the Surroundings Variables recipe for more examples.

Record Central

If you lot are recording your runs on a public project, you'll want to protect your Tape Fundamental. Larn why.

Instead of hard coding it into your run command like this:

            cypress run --tape --key abc-key-123                      

You tin can ready the record primal as the environment variable, CYPRESS_RECORD_KEY, and we'll automatically use that value. Yous can now omit the --key flag when recording.

Typically you'd prepare this inside of your CI provider.

CircleCI Environment Variable

TravisCI Environment Variable

Git information

Cypress uses the @cypress/commit-info package to extract git information to acquaintance with the run (e.g. branch, commit message, writer).

It assumes in that location is a .git binder and uses Git commands to get each property, like git show -s --pretty=%B to get commit message, see src/git-api.js.

Nether some environs setups (due east.thousand. docker/docker-compose) if the .git directory is not bachelor or mounted, yous can pass all git related data under custom environs variables.

• Branch: COMMIT_INFO_BRANCH
• Message: COMMIT_INFO_MESSAGE
• Writer email: COMMIT_INFO_EMAIL
• Writer: COMMIT_INFO_AUTHOR
• SHA: COMMIT_INFO_SHA
• Remote: COMMIT_INFO_REMOTE

If the commit data is missing in the Dashboard run then GitHub Integration or other tasks might not work correctly. To see the relevant Cypress debug logs, set the environment variable DEBUG on your CI car and inspect the terminal output to see why the commit information is unavailable.

                          DEBUG              =commit-info,cypress:server:record                      

Custom Environment Variables

You can too set custom environment variables for use in your tests. These enable your code to reference dynamic values.

                          consign              "EXTERNAL_API_SERVER=https://corp.elevation.co"                      

And then in your tests:

            cy.              request              (              {              method:              'Mail'              ,              url:              Cypress              .              env              (              'EXTERNAL_API_SERVER'              )              +              '/users/1'              ,              trunk:              {              foo:              'bar'              ,              baz:              'quux'              ,              }              ,              }              )                      

Refer to the defended Environment Variables Guide for more examples.

Module API

Ofttimes it can exist less complex to programmatically control and kick your servers with a Node script.

If you're using our Module API and so you tin write a script that boots and so shuts downward the server later. As a bonus, y'all can work with the results and practise other things.

                          // scripts/run-cypress-tests.js              const              cypress              =              crave              (              'cypress'              )              const              server              =              require              (              './lib/my-server'              )              // outset your server              return              server.              offset              (              )              .              then              (              (              )              =>              {              // kick off a cypress run              render              cypress.              run              (              )              .              and so              (              (              results              )              =>              {              // terminate your server when information technology'southward complete              return              server.              end              (              )              }              )              }              )                      

            node scripts/run-cypress-tests.js                      

Mutual problems and solutions

Missing binary

When npm or yarn install the cypress package, a postinstall claw is executed that downloads the platform-specific Cypress binary. If the hook is skipped for any reason the Cypress binary volition be missing (unless information technology was already buried).

To better diagnose the error, add together commands to go information virtually the Cypress cache to your CI setup. This will print where the binary is located and what versions are already present.

            npx cypress cache path npx cypress cache list                      

If the required binary version is not found in the cache, you can try the following:

1. Make clean your CI's cache using your CI's settings to force a clean npm install on the next build.
2. Run the binary install yourself by adding the control npx cypress install to your CI script. If there is a binary already present, it should terminate speedily.

See bahmutov/yarn-cypress-enshroud for an example that runs the npx cypress install command to ensure the Cypress binary is e'er present before the tests brainstorm.

In Docker

If you are running long runs on Docker, you need to set up the ipc to host mode. This issue describes exactly what to do.

Xvfb

When running on Linux, Cypress needs an X11 server; otherwise it spawns its own X11 server during the exam run. When running several Cypress instances in parallel, the spawning of multiple X11 servers at once can cause bug for some of them. In this case, you tin separately offset a single X11 server and pass the server's address to each Cypress instance using Brandish variable.

First, spawn the X11 server in the background at some port, for example :99. If you have installed xvfb on Linux or if y'all are using i of our Docker images from cypress-docker-images, the tools below should be available.

2d, set the X11 accost in an environment variable

Beginning Cypress as usual

Afterwards all tests across all Cypress instances finish, impale the Xvfb background procedure using pkill

Running headless tests without Xvfb

Chromium based browsers and Firefox can spawn without Xvfb when run via the --headless flag. If you're testing against either of those browsers using the --browser flag, you can opt out of Cypress spawning an X11 server past setting the environment variable ELECTRON_RUN_AS_NODE=1.

Colors

If you want colors to be disabled, you tin can laissez passer the NO_COLOR surround variable to disable colors. You lot may desire to do this if ASCII characters or colors are not properly formatted in your CI.

Workshop

Cypress team has created a full workshop showing how to run Cypress on popular CI providers. Observe the workshop at github.com/cypress-io/cypress-workshop-ci.

Run across also

• Cypress Real World App runs parallelized CI jobs across multiple operating systems, browsers, and viewport sizes.
• cypress-example-kitchensink is fix up to run on multiple CI providers.
• Cross Browser Testing Guide
• Blog: Setting upwardly Bitbucket Pipelines with proper caching of npm and Cypress
• Blog: Tape Test Artifacts from whatever Docker CI
• Continuous Integration with Cypress webinar covering TeamCity, Travis and CircleCI setups, slides.

jordanoverted.blogspot.com

Source: https://docs.cypress.io/guides/continuous-integration/introduction

Share this post