Cypress component test crashes within github actions

[AndersPfyl]

Logs and screenshots

Versions

• What is this plugin's version? 3.12.3
• What is Cypress version? 13.3.0
• What is your operating system? Github runner uses: ubuntu-latest-8-cores
  • Ubuntu 22.04.3 LTS
• What is the shell? bash
• What is the Node version? 16.20.2
• How do you instrument your application? Instanbul
  • .babelrc contains: {"presets": ["next/babel"], "plugins": ["istanbul"]}
• When running tests, if you open the web application in regular browser, and open DevTools, do you see window.__coverage__ object? Can you paste a screenshot?
  • Coverage works locally (see screenshots), but issue is on runner.
  • 
  • 
• Is there .nyc_output folder? Is there .nyc_output/out.json file. Is it empty? Can you paste at least part of it so we can see the keys and file paths?
  • 
• Do you have any custom NYC settings? No
• Do you run Cypress tests in a Docker container? The runner does

Describe the bug
I have tried adding code coverage to our cypress tests. The coverage works locally but when running within github actions it seems the addition of instrumentation causes cypress to crash with the error There was an error reconnecting to the Chrome DevTools protocol. Please restart the browser. after the first cypress test tries to run.

Link to the repo
Our repo is private and confidential, this will limit some things I can share to help troubleshoot the issue.

[MikeMcC399]

@AndersPfyl

Can you post also your GitHub Actions workflow?

Note that Node.js 16 is no longer supported. It entered end-of-life recently on Sep 11, 2023.

[AndersPfyl]

@MikeMcC399
Workflow:

name: Test (Typescript)
on:
  merge_group:
  workflow_call:
    secrets:
      github-token:
        description: 'Github repo token'
        required: true
  workflow_dispatch:
    inputs:
      runner:
        description: GitHub Actions runner
        required: false
        default: ...  
    secrets:
      github-token:
        description: 'Github repo token'
        required: true
jobs:
  cypress_tests:
      timeout-minutes: 30
      runs-on: ubuntu-latest-8-cores
      strategy:
          fail-fast: false
      steps:
          - name: Checkout code
            uses: actions/checkout@v3
            with:
              fetch-depth: 1
          - name: Install Typescript Dependencies
            uses: ./.github/actions/test_ts
            with:
              github-token: ${{ secrets.GITHUB_TOKEN }}
          - name: Create babelrc
            working-directory: app
            shell: bash
            run: |
              touch .babelrc
              echo '{"presets": ["next/babel"], "plugins": ["istanbul"]}' > .babelrc
          - uses: ./.github/actions/integration

test_ts action:

name: Install Typescript Dependencies
inputs:
  github-token:
    description: 'Github repo token'
    required: true
runs:
  using: composite
  steps:
    - name: Setup Node
      uses: actions/setup-node@v3.1.1
      with:
        node-version: 16.x
        # actions/setup-node has built in functionality to cache yarn global cache directory. Not caching node_modules as it is not best practice to do so. 
        cache: yarn
        cache-dependency-path: app/yarn.lock
    - name: Authenticate with private NPM package
      shell: bash
      run: echo "//npm.pkg.github.com/:_authToken=${{ inputs.github-token }}" > ~/.npmrc
    - name: Install dependencies
      working-directory: app
      shell: bash
      run: |
        npm install -g yarn
        yarn --frozen-lockfile

integration action:

steps:
    - name: Run tests
      working-directory: app
      env:
        TZ: UTC
        # for msw
        API_ENDPOINT: ...
      shell: sh
      run: |
        ./node_modules/.bin/cypress run --component

cypress.config.ts:

import { defineConfig } from 'cypress';
import { rmdir } from 'fs';

export default defineConfig({
  component: {
    devServer: {
      framework: 'next',
      bundler: 'webpack',
      webpackConfig: {
        externals: ['react-dom/client'],
      },
    },
    setupNodeEvents(on, config) {
      require('@cypress/code-coverage/task')(on, config);
      on('task', {
        deleteFolder(folderName) {
          console.log('deleting folder %s', folderName);

          return new Promise((resolve, reject) => {
            rmdir(folderName, { maxRetries: 10, recursive: true }, (err) => {
              if (err) {
                console.error(err);
                return reject(err);
              }
              resolve(null);
            });
          });
        },
      });
    },
  },
  env: {
    BABEL_ENV: 'integration',
    DEBUG: 'code-coverage',
    codeCoverageTasksRegistered: true,
  },
  video: false,
  screenshotOnRunFailure: true,
  viewportWidth: 1920,
  viewportHeight: 900,
  retries: {
    openMode: null,
    runMode: 4,
  },
  fileServerFolder: 'instrumented',
  defaultCommandTimeout: 15000,
  numTestsKeptInMemory: 10,
});

import '@cypress/code-coverage/support'; has been added into our support/component.tsx.

Runner with node version:

Cypress test starting with node version stated:

We're waiting for node to have LTS on 20 before we upgrade - Do you think this be the cause of the issue?

[MikeMcC399]

@AndersPfyl

We're waiting for node to have LTS on 20 before we upgrade - Do you think this be the cause of the issue?

It would only be possible to say that upgrading to a supported version of Node.js would fix your issue if it was a known issue.
It may not be possible to progress with this issue unless you can post a reproducible example, otherwise anybody trying to assist is too much in the dark.

[AndersPfyl]

We will be upgrading to Node 20 soon so we can get back to you after this is done and let you know our results.

[MikeMcC399]

@AndersPfyl

The workflow that you posted was incomplete and didn't show the runner or if you had changed Node.js from the default 18.x version used on ubuntu-latest-*, for instance with actions/setup-node. Is the log of Cypress showing Node Version v16.20.2 as you wrote?

[AndersPfyl]

@MikeMcC399 I have updated my previous comment with more of the workflow and screen shots of the node version being used. Let me know if there is anything else I can provide.

[MikeMcC399]

@AndersPfyl

Thanks for filling in the details! I was attracted to your issue initially since I'm heavily involved in the maintenance of cypress-io/github-action which I thought you might be using. I see from your workflow though that you're using GitHub Actions directly and you don't call the Cypress-specific action at all. That's fine of course. It just means I may not be able to provide much further assistance as code-coverage is not my speciality.

Good luck with your upgrade!

[AndersPfyl]

Upgrade to node 20 and I am still getting the issue initially reported.