chore: use docker compose to run cypress. (#27831)

.vscode/launch.json

@@ -8,6 +8,21 @@
       "processId": "${command:PickProcess}",
       "continueOnAttach": true
     },
+    {
+      "type": "node",
+      "request": "attach",
+      "name": "Attach to port 5566",
+      "port": 5566,
+      "continueOnAttach": true,
+    },
+    {
+      "type": "node",
+      "request": "attach",
+      "name": "Attach to Docker",
+      "port": 5566,
+      "continueOnAttach": true,
+      "remoteRoot": "/opt/cypress",
+    },
     {
       "type": "node",
       "request": "attach",

CONTRIBUTING.md

@@ -396,6 +396,20 @@ $ yarn add https://cdn.cypress.io/beta/npm/.../cypress.tgz
 
 Note that unzipping the Linux binary inside a Docker container onto a mapped volume drive is *slow*. But once this is done you can modify the application resource folder in the local folder `/tmp/test-folder/node_modules/cypress/cypress-cache/3.3.0/Cypress/resources/app` to debug issues.
 
+#### Docker as a performance constrained environment
+
+Sometimes performance issues are easier to reproduce in performance constrained environments. A docker container can be a good way to simulate this locally and allow for quick iteration.
+
+In a fresh cypress repository run the following command:
+
+```shell
+docker compose run --service-port dev
+```
+
+This will spin up a docker container based off cypress/browsers:latest and start up the bash terminal. From here you can yarn install and develop as normal, although slower. It's recommend that you run this in a fresh repo because node modules may differ between an install on your local device and from within a linux docker image.
+
+Ports 5566 and 5567 are available to attach debuggers to, please note that docker compose run only maps ports if the `--service-port` command is used.
+
 ### Packages
 
 Generally when making contributions, you are typically making them to a small number of packages. Most of your local development work will be inside a single package at a time.

docker-compose.yml

@@ -0,0 +1,51 @@
+version: '3'
+
+services:
+  dev:
+    image: cypress/browsers:latest
+    ports:
+      # Share debugging ports
+      - 5566:5566
+      - 5567:5567
+    environment:
+      # Use Hist file from shared volume
+      HISTFILE: /root/hist/.bash_history
+      # Setup inspect to use the more permissive address when debugging so
+      # that we can connect to it from ouside the docker container
+      CYPRESS_DOCKER_DEV_INSPECT_OVERRIDE: '0.0.0.0:5566'
+      # This disables CI mode which causes cypress to build differently
+      CI: ''
+    command: /bin/bash
+    working_dir: /opt/cypress
+    volumes:
+      # Copy Cypress source to docker container
+      - .:/opt/cypress
+      - bash-history:/root/hist
+  watch:
+    image: cypress/browsers:latest
+    environment:
+      # This disables CI mode which causes cypress to build differently
+      CI: ''
+    command: yarn watch
+    working_dir: /opt/cypress
+    volumes:
+      # Copy Cypress source to docker container
+      - .:/opt/cypress
+  ci:
+    # This should mirror the image used in workflows.yml
+    image: cypress/browsers-internal:node18.15.0-chrome114-ff115
+    ports:
+      - 5566:5566
+      - 5567:5567
+    command: /bin/bash
+    environment:
+      HISTFILE: /root/hist/.bash_history
+      CYPRESS_DOCKER_DEV_INSPECT_OVERRIDE: '0.0.0.0:5566'
+    working_dir: /opt/cypress
+    volumes:
+      - .:/opt/cypress
+      - bash-history:/root/hist
+
+# persist terminal history between runs in a virtual volume
+volumes:
+  bash-history:

package.json

@@ -40,6 +40,7 @@
     "gulp:debug": "node --inspect-brk ./node_modules/.bin/gulp",
     "dev-debug": "node ./scripts/debug.js dev",
     "docker": "./scripts/run-docker-local.sh",
+    "docker-dev": "./scripts/run-docker-local.sh dev",
     "ensure-deps": "./scripts/ensure-dependencies.sh",
     "get-next-version": "node scripts/get-next-version.js",
     "postinstall": "node ./scripts/run-postInstall.js",

packages/electron/lib/electron.js

@@ -126,7 +126,11 @@ module.exports = {
         const opts = minimist(argv)
 
         if (opts.inspectBrk) {
-          argv.unshift('--inspect-brk=5566')
+          if (process.env.CYPRESS_DOCKER_DEV_INSPECT_OVERRIDE) {
+            argv.unshift(`--inspect-brk=${process.env.CYPRESS_DOCKER_DEV_INSPECT_OVERRIDE}`)
+          } else {
+            argv.unshift('--inspect-brk=5566')
+          }
         }
       }
 

scripts/run-docker-local.sh

@@ -1,18 +1,14 @@
 #!/bin/bash
+SERVICE=${1:-ci}
+
 set e+x
 
 echo "This script should be run from cypress's root"
 
-name=cypress/browsers-internal:node18.15.0-chrome114-ff115
-echo "Pulling CI container $name"
-
-docker pull $name
+docker compose build ${SERVICE}
 
-echo "Starting Docker image with cypress volume attached"
+echo "Starting Docker compose service, $SERVICE, with cypress volume attached"
 echo "You should be able to edit files locally"
 echo "but execute the code in the container"
 
-docker run -v $PWD:/home/person/cypress \
-  -w /home/person/cypress${WORKING_DIR:-} \
-  -it $name \
-  /bin/bash
+docker compose run --service-ports ${SERVICE}