Integrating Cypress Tests into CI - spryker-projects/cypress-boilerplate GitHub Wiki

Overview

This page explains how to integrate Cypress tests into a CI pipeline. It covers two scenarios:

1. Cypress tests as a standalone repository.
2. Cypress tests as part of the project code.
3. Verifying Cypress tests code quality.

Case 1: Cypress Tests as a Standalone Repository

In this scenario, the Cypress tests are maintained in a separate repository. The CI pipeline needs to clone both the project repository and the Cypress tests repository to run the tests.

Example CI Configuration

Here is an example of a GitHub Actions workflow for integrating Cypress tests as a standalone repository:

name: 'Run Cypress Tests'

on:
  pull_request:
  workflow_dispatch:
  push:
    branches:
      - master

jobs:
  docker-php-8-2-mariadb-cypress:
    name: 'Docker / PHP 8.2 / MariaDB / Cypress'
    runs-on: ubuntu-latest
    env:
      PROGRESS_TYPE: plain
      SPRYKER_PLATFORM_IMAGE: spryker/php:8.2
    steps:
      - name: Checkout project code
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install docker-compose
        run: |
          sudo curl -L "https://github.com/docker/compose/releases/download/2.12.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
          sudo chmod +x /usr/local/bin/docker-compose

      - name: Install Project
        run: |
          git clone https://github.com/spryker/docker-sdk.git ./docker
          docker/sdk boot -v deploy.yml
          sudo bash -c "echo '127.0.0.1 backend-api.at.spryker.local backend-api.de.spryker.local glue-backend.de.spryker.local glue-backend.at.spryker.local glue-storefront.de.spryker.local glue-storefront.at.spryker.local backend-gateway.at.spryker.local backend-gateway.de.spryker.local backoffice.at.spryker.local backoffice.de.spryker.local date-time-configurator-example.spryker.local glue.at.spryker.local glue.de.spryker.local yves.at.spryker.local yves.de.spryker.local' >> /etc/hosts"
          docker/sdk up
          docker/sdk cli composer dump-autoload -o -a --apcu
          docker/sdk cli console queue:worker:start --stop-when-empty

      - name: Clone & Install Cypress tests
        run: |
          git clone -b master --single-branch https://github.com/spryker-projects/cypress-boilerplate.git ./cypress
          cd cypress && npm install

      - name: Run Tests
        id: run_tests
        run: |
          cd cypress && npx cypress run

      - name: Upload artifacts
        if: failure()
        run: echo "S3 bucket logic goes here"

Explanation

• Trigger Conditions: The workflow is triggered on pull requests, manual dispatches, and pushes to the master branch.
• Environment Setup:
  • Checks out the project code.
  • Sets up Node.js.
  • Installs Docker Compose.
  • Boots the Spryker project using Docker SDK.
• Cypress Tests:
  • Clones the Cypress tests repository.
  • Installs Cypress dependencies.
  • Runs the Cypress tests.
• Artifacts Upload: If tests fail, artifacts can be uploaded to an S3 bucket or another storage solution.

Case 2: Cypress Tests as Part of the Project Code

In this scenario, the Cypress tests are part of the project repository. The CI pipeline only needs to clone the project repository and run the tests.

CI Configuration

For this scenario, the setup is similar to the first case, but you do not need to clone a separate Cypress tests repository. Instead, you directly install and run Cypress tests from the project repository.

Verifying Cypress Tests Code Quality

In addition to running Cypress tests, it is essential to verify the code quality of your Cypress tests using tools like ESLint and Prettier. This job/step is optional and can be included based on the project's needs.

Example CI Configuration for Code Quality

Here is an example of a GitHub Actions workflow for checking the code quality of Cypress tests:

name: Check Code Quality

on:
  pull_request:
  workflow_dispatch:
  push:
    branches:
      - master

jobs:
  code-quality-check:
    name: Check Code Quality (Prettier & ESLint)
    runs-on: ubuntu-latest
    strategy:
      fail-fast: false
      matrix:
        node-version: [20.x]

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install dependencies
        run: npm install

      - name: Run ESLint
        run: npm run lint:check

      - name: Check Prettier Formatting
        run: npm run prettier:check

Conclusion

By following these CI configurations, you can seamlessly integrate Cypress tests into your CI pipeline, ensuring continuous quality assurance for both standalone and integrated test cases. Additionally, by verifying code quality, you can maintain a high standard for your test code.