Chrome browser image with Cypress runner included?

[tedpennings]

Hello!

Is there a reason why there can't be a cypress/browsers:chrome image with the Cypress runner included? Or why the cypress/browsers images couldn't be based on cypress/included?

I'm using npx cypress to run my tests and it takes almost two minutes to fetch npm dependencies. Right now our test suite is two minutes, so I'd love to cut that in half with a pre-installed Cypress runner image.

I looked around and didn't see an obvious answer to this question. I'm sorry if it's been asked before.

Thank you!

[tedpennings]

I measured this a little closer. npx cypress installing Cypress only adds about 45 seconds. (The rest of that time was git and docker.) Chrome with cypress/included would still be a nice improvement, though -- every little bit helps for CI checks on PRs.

[bahmutov]

Do you have caching configured on your CI? The normal setup should not download and unzip npm modules or Cypress binary again and again

Sent from my iPhone

On Jun 18, 2019, at 18:41, Ted Pennings notifications@github.com wrote:

I measured this a little closer. npx cypress installing Cypress only adds about 45 seconds. (The rest of that time was git and docker.) Chrome with cypress/included would still be a nice improvement, though -- every little bit helps for CI checks on PRs.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[tedpennings]

@bahmutov Thanks for the reply!

We use Concourse so it's a little bit complicated. I don't think we can cache the binaries in the normal way. I'll check if a prior job at that stage has node_modules available in the morning. When we were using yarn and our normal package.json, it had to fetch everything (why we switched to npx).

[lvthillo]

We use an image like:

FROM cypress/browsers:node10.2.1-chrome74
RUN npm i cypress@3.3.1
RUN mkdir /e2e
VOLUME /e2e

This way we have cypress and we can execute our tests within this docker image (we use Jenkins, I don't know concourse).

$ docker run -v $WORKSPACE/ui:/e2e image run ...

@bahmutov Is it possible to add something like this to the repository?

[maiis]

@tedpennings We have an image with Chrome 75 and Cypress runner, feel free to use: pix4d/cypress https://github.com/Pix4D/cypress/blob/master/Dockerfile

[bahmutov]

closing this issue in favor of the poll #128

[tedpennings]

Thank you for opening the poll @bahmutov !

[jscontreras]

Preinstalling NPM I using dockerfile

I have to install backstopjs in my cypress docker via npm but I needed to skip npm I running everytime I run the contianerr.

1. docker image is the npm installer

The solution requires a custom docker image. I created it based on cypress/included:4.5.0 and the trick is to skip the source folder and node_modules from being copied.

Dockerfile and .dockerignore files are being created in the root of the project next to package.json

When the volume is mounted, it attaches the cypress (source) folder.

    FROM cypress/included:4.5.0
    RUN mkdir /app
    WORKDIR /app
    COPY . /app
    RUN ls -a /app
    VOLUME /app/cypress
    RUN npm i
    RUN ls /app
    ENTRYPOINT ["node", "--version"]

In order to avoid node_modules and cypress(source) folder, I created a .dockerignore file

node_modules
cypress

2. Using the docker image for cypress testing

It's necessary to create the image before using it in a container.

docker build -t my_images/cypress_backstopjs:1.0 .

Now we mount the source directory (the image will not depend on the source)

I also replace the entry point so it runs npm and appended run cy:run which is at the end npm run cy:run

docker run -v $(pwd)/cypress:/app/cypress --name=cypress_test --entrypoint npm my_images/cypress_backstopjs:1.0 run cy:run

This makes sense because in my package.json I have someething like

{
  "name": "cypress_docker",
  "version": "1.0.0",
  "description": "Cypress with Backstopjs",
  "main": "index.js",
  "scripts": {
    "cy:run": "cypress run"
  },
  "author": "you?",
  "license": "ISC",
  "dependencies": {
    "backstopjs": "^5.0.1",
    "cypress-image-snapshot": "^3.1.1"
  }
}