Chromium Devtools bug when using Electron

[lmiller1990]

Current behavior

Repro:

1. launch runner-ct with electron
2. open devtools (right click -> inspect element)
3. run a spec
4. inspect some elements
5. run spec again
6. the devtools sometimes to not refresh

First discovered and noted here: #15777

Desired behavior

Can use devtools with electron.

Test code to reproduce

Versions

This issue also occurs in E2E, running against master@6.8.0 . For me, this is occurring on every spec run.

[JessicaSachs]

Worth mentioning that this bug is still an issue and will be much more problematic if we ship Electron as our default browser for Cy Component Testing.

[flotwig]

Video of this occurring:

15932.repro.mp4

This occurs at least as far back as Cypress 3.8.3 (I'm not able to run an older version).

Does not occur if you use Chrome 96.

If you use ELECTRON_EXTRA_LAUNCH_ARGS=--remote-debugging-port=12345 and visit http://localhost:12345 to debug, the issue still occurs with external DevTools.

---

If I remove the .appendTo() call from both in iframes.tsx, this no longer occurs:

cypress/packages/runner/src/iframe/iframes.jsx

Lines 151 to 168 in a64b72a

	// jQuery is a better fit for managing these iframes, since they need to get
	// wiped out and reset on re-runs and the snapshots are from dom we don't control
	_loadIframes (specPath) {
	const specSrc = `/${this.props.config.namespace}/iframes/${encodeURIComponent(specPath)}`
	const $container = $(this.refs.container).empty()
	const $autIframe = this.autIframe.create(this.props.config).appendTo($container)
	this.autIframe.showInitialBlankContents()
	const $specIframe = $('<iframe />', {
	id: `Your Spec: '${specSrc}'`,
	class: 'spec-iframe',
	}).appendTo($container)
	$specIframe.prop('src', specSrc)
	return $autIframe
	}

If I re-add a simple iframe, it comes right back:

  _loadIframes (specPath) {
    const $container = $(this.refs.container).empty()

    $('<iframe/>', {
      src: 'http://example.com',
    })
    .appendTo($container)
    // .appendTo(document.body) // also fails
  }

Using plain DOM APIs doesn't avoid the issue:

    const i = document.createElement('iframe')

    i.src = 'http://example.com'
    document.body.appendChild(i)

However, if we return early on _loadIframes without making the frames and just try to create this iframe right at the bottom of packages/reporter/src/main.tsx, it does not cause this behavior. So the behavior seems to be something to do with deferred loading of <iframe/>s.

---

I tried to add a <strong> in _loadIframes, just to see if other HTML elements cause this behavior, but it seems to only trigger with an <iframe>.

---

I wanted to test to see what happens if I added an iframe via the DevTools Console, and I got extremely weird behavior where it reloaded this iframe over and over and over and over and over:

weirdness.when.adding.iframe.from.console.mp4

This also does not happen if I follow the same steps in Chrome 96.

The error text is "TypeError: Cannot read properties of undefined (reading 'requestContent')". I found this bug which seems related: https://bugs.chromium.org/p/chromium/issues/detail?id=1267237 However, I'm not sure it's the same since this doesn't actually happen in Chrome. It also doesn't happen in a vanilla Electron app.

If I try to remove all event listeners from the document before adding the iframe, it still does this craziness. If I log the stack trace, it seems like this causes iframe.jsx's componentDidMount to get hit over and over again...

[flotwig]

Using the protocol monitor, you can see {code: -32000, message: "Could not find node with given id"} errors when hovering over the empty elements, leading me to believe this is some kind of bug with the internal state of the DevTools client:

---

I opened an issue on the Electron repo requesting guidance as to how to debug this further: electron/electron#32423

[tbiethman]

Can confirm this is still occurring in develop with Electron bumped to 18.0.4.

[lmiller1990]

I'm sad. The electron browser is basically dead on arrival for anything other than running in CI.

I'm guessing if we ever want this fixed we will need to go deep in electron's code base.

[flotwig]

I can no longer reproduce this in the latest version of Cypress (Electron 21.0.0). @lmiller1990 are you able to reproduce?

[lmiller1990]

Devtools still seems completely "frozen" and not updating for me, I am on Cypress 11.0.1 using component testing. 🤔

Edit: on macos, I will try linux later and see if it's happening there, too. Also, I did not try e2e yet.

[patrickcate]

This is still an issue with Cypress 12.9.0. I've only tested on E2E testing. Running on OSX.

[lmiller1990]

This is fixed by #26573!

[cypress-bot]

Released in 12.12.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v12.12.0, please open a new issue.