Uses Bitbucket Pipeline but too poor to buy Cypress Dashboard for parallelisation? Look no further...
Tags: cypress, sorrycypress, bitbucket, bitbucketpipeline
Published: 2021-08-01 06:40:51

If you've been a *"Google"* developer like me then I'm sure by now, you've heard of [sorry-cypress](https://sorry-cypress.dev/), an alternative open-source tool for the [Cypress dashboard](https://www.cypress.io/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`:
```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`
![Screen Shot 2021-08-01 at 4.18.45 pm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0ir5en2t7tws1nwml1c.png)

- 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](https://support.atlassian.com/bitbucket-cloud/docs/variables-and-secrets/) 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](https://docs.cypress.io/guides/continuous-integration/introduction#Dependencies):
```
- apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
```