[Documentation]: Cypress cloud with NX

[CharlieGreenman]

I was not able to figure out how to upload recordings using cypress-io x Nx with github actions in a timely fashion. I was wondering if it would be possible to create documentation for this action with mono repos such as Nx?

[CharlieGreenman]

Update: was able to solve manually on my own outside of GitHub action. I might post elsewhere momentarily. It did feel however that this process could have been easier and documentation for Nx whomever onus is on, would make lives easier and more money in the bank for cypress

[MikeMcC399]

@CharlieGreenman

Will you describe what problems you ran into, trying to record into the Cypress Cloud from an nx environment? Perhaps you could also give some information about your configuration? React? Angular? etc.

[CharlieGreenman]

Record into cypress cloud. Angular x Nx environment. Cypress github action threw me off because documentation suggested I use it, but I couldn't figure out how to use with Cypress GitHub action.

I just ended creating my own GitHub action for cypress cloud and that did the trick

[MikeMcC399]

@CharlieGreenman

Which type of Nx monorepo are you using? Integrated or Package-Based (see https://nx.dev/concepts/integrated-vs-package-based).

[CharlieGreenman]

Integrated. Single package.json for entire monorepo

[MikeMcC399]

@CharlieGreenman

I was able to get this to work.

With Nx project set up done as follows:

npx create-nx-workspace@latest
integrated
angular
nx-cypress-test
store
css
no

and published to GitHub, the following workflow in .github/workflows will publish to Cypress Cloud using the Cypress GitHub Action:

name: nx-cypress-record

on:
  workflow_dispatch:

env:
  # Set up the Cypress Cloud project ID and record key as environment variables
  # If the Actions variable EXAMPLE_PROJECT_ID is not defined then
  # the projectId is taken from cypress.config.ts
  CYPRESS_PROJECT_ID: ${{ vars.EXAMPLE_PROJECT_ID }}
  CYPRESS_RECORD_KEY: ${{ secrets.EXAMPLE_RECORDING_KEY }}
  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

jobs:

  store:
    runs-on: ubuntu-22.04
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Cypress tests
        uses: cypress-io/github-action@v5
        with:
          start: npx nx serve store
          project: apps/store-e2e
          config: baseUrl=http://localhost:4200
          record: true

[CharlieGreenman]

Cool I was missing the project key value. Docs specifically for nrwl Nx might be helpful

[CharlieGreenman]

Also there's no wait in for local host 4200 here?

[MikeMcC399]

@CharlieGreenman

Docs specifically for nrwl Nx might be helpful

You can leave this issue open for a response from the Cypress.io team. I'm just a community member here, so I can't say what priority they would put on that or if it fits their example / documentation strategy.

Also there's no wait in for local host 4200 here?

It worked for me without using wait-on / wait-on-timeout. Those settings would be available if necessary.

[CharlieGreenman]

Ok noted. Thank you for your help

[gk-bbai]

Is there a recommended way for us to utilize nx affected with the Cypress GitHub Action?

[MikeMcC399]

@gk-bbai

Is there a recommended way for us to utilize nx affected with the Cypress GitHub Action?

This repository does not provide any framework-specific documentation. You should check first if the README documentation provides you with enough information. If not, you may like to ask in the Cypress technical community on Discord if anybody there can provide you with the advice you are looking for.

(click on button)