chore: modify highlight selector to include frameId (#27458)

* initial logic for unique frame selector

* messy in progress

* quick test cleanup, need to figure out stub for meta

* update name

* stub test metadata

* revise key

* clean up

* debugging change

* test for error

* test jquery issue

* type

* revert

* update config for test

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

@@ -174,6 +174,31 @@ describe('driver/src/cy/snapshots', () => {
 
         expect(body.get().find('iframe').css('height')).to.equal('70px')
       })
+
+      it('captures highlight elements with frameId', {
+        protocolEnabled: true,
+      }, function () {
+        const previousKept = Cypress.config('numTestsKeptInMemory')
+
+        // set value internal to test, headless default overrides the value
+        Cypress.config('numTestsKeptInMemory', 0)
+
+        const element = $('<iframe id=\'frame-foo-bar\' src=\'generic.html\' />').appendTo(cy.$$('body'))
+        const ownerDoc = element[0].ownerDocument
+        const elWindow = ownerDoc.defaultView
+
+        elWindow.__cypressProtocolMetadata = { frameId: 'test-frame-id' }
+
+        const { elementsToHighlight } = cy.createSnapshot(null, element)
+
+        delete elWindow.__cypressProtocolMetadata
+
+        expect(elementsToHighlight?.length).to.equal(1)
+        expect(elementsToHighlight?.[0].selector).to.equal('#frame-foo-bar')
+        expect(elementsToHighlight?.[0].frameId).to.equal('test-frame-id')
+
+        Cypress.config('numTestsKeptInMemory', previousKept)
+      })
     })
   })
 

packages/driver/src/cy/snapshots.ts

@@ -250,14 +250,29 @@ export const create = ($$: $Cy['$$'], state: StateFunc) => {
     // also make sure numTestsKeptInMemory is 0, otherwise we will want the full snapshot
     // (the driver test's set numTestsKeptInMemory to 1 in run mode to verify the snapshots)
     if (Cypress.config('protocolEnabled') && Cypress.config('numTestsKeptInMemory') === 0) {
-      const snapshot: { name: string, timestamp: number, elToHighlightSelectors?: string[] } = { name, timestamp }
+      const snapshot: {
+        name: string
+        timestamp: number
+        elementsToHighlight?: {
+          selector: string
+          frameId: string
+        }[]
+      } = { name, timestamp }
 
       if (isJqueryElement($elToHighlight)) {
-        snapshot.elToHighlightSelectors = $dom.unwrap($elToHighlight).flatMap((el: HTMLElement) => {
+        snapshot.elementsToHighlight = $dom.unwrap($elToHighlight).flatMap((el: HTMLElement) => {
           try {
-            // if the element is for the AUT document (e.g. not an iframe embedded in the AUT),
-            // find the unique selector, otherwise filter it out
-            return el.ownerDocument === Cypress.state('document') ? [uniqueSelector(el)] : []
+            const ownerDoc = el.ownerDocument
+            const elWindow = ownerDoc.defaultView
+
+            if (elWindow === null) {
+              return []
+            }
+
+            const selector = uniqueSelector(el)
+            const frameId = elWindow['__cypressProtocolMetadata']?.frameId
+
+            return [{ selector, frameId }]
           } catch {
             // the element may not always be found since it's possible for the element to be removed from the DOM
             return []