From 6e6555f1117c71509c32520dc0fd837aae6b3b98 Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Tue, 2 Jan 2024 15:14:56 -0700
Subject: [PATCH 1/2] fix: protocol supports body highlight element

---
 packages/driver/cypress/e2e/cy/snapshot.cy.js | 76 ++++++++++++++-----
 packages/driver/src/cy/snapshots.ts           |  4 +-
 2 files changed, 61 insertions(+), 19 deletions(-)

diff --git a/packages/driver/cypress/e2e/cy/snapshot.cy.js b/packages/driver/cypress/e2e/cy/snapshot.cy.js
index 43c0c853c226..f6733a9af47c 100644
--- a/packages/driver/cypress/e2e/cy/snapshot.cy.js
+++ b/packages/driver/cypress/e2e/cy/snapshot.cy.js
@@ -174,38 +174,78 @@ describe('driver/src/cy/snapshots', () => {
 
         expect(body.get().find('iframe').css('height')).to.equal('70px')
       })
+    })
 
-      it('captures a protocol snapshot with highlight elements', {
-        protocolEnabled: true,
-      }, function () {
+    context('protocol', () => {
+      beforeEach(() => {
         // set to 0 to ensure protocol snapshots are taken
         // since the driver support file sets the value to 1
         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
+      it('captures a protocol snapshot with highlight elements', {
+        protocolEnabled: true,
+      }, function () {
+        cy.window().then((win) => {
+          win.__cypressProtocolMetadata = { frameId: 'test-frame-id' }
+
+          const { elementsToHighlight, name, timestamp } = cy.createSnapshot('snapshot', cy.$$('a'))
+
+          expect(elementsToHighlight?.length).to.equal(3)
+          expect(elementsToHighlight?.[0].selector).to.equal('a:nth-child(2)')
+          expect(elementsToHighlight?.[0].frameId).to.equal('test-frame-id')
+          expect(elementsToHighlight?.[1].selector).to.equal('#hashchange')
+          expect(elementsToHighlight?.[1].frameId).to.equal('test-frame-id')
+          expect(elementsToHighlight?.[2].selector).to.equal('#dimensions')
+          expect(elementsToHighlight?.[2].frameId).to.equal('test-frame-id')
+          expect(name).to.equal('snapshot')
+          expect(timestamp).to.be.a('number')
+        })
+      })
 
-        elWindow.__cypressProtocolMetadata = { frameId: 'test-frame-id' }
+      it('captures a protocol snapshot with an embedded iframe highlight element', {
+        protocolEnabled: true,
+      }, function () {
+        const iframe = $('<iframe src=\'iframe-inner.html\' />')
 
-        const { elementsToHighlight, name, timestamp } = cy.createSnapshot('snapshot', element)
+        iframe.on('load', () => {
+          const ownerDoc = iframe[0].contentDocument
+          const elWindow = iframe[0].contentWindow
+          const element = $(ownerDoc.querySelector('button'))
 
-        delete elWindow.__cypressProtocolMetadata
+          elWindow.__cypressProtocolMetadata = { frameId: 'test-frame-id' }
 
-        expect(elementsToHighlight?.length).to.equal(1)
-        expect(elementsToHighlight?.[0].selector).to.equal('#frame-foo-bar')
-        expect(elementsToHighlight?.[0].frameId).to.equal('test-frame-id')
-        expect(name).to.equal('snapshot')
-        expect(timestamp).to.be.a('number')
+          const { elementsToHighlight, name, timestamp } = cy.createSnapshot('snapshot', element)
+
+          expect(elementsToHighlight?.length).to.equal(1)
+          expect(elementsToHighlight?.[0].selector).to.equal('button:nth-child(1)')
+          expect(elementsToHighlight?.[0].frameId).to.equal('test-frame-id')
+          expect(name).to.equal('snapshot')
+          expect(timestamp).to.be.a('number')
+        })
+
+        iframe.appendTo(cy.$$('body'))
       })
 
-      it('captures a protocol snapshot and excludes a null element', {
+      it('captures a protocol snapshot with a body highlight 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)
+        cy.window().then((win) => {
+          win.__cypressProtocolMetadata = { frameId: 'test-frame-id' }
 
+          const { elementsToHighlight, name, timestamp } = cy.createSnapshot('snapshot', cy.$$('body'))
+
+          expect(elementsToHighlight?.length).to.equal(1)
+          expect(elementsToHighlight?.[0].selector).to.equal('body:nth-child(2)')
+          expect(elementsToHighlight?.[0].frameId).to.equal('test-frame-id')
+          expect(name).to.equal('snapshot')
+          expect(timestamp).to.be.a('number')
+        })
+      })
+
+      it('captures a protocol snapshot and excludes a null element', {
+        protocolEnabled: true,
+      }, function () {
         // create an element but don't append it to the DOM
         const element = $('<div id=\'foo\' />')
 
diff --git a/packages/driver/src/cy/snapshots.ts b/packages/driver/src/cy/snapshots.ts
index cde49e02c3dd..f1f122718c52 100644
--- a/packages/driver/src/cy/snapshots.ts
+++ b/packages/driver/src/cy/snapshots.ts
@@ -271,7 +271,9 @@ export const create = ($$: $Cy['$$'], state: StateFunc) => {
 
             // finder tries to find the shortest unique selector to an element,
             // but since we are more concerned with speed, we set the threshold to 1 and maxNumberOfTries to 0
-            const selector = finder(el, { root: ownerDoc.body, threshold: 1, maxNumberOfTries: 0 })
+            // @ts-expect-error because 'root' can be either Document or Element but is defined as Element
+            // @see https://github.com/antonmedv/finder/issues/75
+            const selector = finder(el, { root: ownerDoc, threshold: 1, maxNumberOfTries: 0 })
             const frameId = elWindow['__cypressProtocolMetadata']?.frameId
 
             return [{ selector, frameId }]

From a4730fba83a124c8ad0a16ce991e4089a4c14b43 Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Wed, 3 Jan 2024 09:49:05 -0700
Subject: [PATCH 2/2] update changelog

---
 cli/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index ed96315e7db9..9f556c0ff6ae 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -7,6 +7,7 @@ _Released 1/2/2024 (PENDING)_
 
 - Now 'node_modules' will not be ignored if a project path or a provided path to spec files contains it. Fixes [#23616](https://github.com/cypress-io/cypress/issues/23616).
 - When generating assertions via Cypress Studio, the preview of the generated assertions now correctly displays the past tense of 'expected' instead of 'expect'. Fixed in [#28593](https://github.com/cypress-io/cypress/pull/28593).
+- Fixed a regression in [`13.6.2`](https://docs.cypress.io/guides/references/changelog/13.6.2) where the `body` element was not highlighted correctly in Test Replay. Fixed in [#28627](https://github.com/cypress-io/cypress/pull/28627).
 
 **Dependency Updates:**