Uses Bitbucket Pipeline but too poor to buy Cypress Dashboard for parallelisation? Look no further...

#cypress #sorrycypress #bitbucket #bitbucketpipeline

If you've been a "Google" developer like me then I'm sure by now, you've heard of sorry-cypress, an alternative open-source tool for the Cypress dashboard that usually comes with a price tag 🤑.

I tried using that on my previous company and was doing my head in for a few months before I finally gave in that's impossible to use that using an old CI pipeline like TeamCity.
Fast-forward to today where my current company is using Bitbucket Pipeline and I thought to myself "finally, just a a unicorn yaml file that does it all!"... well, not too fast, big boy! 👀

Unfortunately, the way docker is used in the Atlassian suite is a bit different (In the interest of "that's not what I came here for", I won't explain it here the way the support team explained it to me - as if anyone cares?). As such, I swallowed my ego (that I can do it on my own), and finally gave in sending a desperate support ticket to the Atlassian team begging to assist me! ✌🏻

To their credit, the Atlassian team went beyond my expectations in terms of support (don't worry, I gave them the highest rating possible in terms of service!). After much iteration and never-ending back and forth time-consuming correspondence ⛑, the one below finally worked in achieving Parallelisation of Cypress tests in Bitbucket Pipeline
using the bitbucket-pipelines.yml:

image: cypress/base:14.16.0
options:
  max-time: 60

definitions:
  caches:
    npm: $HOME/.npm
    cypress: $HOME/.cache/Cypress

  # job definition for running tests
  steps:
    - step: &tests
        name: Run all tests
        size: 2x # (optional) recommended by Atlassian team but adds up to your minutes
        services:
          - docker
        caches:
          - npm
          - node
          - cypress
          - docker
        script:
          - docker run -d -p 1234:1234 agoldis/sorry-cypress-director # port bindings to enable free parallelisation
          - apt update && apt install parallel -y # workaround recommended by Atlassian team that runs background job services in Linux where Bitbucket Pipeline is hosted
          # include below the no. of parallel instances you want your (obviously, the more the better but it intermittently messes up reporting
          - echo "npx cypress run --record --key $CYPRESS_DASHBOARD_KEY --parallel --ci-build-id $BITBUCKET_BUILD_NUMBER --browser chrome --spec cypress/integration/$TESTS;" >> jobs.txt
          - echo "npx cypress run --record --key $CYPRESS_DASHBOARD_KEY --parallel --ci-build-id $BITBUCKET_BUILD_NUMBER --browser chrome --spec cypress/integration/$TESTS;" >> jobs.txt
          - echo "npx cypress run --record --key $CYPRESS_DASHBOARD_KEY --parallel --ci-build-id $BITBUCKET_BUILD_NUMBER --browser chrome --spec cypress/integration/$TESTS;" >> jobs.txt
          - 'parallel -j 3 :::: jobs.txt' # >> logs.log'
        artifacts: # store any generates images and videos as artifacts
          # - logs.log # (optional) include this for better troubleshooting
          - jobs.txt
          - cypress/screenshots/**
          - cypress/videos/**
          - cypress/test-reports/*.xml

    - step: &tests-non-parallel # non-parallel tests
        name: Run all tests
        caches: # not needed as taking it from the docker image
          - node
          - cypress
        script:
          - cypress_version=$HOST npx cypress run --browser chrome --spec cypress/integration/**/*.js # all tests
        artifacts:
          # store any generates images and videos as artifacts
          - cypress/screenshots/**
          - cypress/videos/**
          - cypress/test-reports/mocha/*.json
          - cypress/test-reports/*.xml

pipelines:
  default:
  - step:
      name: Prepare dependencies
      caches:
        - npm
        - cypress
        - node
      script:
        - npm ci
        - npx @bahmutov/print-env BITBUCKET # let's see the environment variables right away
        # - npm audit # check security vulnerabilities of npm packages
        - sed -i -E 's@(api_url:) (.*)@\1 "http://localhost:1234"@g' /*/.cache/Cypress/*/Cypress/resources/app/packages/server/config/app.yml # reconfigure cypress agent to localhost
  - step: *tests

  custom:
    non-parallel: # non-parallel tests
      - step:
          name: Prepare dependencies
          caches:
            - npm
            - cypress
            - node
          script:
            - npm ci
            - npx @bahmutov/print-env BITBUCKET # let's see the environment variables right away
            # - npm audit # check security vulnerabilities of npm packages
            - sed -i -E 's@(api_url:) (.*)@\1 "http://localhost:1234"@g' /*/.cache/Cypress/*/Cypress/resources/app/packages/server/config/app.yml # reconfigure cypress agent to localhost
      - step: *tests-non-parallel

A few things to note:

You can hard-code the CYPRESS_DASHBOARD_KEY and TESTS or set them under the Repository settings > Repository variables section of Bitbucket (as long as you have admin access). CYPRESS_DASHBOARD_KEY can also be a fixed / random value and you don't necessarily need to create an account in Cypress dashboard to generate one. TESTS on the other hand can be set to **/*.js to run all tests or can be more specific e.g. cypress/integration/mytest.js
On your cypress.json file, ensure that the projectId key it set to the same value in CYPRESS_DASHBOARD_KEY
e.g. "projectId": "8ghcrb"
BITBUCKET_BUILD_NUMBER is already a reserved variable in Bitbucket and you would need this parameterised so the parallel tests know its running on the same build.

If you are having xvfb issues, you want to include the command on your scripts as recommended by Cypress team:

- apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb

DEV Community

Uses Bitbucket Pipeline but too poor to buy Cypress Dashboard for parallelisation? Look no further...

Top comments (0)

Read next

Just Joined the Community – Lots of Questions as a Fresher React Developer

Erasure (Apagamento de Tipos)

Simplifying State Management with Redux Toolkit: A Complete Guide

MyTask ToDo CLI Tool...