Cypress component test crashes within github actions
AndersPfyl opened this issue · comments
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? - 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.
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.
@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
.
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?
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.
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.
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?
@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.
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!
Upgrade to node 20 and I am still getting the issue initially reported.