bahmutov/demo-docker-cypress-included

Demo running the complete Docker image `cypress/included`

demo-docker-cypress-included

Demo running complete Docker image cypress/included

Run tests

$ ./cy-run.sh

See script cy-run.sh for the exact docker run ... command.

$ ./cy-run.sh
Running Cypress e2e tests headlessly

==============================================================================

  (Run Starting)

  ┌──────────────────────────────────────────────────────────────────────────┐
  │ Cypress:    3.2.0                                                        │
  │ Browser:    Electron 59 (headless)                                       │
  │ Specs:      1 found (spec.js)                                            │
  └──────────────────────────────────────────────────────────────────────────┘

──────────────────────────────────────────────────────────────────────────────

  Running: spec.js...                                                                      (1 of 1)


  Cypress TodoMVC test
    ✓ adds 2 todos (1351ms)

  ...

See help

• specify entrypoint to be just cypress
• pass any arguments after the image name

Example: shows help

$ docker run -it -v $PWD:/e2e -w /e2e --entrypoint=cypress cypress/included:3.2.0 help

See Cypress info

You can see the information about the Docker image by running cypress info command

$ docker run -it -v $PWD:/e2e -w /e2e --entrypoint=cypress cypress/included:6.2.1 info
Displaying Cypress info...

Detected 2 browsers installed:

1. Chrome
  - Name: chrome
  - Channel: stable
  - Version: 87.0.4280.66
  - Executable: google-chrome

2. Firefox
  - Name: firefox
  - Channel: stable
  - Version: 82.0
  - Executable: firefox

Note: to run these browsers, pass <name>:<channel> to the '--browser' field

Examples:
- cypress run --browser firefox
- cypress run --browser chrome

Learn More: https://on.cypress.io/launching-browsers

Proxy Settings: none detected
Environment Variables:
CYPRESS_CACHE_FOLDER: /root/.cache/Cypress

Application Data: /root/.config/cypress/cy/development
Browser Profiles: /root/.config/cypress/cy/development/browsers
Binary Caches: /root/.cache/Cypress

Cypress Version: 6.2.1
System Platform: linux (Debian - 10.5)
System Memory: 2.09 GB free 534 MB

Running in a browser

Since we see that Chrome and Firefox browsers are pre-installed in the container, let's run tests using Firefox for example

$ ./cy-run.sh --browser firefox

Cypress open

Follow Running GUI applications using Docker for Mac and install XQuartz X11 server. Then see cy-open.sh for Docker run command that forwards XVFB events from Cypress to the X11 server running on the host machine. You should see Cypress Test Runner open and work fine.

Cypress plugins

If your project uses Cypress plugins and they are declared inside package.json file, then they should be installed before launching Cypress using Docker. For example this project uses cypress-axe plugin.

Before running the tests

npm install
./cy-run.sh

Note: if any plugins use native extensions, they would need to be installed under exactly the same environment as the Cypress included Docker image that runs them.

demo-docker-cypress-included's Issues

Cannot get cy-run.sh to work when executing on CircleCi

I'm really struggling with getting cypress/included working with circleCi. I can run the cy-run.sh bash script on my local machine (mac osx) and it works/begins running my cypress tests but it doesn't work on circleCi.

My codebase is a monorepo of many packages but only three web-app environments called web.app-browser, admin-app-browser, and partner-app-browser. I initially set up cypress to spin up localhost instances for each web-app individually and then ran all the tests from a single ./cypress directory at the root but have been running into xvfb display port errors. So I decided to split the tests into individual packages and added cypress to each of the three app packages so tests could be executed from the package level so cypress would spin up a test run for each package and only run tests related to each package individually. I still ended up running into xvfb errors since I'm running all three localhost instances AND all three cypress run's on a single machine.

So, that brings me here, I am now trying to implement the cypress/included docker image so that each app package run is running on a separate docker image. I'm attempting to make this work with circleCi since that's our CD/CI service, but I'm failing to get circleCi to correctly run cypress.

I keep getting errors relating to bein unable to find certain files, whether it be the cypress.json file or spec.js files.

Here's the error output that causes the circleCi build to fail

...
745536d95138: Extracting  30.92kB/30.92kB
$<3>$<3>
745536d95138: Extracting  30.92kB/30.92kB
$<3>$<3>
745536d95138: Pull complete 
Digest: sha256:34f67539d2c255ed24aa38b4edf11639d13579181915da9ad9e1e0b8e62ab564
Status: Downloaded newer image for cypress/included:3.7.0
^@^@Fontconfig warning: "/etc/fonts/fonts.conf", line 100: unknown element "blank"
Could not find a Cypress configuration file, exiting.

We looked but did not find a cypress.json file in this folder: /e2e
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Exited with code exit status 1```

Here's my circleCi config.yml:

workflows:
version: 2
main:
jobs:
- test:
context: blah-global
# updated the context: line to a fake context for privacy sake

version: 2
jobs:
test:
docker:
- image: ${AWS_ECR_PATH}/nodejs:10-web-ci
aws_auth:
aws_access_key_id: ${AWS_ACCESS_KEY_ID}
aws_secret_access_key: ${AWS_SECRET_ACCESS_KEY}
- image: cypress/base:8
parallelism: 3

steps:
  - checkout
  # Clear yarn cache before run
  - run:
      name: clear cache
      command: yarn cache clean
  - run:
      name: Install Dependencies
      command: yarn install
  # Lint only changed files
  - run:
      name: Lint changed files
      command: yarn lint:changed-packages
  - run:
      name: Spin up localhost for changed packages
      command: yarn run:package-circle-localhost
      when: on_success
      background: true
      halt_build_on_fail: true
  - run:
      name: Confirm changed package localhost test servers are running
      command: yarn run:ping-changed-localhosts
      when: on_success
  - setup_remote_docker:
      docker_layer_caching: true
  - run:
      name: Run docker run bash script
      command: |
        bash cy-run.sh
      no_output_timeout: 1200
  - run:
      name: clear cypress cache
      command: |
        rm -rf /tmp/.X*
        yarn cypress:clear-cache
      when: on_success
  - run:
      name: Test changed packages
      command: yarn test:changed-packages --no-cache -w 1
      when: on_success
  - run:
      name: List changed packages
      command: yarn what-changed

Videos are saved as root

Doing ./cy-run.sh creates ./cypress/videos/spec.js.mp4 as root.

Not sure if this is a bug, or if this is intentional?

Running fails with: We looked but did not find a cypress.json file in this folder: /e2e

Current behavior:

I try running the cy-run.sh from this repo, which results in the error (this is with a fresh clone):

Could not find any tests to run.
We looked but did not find a cypress.json file in this folder: /e2e

Desired behavior:

The tests should run just fine.

Test code to reproduce

Just clone the repo and run ./cy-run.sh. I tried switching to different versions of the cypress-included image (also 4.0.1), always the same error.

Versions

Different cypress versions (see above).
Docker version: 19.03.3, build a872fc2f86

Fails on ubuntu 21.10 with cypress 9.2.0

I tried the following docker-compose:

version: '3.7'
services:
  cypress:
    build:
      context: .
      dockerfile: ./Dockerfile.cypress
      network: host
    environment:
      - DISPLAY
    working_dir: /cypress
    entrypoint: ''
    command: bash -c 'cypress open --config baseUrl=http://localhost:3000'
    volumes:
      - ./cypress:/cypress/cypress
      - /tmp/.X11-unix:/tmp/.X11-unix

And I'm getting

cypress_1  | Gtk-Message: 13:21:05.791: Failed to load module "canberra-gtk-module"
cypress_1  | Gtk-Message: 13:21:05.792: Failed to load module "canberra-gtk-module"
cypress_1  | [17:0302/132105.799990:ERROR:bus.cc(392)] Failed to connect to the bus: Failed to connect to socket /var/run/dbus/system_bus_socket: No such file or directory
cypress_1  | [17:0302/132105.801664:ERROR:bus.cc(392)] Failed to connect to the bus: Address does not contain a colon
cypress_1  | [17:0302/132105.801699:ERROR:bus.cc(392)] Failed to connect to the bus: Address does not contain a colon
cypress_1  | [17:0302/132105.849082:ERROR:gpu_process_host.cc(957)] GPU process exited unexpectedly: exit_code=1024
cypress_1  | [17:0302/132105.849101:WARNING:gpu_process_host.cc(1270)] The GPU process has crashed 1 time(s)
cypress_1  | [17:0302/132105.858609:ERROR:gpu_process_host.cc(957)] GPU process exited unexpectedly: exit_code=1024
cypress_1  | [17:0302/132105.858630:WARNING:gpu_process_host.cc(1270)] The GPU process has crashed 2 time(s)
cypress_1  | [17:0302/132105.867367:ERROR:gpu_process_host.cc(957)] GPU process exited unexpectedly: exit_code=1024
cypress_1  | [17:0302/132105.867386:WARNING:gpu_process_host.cc(1270)] The GPU process has crashed 3 time(s)
cypress_1  | [17:0302/132105.875058:ERROR:gpu_process_host.cc(957)] GPU process exited unexpectedly: exit_code=1024
cypress_1  | [17:0302/132105.875074:WARNING:gpu_process_host.cc(1270)] The GPU process has crashed 4 time(s)
cypress_1  | [17:0302/132105.961576:ERROR:gpu_process_host.cc(957)] GPU process exited unexpectedly: exit_code=1024
cypress_1  | [17:0302/132105.961592:WARNING:gpu_process_host.cc(1270)] The GPU process has crashed 5 time(s)
cypress_1  | [17:0302/132105.968154:ERROR:gpu_process_host.cc(957)] GPU process exited unexpectedly: exit_code=1024
cypress_1  | [17:0302/132105.968172:WARNING:gpu_process_host.cc(1270)] The GPU process has crashed 6 time(s)
cypress_1  | [17:0302/132105.968182:FATAL:gpu_data_manager_impl_private.cc(417)] GPU process isn't usable. Goodbye.
cypress_1  | The Test Runner unexpectedly exited via a exit event with signal SIGILL

Check if we can use plugins like `cypress-axe`

for cypress-io/cypress#14281

How can I use my custom package inside docker?

Hi @bahmutov,

I have created one custom npm package with name @orgname/cypress-orgname-plugin where I added reusable actions as a cypress commands like login, logout, user creation etc.
I have added it in my package.json and it's published to internal npm registry.

So when I run command:
docker run -it -v $PWD:/e2e -w /e2e cypress/included:3.2.0

it gives me error:

The plugins file is missing or invalid.

Your `pluginsFile` is set to `/e2e/cypress/plugins/index.js`, but either the file is missing, it contains a syntax error, or threw an error when required. The `pluginsFile` must be a `.js` or `.coffee` file.

Please fix this, or set `pluginsFile` to `false` if a plugins file is not necessary for your project.

 Error: Cannot find module '@orgname/cypress-orgname-plugin'
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.Module._load (module.js:437:25)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/e2e/cypress/plugins/index.js:13:13)
    at Object.<anonymous> (/e2e/cypress/plugins/index.js:23:3)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at module.exports (/root/.cache/Cypress/3.2.0/Cypress/resources/app/packages/server/lib/plugins/child/run_plugins.js:118:15)
    at Object.<anonymous> (/root/.cache/Cypress/3.2.0/Cypress/resources/app/packages/server/lib/plugins/child/index.js:14:25)
    at Object.<anonymous> (/root/.cache/Cypress/3.2.0/Cypress/resources/app/packages/server/lib/plugins/child/index.js:16:3)

To solve this, I started cypress container in interactive mode and tried to navigate to node_modules/@orgname/cypress-orgname-plugin but it failed with permission error.
So, I changed permissions of node_modules(777) and then started cypress container again in interactive mode. Ran npm install @orgname/cypress-orgname-plugin --registry=<registry-url> and then it worked fine.

This is not a cypress docker image problem but general file permission problem when mounting files to docker.

How can we solve this problem if someone wants use some other package?

Running commands in cypress/included image in case of running cypress tests in teamcity PR build.

I am trying to use cypress/included:9.5.3 image and I want to run custom command like "npm install && npm run test:e2e:dev" which are defined in my project. npm run test:e2e:dev starts my local app server which is on port 8001 and cypress waits for this to come up.

I want to achieve something like below:
docke run cypress/included -c "npm install some-internal-package && npm run test:e2e:dev"

Clarify Cypress NPM vs Docker image dependency in Readme?

Hi, I've been working with Cypress via NPM directly on the host, as well as in Gitlab CI via the official cypress/included Docker images for a while, and now I'm trying to resolve a few issues with managing dependencies and this repo seems pertinent.

From what I've read here: https://docs.cypress.io/guides/continuous-integration/introduction#Official-Cypress-Docker-Images and in my own experience, there's a (irreconcilable?) issue with trying to run Cypress on your host (and thus including it in package.json) and running it in Docker (as this repo does) and NOT including it.

The official docs explicitly say not to mount your node modules in the cypress/included container - the binary will not be found - and I think I get it, that's if you've got Cypress in package.json and installed in host, there will be a confict with what is installed in the container already. This could be compounded by the fact that you might also have a version mismatch between Cypress in package.json and the tag and version you've selected for the image.

So the obvious solution to that issue is what you've done here: do not include a version of Cypress on the host at all. No host Cypress, no conflict, just rely on what the official image has already brought to the table, but still rely on package.json for plugins, which can be dev, or perhaps even optional dependencies. So in this case, the container calls all the shots.

However, does this not raise another issue: if there's no cypress version in package.json, 1) how should we specify that we depend on Cypress (perhaps we just don't) and 2) if we don't specify a version, do we not risk having a incompatiblity between plugins? In essence when everything is in package.json I can rely on having one place to manage dependencies.

Maybe there is no easy solution, maybe as in my case, a Dockerfile will be the only way to specify the version of Cypress we use (in this case, only that via Docker image). But, given the official docs seem ambiguous about this and this demo repo seems to suggest going the Docker-only route, I'm left wondering if either the official docs could be more clear or if this repo Readme should have some more details surrounding this dependency management issue.

So, basically, is there an official opinion or recommendation on this? If, so could this be made more clear in the docs?