Cypress Component Tests Not Working after macOS Ventura Upgrade

[mschaefer-gresham]

Current behavior

After upgrading to Ventura, Cypress component testing has stopped working. I've seen other related posts. I tried givng iTerm Full Disk Access, App Management rights, and added it to Developer Tools (all under Privacy and Security).

Cypress hangs here (yarn cypress open --component):

I had node 16 installed before upgrading to Ventura. With node 16, yarn cypress run --component --browser chrome still works. But yarn cypress open --component hangs as above. I installed node 19 after upgrading to Ventura and both commands hang using version 19.

Using node 19, yarn cypress run --component --browser chrome hangs here on the first test:

Another member on my team only had to give App Management rights to iTerm and Webstorm and Cypress is working. But he didn't install a new node version after upgrading or make any other changes. I had also freshly cloned our repo and did a yarn install after the upgrade which he didn't do. I'm guessing that if he made similar changes he would have the same issues.

If I run sudo yarn cypress open --component the tests load, but when I try to run one, it just hangs here:

I also cleared the Cypress cache and re-installed.

Any suggestions would be welcome.

Debug logs

No response

Cypress Version

10.11.0

Node version

19.1.0

Package Manager

yarn

Package Manager Version

1.22.19

Operating system

Mac

Operating System Version

ventura 13.0.1

Other

No response

[mike-plummer]

Hi @mschaefer-gresham , sorry to hear you're having trouble. I have a couple requests:

• Could you run Cypress in debug mode mode and print or attach the entire set of logs here?
• Could you provide a bit of info about what sort of project you're running component tests on? Create React App? Next? Vue?
• Do you see similar behavior for other browsers (Electron, for example)?
• What about if you step through the Cypress launch steps manually? (not provide the --component or --browser flags via CLI and instead use the UI)
• Can you try eliminating non-default apps from the execution chain to see if there's an OS permissions issue somewhere? For example, use Terminal instead of iTerm

[mschaefer-gresham]

Hi @mike-plummer

Could you run Cypress in debug mode mode and print or attach the entire set of logs here?

Can you be a bit more specific about what you would like me to do? I see that you can use the .debug() function inside a test, but my tests aren't even loading.

Could you provide a bit of info about what sort of project you're running component tests on? Create React App? Next? Vue?

React App with webpack, not Create React App.

Do you see similar behavior for other browsers (Electron, for example)?

Yes, Electron hangs on the "Loading your tests" page. Using the Firefox, it hangs on "Opening component testing in Firefox".

What about if you step through the Cypress launch steps manually? (not provide the --component or --browser flags via CLI and instead use the UI)

If I run "cypress open", then using Chrome it doesn't even open the tests. It hangs on "Opening component testing in Chrome".

Can you try eliminating non-default apps from the execution chain to see if there's an OS permissions issue somewhere? For example, use Terminal instead of iTerm

When using Terminal the os indicated that Terminal had no permissions access or modify apps. So I clicked Allow and was directed the App Management settings and I enabled Terminal:

But the result is the same. Cypress hangs on the "Your tests are loading..." page:

[mike-plummer]

Sorry @mschaefer-gresham , I wasn't very clear on the debug logs part. It is possible to enable 'debug-level' logging when running Cypress which gives us more insight into the internal workings of the app. Hopefully that will give us a clue why your tests are hanging

[mschaefer-gresham]

Here is what I ran:

export DEBUG=cypress:* cypress run
sudo yarn unit:watch 

Output:

yarn run v1.22.19
$ cypress open --component
Missing baseUrl in compilerOptions. tsconfig-paths will be skipped
[@cypress/webpack-dev-server]: removing HtmlWebpackPlugin from configuration.
[@cypress/webpack-dev-server]: removing HotModuleReplacementPlugin from configuration.
<i> [webpack-dev-server] [HPM] Proxy created: /api,/auth,/signin-oidc,/signout-callback-oidc  -> https://localhost:8080
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:3000/, http://[::1]:3000/
<i> [webpack-dev-server] Content not from webpack is served from '/Users/matthew/workspace/electra-web/investment-manager-control-ui/app/public' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'
<w> [ReactRefreshPlugin] Hot Module Replacement (HMR) is not enabled! React Refresh requires HMR to function properly.
GET /__/ 200 4.941 ms - -
GET /__/assets/index.fca57d40.css 200 1.166 ms - -
GET /__/assets/polyfills.f25d072f.js 200 2.884 ms - -
GET /__/assets/index.7f41798a.js 200 2.283 ms - -
GET /__cypress/runner/cypress_runner.css 200 1.483 ms - -
GET /__/assets/Specs.3f453167.js 200 1.606 ms - 485
GET /__/assets/CreateSpecModal.315eb5ce.css 200 4.542 ms - 368
GET /__/assets/Index.0a84bae0.css 200 4.643 ms - -
GET /__/assets/ResultCounts.d1534e71.js 200 4.485 ms - -
GET /__/assets/CreateSpecModal.27959c23.js 200 4.551 ms - -
GET /__/assets/SpecPatterns.cc4f466c.js 200 2.316 ms - -
GET /__/assets/user-outline_x16.9882843e.js 200 2.017 ms - -
GET /__/assets/settings_x16.3332126a.js 200 1.493 ms - -
GET /__/assets/Index.e3a780a5.js 200 4.682 ms - -
GET /__/assets/cypress_s.29af549a.png 200 14.926 ms - 4425
GET /chrome-variations/seed?osname=mac&channel=stable&milestone=108 304 618.895 ms - -
POST /ListAccounts?gpsia=1&source=ChromiumBrowser&json=standard 200 618.486 ms - -
GET /__/assets/chrome.98045c79.svg 200 4.939 ms - -
GET /__/assets/electron.fb07f5cc.svg 200 4.802 ms - -
GET /__/assets/firefox.9be61e66.svg 200 4.717 ms - -
GET /__cypress/runner/cypress_runner.js 200 1.653 ms - -
GET /image/ab67616d0000b273644c510e8d4c02ae69028297 200 632.285 ms - -
GET /v1/pages/ChRDaHJvbWUvMTA4LjAuNTM1OS45OBIQCZn9u06bB-cGEgUNE1Cf1A==?alt=proto 200 615.048 ms - -
GET /__/assets/Runner.d2b9b65e.css 200 1.306 ms - -
GET /__/assets/Switch.0dadfea4.js 200 1.496 ms - -
GET /__/assets/refresh_x16.22a357e3.js 200 1.372 ms - -
GET /__/assets/Runner.297a5a78.js 200 1.954 ms - -
GET /v1/pages/ChRDaHJvbWUvMTA4LjAuNTM1OS45OBIQCUuvX4XcrqZJEgUNN5ze0w==?alt=proto 200 519.985 ms - -
POST /v1:GetModels?key=AIzaSyBOti4mM-6x9WDnZIjIeyEU21OpBXqWBgw 200 586.587 ms - -
GET /__cypress/iframes//Users/matthew/workspace/electra-web/investment-manager-control-ui/app/src/features/workspace/features/WorkspaceNavigation/PaneSelector.cy.tsx - - ms - -
254 assets
2930 modules
webpack 5.74.0 compiled successfully in 69772 ms
GET /v4/threatListUpdates:fetch?$req=Ch0KDGdvb2dsZWNocm9tZRINMTA4LjAuNTM1OS45OBopCAUQBBobCg0IBRAGGAEiAzAwMTABEOSoDxoCGAmTXF0uIgQgASACKAEaKQgBEAQaGwoNCAEQBhgBIgMwMDEwARDVvgsaAhgJJO65FSIEIAEgAigBGicIChAIGhkKDQgKEAgYASIDMDAxMAEQBxoCGAlJJtU-IgQgASACKAEaKQgHEAQaGwoNCAcQBhgBIgMwMDEwARCWmQwaAhgJU6ECyyIEIAEgAigBGicIARAEGhkKDQgBEAYYASIDMDAxMAMQFBoCGAn3uAM0IgQgASACKAMaJwgJEAQaGQoNCAkQBhgBIgMwMDEwARAgGgIYCcbhp40iBCABIAIoARooCAgQBBoaCg0ICBAGGAEiAzAwMTABEMQRGgIYCTKpDmwiBCABIAIoARooCAEQCBoaCg0IARAIGAEiAzAwMTAEEJgwGgIYCTU6NrUiBCABIAIoBBopCA0QBBobCg0IDRAGGAEiAzAwMTABEO_UARoCGAmcqH_BIgQgASACKAEaKAgPEAQaGgoNCA8QBhgBIgMwMDEwARCPcxoCGAli9AoVIgQgASACKAEaKQgDEAQaGwoNCAMQBhgBIgMwMDEwARCEtAsaAhgJRThXLSIEIAEgAigBGikIDhAEGhsKDQgOEAYYASIDMDAxMAEQ3-IGGgIYCfLEn5siBCABIAIoARooCBAQBBoaCg0IEBAGGAEiAzAwMTABEIcWGgIYCYt2c-wiBCABIAIoASICCAE=&$ct=application/x-protobuf&key=AIzaSyBOti4mM-6x9WDnZIjIeyEU21OpBXqWBgw 200 555.814 ms - -

It hangs here:

[mike-plummer]

@mschaefer-gresham I think you may need to tweak the command a bit - we're trying to set the DEBUG environment variable to a value of cypress:*, so assuming cypress is invoked by your yarn test:unit command you would instead do something like this:

export DEBUG=cypress:*
yarn unit:watch

or

DEBUG=cypress:* yarn unit:watch

The goal is to get (a ton) of output that looks like this:

  ...
  cypress:cli spawning Cypress with executable: ~/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/MacOS/Cypress +0ms
  cypress:cli piping child STDERR to process STDERR +16ms
  cypress:ts registering ts-node on directory undefined +0ms
  cypress:ts Running without ts-node hook in environment "production" +46ms
  cypress:server:appdata path: ~/Library/Application Support/Cypress/cy/production/cache +0ms
  cypress:server:appdata path: ~/Library/Application Support/Cypress/cy/production/browsers +37ms
  ...

[mschaefer-gresham]

Here's the output from running:

export DEBUG=cypress:*
yarn unit:watch

Without the sudo it only gets this far:

[debug.txt](https://github.com/cypress-io/cypress/files/10210722/debug.txt)

[mike-plummer]

@mschaefer-gresham I took a look at your logs and didn't see any single smoking gun that would explain the odd behavior you're seeing. I also set up a basic React app on macOS 13.0.1 using Node 19.1.0 and Cypress 10.11.0 and did not see any hangs or issues. At this point the main thing that stands out is the use of sudo you're describing - on a standard Unix (including Mac) system Cypress should not require sudo to execute itself or tests; however; if one of the browsers, Node, or some other system artifact is owned by root or another user then that could explain some of the odd behavior you're seeing (and why it works differently for your coworker). The only thing that I saw in the logs was a potential error running the git executable to get file status (which shouldn't by itself cause issues, but could be a clue), which tells me maybe there are filesystem/executable permission issues at play.

Without a reproducible example to debug through it's difficult to know where to start, but I would see if perhaps Node was accidentally installed via sudo (did you do it via Homebrew, perhaps?). Is your user able to invoke node -v and node -e "console.log('Node successfully ran some code!')" and get valid output (not errors)?

[mschaefer-gresham]

Thank you for investigating. That's unfortunate you didn't find anything. I'm totally stuck at the moment. The tests won't run.

I tried to re-installed Cypress and tried getting a fresh set of node_modules. I also uninstalled nvm & node and re-installed. Not sure what to try now.

[mike-plummer]

@mschaefer-gresham Hmm, this is definitely frustrating, especially since the project seems to work for your coworker. These environment-specific issues are always the hardest to debug. I'll poll some other team members on the chance they notice something in the logs that I missed.

In the interim there are a couple basic troubleshooting steps I can offer:

1. Look at the actual browser devtools console to see if there's a runtime error percolating up there. Can get your tests to the point where they hang at the "Your tests are loading" view and see if there's anything in the browser "console" or "network" tabs?
2. Try bumping your version of Cypress - version 12.0.2 has been out for a few days and there may have been some fixes since v10.11.0 that could resolve your problem.
3. Do you see the same hanging behavior with a brand-new "pure" Cypress react project? There are steps to scaffold a "quickstart" React project here

[mschaefer-gresham]

Here's the outcome of each point above:

1. Nothing in the console and this is the network tab:

2. Same result in my project after upgrading to 12.0.2.

3. Same result using a brand-new pure project (debug log attached).

[lmiller1990]

I see this in the logs

2022-12-13T07:17:22.795Z cypress:cli spawn args [ '--no-sandbox', '--', '--project', '/Users/matthew/workspace/react/cypress-ventura-test', '--cwd', '/Users/matthew/workspace/react/cypress-ventura-test', '--userNodePath', '/Users/matthew/.nvm/versions/node/v19.2.0/bin/node', '--userNodeVersion', '19.2.0' ] { detached: false, stdio: [ 'inherit', 'inherit', 'pipe' ] }
2022-12-13T07:17:22.795Z cypress:cli spawning Cypress with executable: /Users/matthew/Library/Caches/Cypress/12.1.0/Cypress.app/Contents/MacOS/Cypress
2022-12-13T07:17:22.797Z cypress:cli piping child STDERR to process STDERR

I wonder if this is relevant.

I am updating my macbook to Ventura right now, so I can try to reproduce and help out with debugging.

[lmiller1990]

I also cannot reproduce. I tried various things, no luck. Related? #25231

[mschaefer-gresham]

@mike-plummer @lmiller1990 here is a bit more information. Using the create react app project, if I go to Developer Tools (Cypress menu) and select Reload while Cypress is hanging (the initial Cypress page) then I get the following error:

Error: EACCES: permission denied, open '/Users/matthew/Library/Application Support/Cypress/cy/production/browsers/chrome-stable/interactive/Local State'

Using my webpack project I get:

Error: EACCES: permission denied, open '/Users/matthew/Library/Application Support/Cypress/cy/production/browsers/chrome-stable/interactive/Default/Secure Preferences'

I deleted /Users/matthew/Library/Application Support/Cypress/ (this required using sudo) and now the cypress react app tests are running. However, my project's tests still aren't running. I now get past the initial Cypress page and can see the loaded specs in Chrome. But when I try to run a spec I hangs on the "Your tests are loading...." step.

I tried deleting my project and repulling the dependencies but it didn't help.

Any ideas?

[lmiller1990]

We write to a preferences file to save some local state (like the current filter when searching for specs). Webpack also writes to a file when it bundles.

As to why this is throwing EACCES, I am not sure... something strange is happening with your permissions. I wonder why your (terminal/Cypress App) doesn't have permission to access the file system? I googled "ventura permissions error" and various things come up, mainly related to Virus Scanners breaking due to the same issue, but no obvious "do this to fix it" (assuming you tried the usual things, like playing with the permissions in System Preferences?)

If you do ls -l on that file that's erroring, you see something like this:

$ ls -l blank.pdf
-rw-rw-r-- 1 lachlan lachlan 484258 Mar  5  2022 blank.pdf

First is the owner, second is the group. What does your terminal show for this command?

This issue seems environment specific. I'm sorry I can't be of more assistance.

[lmiller1990]

I think these are the same: #25231

[mschaefer-gresham]

I tried running this command:

find . -iname ‘Cypress*’ -type d

And I get the following:

find: ./usr/sbin/authserver: Permission denied
find: ./Library/Application Support/Apple/Screen Sharing/Keys: Permission denied
find: ./Library/Application Support/Apple/ParentalControls/Users: Permission denied
find: ./Library/Application Support/Apple/AssetCache/Data: Permission denied
find: ./Library/Application Support/ApplePushService: Permission denied
find: ./Library/OSAnalytics/Preferences/Library: Permission denied
find: ./Library/Caches/com.google.SoftwareUpdate.0: Permission denied
find: ./Library/Caches/com.apple.iconservices.store: Permission denied
find: ./Library/Caches/com.apple.aned: Operation not permitted
find: ./System/Library/DirectoryServices/DefaultLocalDB/Default: Permission denied
find: ./System/Library/Templates/Data/Library/Application Support/Apple/ParentalControls/Users: Permission denied
find: ./System/Library/Templates/Data/private/etc/cups/certs: Permission denied
find: ./System/Library/Templates/Data/private/var/install: Permission denied
find: ./System/Library/Templates/Data/private/var/ma: Permission denied
find: ./System/Library/Templates/Data/private/var/spool/mqueue: Permission denied
find: ./System/Library/Templates/Data/private/var/spool/postfix/saved: Permission denied
find: ./System/Library/Templates/Data/private/var/spool/postfix/trace: Permission denied
find: ./System/Library/Templates/Data/private/var/spool/postfix/defer: Permission denied
find: ./System/Library/Templates/Data/private/var/spool/postfix/flush: Permission denied
...

I ran First Aid via Disk Utility and reset my user permisssions:

diskutil resetUserPermissions / ` id -u`

This fixed this issue above. But Cypress still hanging when I try to run a spec file.

[mschaefer-gresham]

What I see now is that the test file is pending in Chrome:

[mschaefer-gresham]

@lmiller1990 @mike-plummer I finally got my tests running. It was a combination of reseting my user permissions and reverting to node 16.19.0. I was using node 18.12.1 and found this issue this morning 23114 related to tests hanging with node 18.

[mschaefer-gresham]

@lmiller1990 @mike-plummer node version 19 was hanging as well. I applied the corresponding fix provided in 23114 by adding the following to my webpack config:

devServer: {
        host: '127.0.0.1',
        <other settings>
    },

And the tests started running. I'm using the latest Cypress version 12.2.

Is 23114 included in 12.2 or earlier, or is this a new issue?

[lmiller1990]

What version of Vite are you using? I think they fixed that in v4.

#23114 is most certainly live, we do minor releases every 2 weeks.

Nice debugging! I am using Cypress with Vite (v4) and Node.js 18, I didn't have this happen, but I did not try Node.js 19 yet.

[mschaefer-gresham]

@lmiller1990 that's the thing. I'm not using vite. I'm using webpack (5.74.0) and webpack-dev-server (4.11.1).

[lmiller1990]

I think #23114 was fixing Vite. I think we need similar patch in webpack to set the host correctly. We should do this.

I can get this into our next sprint (early Feb). If you'd like to try and make this patch earlier, it would go in npm/webpack-dev-server (only a few files there, shouldn't be too hard to the find the correct location). If not, we can pick it up in Feb.

Thank you for the debugging and patience!

[mike-plummer]

Hey team! Please add your planning poker estimate with Zenhub @astone123 @ZachJW34 @marktnoonan @warrensplayer @lmiller1990

[lmiller1990]

#25861 will fix it.