chore: exclude null highlight elements from protocol snapshot (#27685)

packages/driver/cypress/e2e/cy/snapshot.cy.js

@@ -198,6 +198,23 @@ describe('driver/src/cy/snapshots', () => {
         expect(name).to.equal('snapshot')
         expect(timestamp).to.be.a('number')
       })
+
+      it('captures a protocol snapshot and excludes a null element', {
+        protocolEnabled: true,
+      }, function () {
+        // set to 0 to ensure protocol snapshots are taken
+        // since the driver support file sets the value to 1
+        Cypress.config('numTestsKeptInMemory', 0)
+
+        // create an element but don't append it to the DOM
+        const element = $('<div id=\'foo\' />')
+
+        const { elementsToHighlight, name, timestamp } = cy.createSnapshot('snapshot', element)
+
+        expect(elementsToHighlight?.length).to.equal(0)
+        expect(name).to.equal('snapshot')
+        expect(timestamp).to.be.a('number')
+      })
     })
   })
 

packages/driver/src/cy/snapshots.ts

@@ -5,6 +5,9 @@ import type { $Cy } from '../cypress/cy'
 import type { StateFunc } from '../cypress/state'
 import $dom from '../dom'
 import { create as createSnapshotsCSS } from './snapshots_css'
+import { debug as Debug } from 'debug'
+
+const debug = Debug('cypress:driver:snapshots')
 
 export const HIGHLIGHT_ATTR = 'data-cypress-el'
 
@@ -270,6 +273,13 @@ export const create = ($$: $Cy['$$'], state: StateFunc) => {
             }
 
             const selector = uniqueSelector(el)
+
+            if (!selector) {
+              debug('could not find a unique selector for element %o', el)
+
+              return []
+            }
+
             const frameId = elWindow['__cypressProtocolMetadata']?.frameId
 
             return [{ selector, frameId }]

system-tests/projects/plugins-async-error/cypress.config.js

@@ -6,7 +6,7 @@ module.exports = {
         return new Promise(() => {
           setTimeout(() => {
             throw new Error('Async error from plugins file')
-          }, 50)
+          }, 250)
         })
       })
 

system-tests/test/plugins_spec.js

@@ -27,9 +27,6 @@ describe('e2e plugins', function () {
   })
 
   it('fails when there is an async error inside an event handler', function () {
-    // TODO: fix flaky test https://github.com/cypress-io/cypress/issues/23493
-    this.retries(30)
-
     return systemTests.exec(this, {
       spec: 'app.cy.js',
       project: 'plugins-async-error',