Integrating Cypress‐Boilerplate into Spryker Docker SDK - spryker-projects/cypress-boilerplate GitHub Wiki

This guide provides step-by-step instructions on how to integrate Cypress-Boilerplate into your project using Docker/SDK. These instructions are based on the Cypress-Boilerplate repository. If you create a fork of this repository, use your fork instead.

Step 1: Add Cypress-Boilerplate Repository

First, add the Cypress-Boilerplate GitHub repository to the composer.json file in your project. If you have forked the repository, use the URL of your fork.

composer config repositories.repo-name git https://github.com/spryker-projects/cypress-boilerplate.git

Step 2: Require Cypress-Boilerplate

Next, require Cypress-Boilerplate as a development dependency.

Run the following command:

composer require --dev "spryker-projects/cypress-boilerplate:dev-master" --ignore-platform-reqs --no-install

If you have forked the repository, replace spryker-projects/cypress-boilerplate with the path to your fork.

Step 3: Create .cypress Directory

Create a .cypress directory in the root folder of your project and add it to the .gitignore file.

mkdir .cypress
echo ".cypress" >> .gitignore

Step 4: Create docker-compose.cypress.yml

Create a docker-compose.cypress.yml file in the .cypress directory with the following content:

version: '3.7'
services:
    cypress:
        build:
            context: ./vendor/spryker-projects/cypress-boilerplate
            dockerfile: Dockerfile
        networks:
            - private
        labels:
            'spryker.app.name': cypress
            'spryker.app.type': cypress
            'spryker.project': ${SPRYKER_DOCKER_PREFIX}:${SPRYKER_DOCKER_TAG}
        volumes:
            - ./vendor/spryker-projects/cypress-boilerplate/cypress/e2e:/opt/cypress/cypress/e2e:rw
            - ./vendor/spryker-projects/cypress-boilerplate/cypress/fixtures:/opt/cypress/cypress/fixtures:rw
            - ./vendor/spryker-projects/cypress-boilerplate/cypress/support:/opt/cypress/cypress/support:rw
            - ./vendor/spryker-projects/cypress-boilerplate/.envs:/opt/cypress/.envs:rw
            - ./vendor/spryker-projects/cypress-boilerplate/package.json:/opt/cypress/package.json:rw
            - ./vendor/spryker-projects/cypress-boilerplate/cypress.config.ts:/opt/cypress/cypress.config.ts:rw
            - ./.cypress/data:/opt/cypress/cypress/data:rw

If you have forked the repository, replace spryker-projects/cypress-boilerplate with the path to your fork in the context and volumes paths.

Explanation of the Docker Compose File

The docker-compose.cypress.yml file defines the configuration for running Cypress tests within a Docker container. Here are the key components:

  • services: Defines the services to be run in the Docker container.
  • cypress: The name of the Cypress service.
  • build: Specifies the build context and Dockerfile location.
    • context: Points to the directory containing the Cypress-Boilerplate Dockerfile.
    • dockerfile: The Dockerfile used to build the Cypress container.
  • networks: Defines the network configuration.
  • labels: Custom labels for the Docker container.
  • volumes: Mounts the necessary directories and files from the host to the container. This ensures that any changes in the vendor directory are reflected in the container, and test results are stored in the .cypress/data directory on the host machine.

Step 5: Add Cypress to Deployment Configuration

Add the Cypress tests Docker compose file to the compose section of your *.deploy.yml file.

compose:
    yamls:
        - .cypress/docker-compose.cypress.yml

Step 6: Build and Start the Environment

Build the environment using the updated deployment configuration file and start the Docker environment.

docker/sdk boot your-deploy.deploy.yml
docker/sdk up

Step 7: Running Cypress Tests

Once the environment is up and running, you can execute various Cypress commands using Docker.

Run Cypress Tests

To run Cypress tests, use the following commands:

docker/sdk exec cypress npm run cy:run

Test Results Location

After test execution, the results will be available under the .cypress/data directory. This allows you to easily access and review the test results.

Run Cypress Tests with Docker

To run Cypress tests specifically configured for docker/sdk, use:

docker/sdk exec cypress npm run cy:run:docker

Check Code Quality

To check the code quality using ESLint and Prettier, run:

docker/sdk exec cypress npm run code:check

Fix Code Quality Issues

To automatically fix code quality issues, run:

docker/sdk exec cypress npm run code:fix

Note on Running Tests in Interactive Mode

To run Cypress tests in interactive mode, additional configuration is required. Please refer to the Cypress official documentation for detailed instructions on setting up interactive mode.

By following these steps, you can integrate Cypress-Boilerplate into your project using Docker/SDK and run your Cypress tests seamlessly.

Happy testing!