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...