Running cypress in GithubActions on windows environment

Question

I want to run my cypress tests in github actions. There should be a test for firefox, chrome and also edge. Cypress supports all of them: https://github.com/cypress-io/github-action#browser

While firefox and chrome works well, the edge setup is not so faultless. This is because the edge browser runs on a windows system inside github actions.

Here is the yml file which builds the next.js application and then test it with the edge browser:

build:
  runs-on: ubuntu-latest
  steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - uses: actions/setup-node@v2-beta
      with:
        node-version: "12"

    - name: Get yarn cache directory path
      id: yarn-cache-dir-path
      run: echo "::set-output name=dir::$(yarn cache dir)"

    - name: Cache node_modules
      id: yarn-cache
      uses: actions/cache@v2
      with:
        path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}

    - name: Install Dependencies
      run: yarn

    - name: Build
      run: yarn build

    - name: Upload next build
      uses: actions/upload-artifact@v2
      with:
        name: dist
        path: .next

e2e-test-edge:
  needs: build
  runs-on: windows-latest
  strategy:
    matrix:
      node: [12]

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

    - name: Download next build from previous step
      uses: actions/download-artifact@v2
      with:
        name: dist
        path: .next

    - name: Cache Cypress binary
      uses: actions/cache@v2
      with:
        path: ~/.cache/Cypress
        key: cypress-${{ runner.os }}-cypress-${{ github.ref }}-${{ hashFiles('**/package.json') }}

    - name: Get yarn cache directory path
      id: yarn-cache-dir-path
      run: echo "::set-output name=dir::$(yarn cache dir)"

    - name: Cache node_modules
      id: yarn-cache
      uses: actions/cache@v2
      with:
        path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}

    - name: Install Dependencies
      run: yarn install --frozen-lockfile

    - name: Verify Cypress
      env:
        # make sure every Cypress install prints minimal information
        CI: 1
      # print Cypress and OS info
      run: |
        npx cypress verify
        npx cypress info
        npx cypress version
        npx cypress version --component package
        npx cypress version --component binary
        npx cypress version --component electron
        npx cypress version --component node

    - name: Cypress edge browser tests
      uses: cypress-io/github-action@v2
      with:
        browser: edge
        start: yarn start

    - uses: actions/upload-artifact@v2
      if: failure()
      with:
        name: edge-cypress-screenshots
        path: cypress/screenshots
    # Test run video was always captured, so this action uses "always()" condition
    - uses: actions/upload-artifact@v2
      if: always()
      with:
        name: edge-cypress-videos
        path: cypress/videos

So if this pipeline runs in github actions all works well. The caching parts are skipped, because this is the first build, so no cache key matches. Deps are installed as well without errors and also the Cypress verify part looks fine to me:

Run npx cypress verify
  npx cypress verify
  npx cypress info
  npx cypress version
  npx cypress version --component package
  npx cypress version --component binary
  npx cypress version --component electron
  npx cypress version --component node
  shell: C:\Program Files\PowerShell\7\pwsh.EXE -command ". '{0}'"
  env:
    CI: 1

25l[10:09:46]  Verifying Cypress can run C:\Users\runneradmin\AppData\Local\Cypress\Cache\6.0.0\Cypress [started]
[10:09:49]  Verifying Cypress can run C:\Users\runneradmin\AppData\Local\Cypress\Cache\6.0.0\Cypress [completed]
25h25h
Displaying Cypress info...

Detected 3 browsers installed:

1. Chrome
  - Name: chrome
  - Channel: stable
  - Version: 86.0.4240.198
  - Executable: C:\Program Files\Google\Chrome\Application\chrome.exe

2. Edge
  - Name: edge
  - Channel: stable
  - Version: 87.0.664.47
  - Executable: C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe

3. Firefox
  - Name: firefox
  - Channel: stable
  - Version: 82.0.3.7617
  - Executable: C:\Program Files\Mozilla Firefox\firefox.exe

Note: to run these browsers, pass <name>:<channel> to the '--browser' field

Examples:
- cypress run --browser chrome
- cypress run --browser firefox

Learn More: https://on.cypress.io/launching-browsers

Proxy Settings: none detected
Environment Variables: none detected

Application Data: C:\Users\runneradmin\AppData\Roaming\cypress\cy\development
Browser Profiles: C:\Users\runneradmin\AppData\Roaming\cypress\cy\development\browsers
Binary Caches: C:\Users\runneradmin\AppData\Local\Cypress\Cache

Cypress Version: 6.0.0
System Platform: win32 (10.0.17763)
System Memory: 7.52 GB free 4.02 GB
Cypress package version: 6.0.0
Cypress binary version: 6.0.0
Electron version: 11.0.2
Bundled Node version:
12.18.3
6.0.0
6.0.0
11.0.2

12.18.3

But then the Cypress edge browser tests part is reached and the following error occures:

Run cypress-io/github-action@v2
  with:
    browser: edge
    start: yarn start
    record: false
    config-file: cypress.json
C:\windows\system32\cmd.exe /D /S /C "C:\npm\prefix\yarn.cmd --frozen-lockfile"
yarn install v1.22.10
[1/4] Resolving packages...
success Already up-to-date.
Done in 1.08s.
C:\windows\system32\cmd.exe /D /S /C ""C:\Program Files\nodejs\npx.cmd" cypress cache list"
No cached binary versions were found.
C:\windows\system32\cmd.exe /D /S /C ""C:\Program Files\nodejs\npx.cmd" cypress verify"
The cypress npm package is installed, but the Cypress binary is missing.

We expected the binary to be installed here: C:\Users\runneradmin\.cache\Cypress\6.0.0\Cypress\Cypress.exe

Reasons it may be missing:

- You're caching 'node_modules' but are not caching this path: C:\Users\runneradmin\AppData\Local\Cypress\Cache
- You ran 'npm install' at an earlier build step but did not persist: C:\Users\runneradmin\AppData\Local\Cypress\Cache

Properly caching the binary will fix this error and avoid downloading and unzipping Cypress.

Alternatively, you can run 'cypress install' to download the binary again.

https://on.cypress.io/not-installed-ci-error

----------

Platform: win32 (10.0.17763)
Cypress Version: 6.0.0
Error: The process 'C:\Program Files\nodejs\npx.cmd' failed with exit code 1

I tried all the stuff the error message says:

• execute cypress install right before the failing part
• change cache dir to absolute path C:\Users\runneradmin\.cache\Cypress

I also did not found an example of a github action yml with the combination of cypress and windows. Maybe I am too stupid to unterstand the windows machine.

Answer 1

You're caching 'node_modules' but are not caching this path: C:\Users\runneradmin\AppData\Local\Cypress\Cache

I was getting the same error even when I wasn't using actions/cache to cache npm modules. I tried with actions/cache and was still getting the same error.

I fixed this by doing two things:

1- Specify Cypress binary cache path in actions/cache

2- Set the CYPRESS_CACHE_FOLDER in cypress-io/github-action

cypress-run-windows:
    runs-on: windows-latest
    needs: cypress-run-ubuntu
    steps:
      - name: Checkout
        uses: actions/checkout@v1

      - name: Setup node
        uses: actions/setup-node@v1
        with:
          node-version: '12'

      - name: Npm cache
        uses: actions/cache@v2
        id: cache-windows
        with:
          path: |
            C:\Users\runneradmin\AppData\npm-cache
            C:\Users\runneradmin\AppData\Local\Cypress\Cache <-----
          key: ${{ runner.os }}-node-windows-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-windows-

      - name: Npm install
        if: steps.cache-windows.outputs.cache-hit != 'true'
        run: npm install

      - name: Cypress run on Chrome
        uses: cypress-io/github-action@v2
        with:
          start: npm start
          wait-on: http://localhost:4200
          browser: chrome
          install: false
        env:
          CYPRESS_CACHE_FOLDER: C:\Users\runneradmin\AppData\Local\Cypress\Cache <-----