Skip to content

Instantly share code, notes, and snippets.

@heaversm

heaversm/docker-compose.yml

Created August 30, 2022 16:07
Show Gist options
  • Save heaversm/204c65326809cad4f44b09354d6f138b to your computer and use it in GitHub Desktop.
Save heaversm/204c65326809cad4f44b09354d6f138b to your computer and use it in GitHub Desktop.
Download ZIP
Docker Compose Running Cypress Tests
Raw
docker-compose.yml
version: '3'
services:
# the client container, running webpack and the dev server
client:
image: path_to/image
networks:
- allhosts
volumes:
# this is where our code is mounted into the running container
- ./client/:/client
- ./shared/:/client/src/shared-copied # see shared-copied.md
working_dir: /client
command: yarn start
environment:
PORT: 3000
ports:
- "3000:3000"
e2e:
#cypress/included runs tests immediately upon mount - less boilerplate but not sure how to defer loading until client is ready
#image: "cypress/included:10.6.0"
image: "cypress"
build: ./e2e
container_name: cypress
network_mode: host
depends_on:
- client
environment:
- CYPRESS_baseUrl=http://localhost:3000
# TODO: temporary - 30 second delay to wait for localhost to be ready, followed by execution of cypress tests
command: ["./wait-for-it.sh", "-t","30","http://localhost:3000", "--", "npx","cypress","run"]
# TODO: try to run wait-on vs wait-for-it to avoid arbitrary timeouts
volumes:
- ./e2e/cypress:/app/cypress
- ./e2e/cypress.config.js:/app/cypress.config.js
- ./e2e/wait-for-it.sh:/app/wait-for-it.sh
Raw
e2e->cypress->e2e->spec.cy.js
//your tests here
it("contains foo", () => {
cy.visit("/");
cy.get(".foo").should("contain", "foo");
});
Raw
e2e->cypress.config.js
const { defineConfig } = require("cypress");
module.exports = defineConfig({
e2e: {
baseUrl: "http://localhost:3000",
supportFile: false,
},
});
Raw
e2e->Dockerfile
FROM cypress/base:14
WORKDIR /app
# dependencies will be installed only if the package files change
COPY package.json .
COPY package-lock.json .
# delay script
COPY wait-for-it.sh .
# by setting CI environment variable we switch the Cypress install messages
# to small "started / finished" and avoid 1000s of lines of progress messages
# https://github.com/cypress-io/cypress/issues/1243
ENV CI=1
RUN npm ci
# verify that Cypress has been installed correctly.
# running this command separately from "cypress run" will also cache its result
# to avoid verifying again when running the tests
RUN npx cypress verify
Raw
e2e->package.json
{
"name": "e2e",
"version": "1.0.0",
"main": "cypress.config.js",
"scripts": {
"start": "yarn && wait-on http://localhost:3000 && npx cypress run",
},
"devDependencies": {
"cypress": "10.6.0"
},
"dependencies": {
"wait-on": "6.0.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment