perf: improve performance when finding unique selectors for Test Replay

cli/CHANGELOG.md

@@ -9,6 +9,10 @@ _Released 12/19/2023 (PENDING)_
 - Fixed a regression in [`13.6.1`](https://docs.cypress.io/guides/references/changelog/13.6.1) where a malformed URI would crash Cypress. Fixes [#28521](https://github.com/cypress-io/cypress/issues/28521).
 - Fixed a regression in [`12.4.0`](https://docs.cypress.io/guides/references/changelog/12.4.0) where erroneous `<br>` tags were displaying in error messages in the Command Log making them less readable. Fixes [#28452](https://github.com/cypress-io/cypress/issues/28452).
 
+**Performance:**
+
+- Improved performance when finding unique selectors for command log snapshots for Test Replay. Addressed in [#28536](https://github.com/cypress-io/cypress/pull/28536).
+
 **Dependency Updates:**
 
 - Updated ts-node from `10.9.1` to `10.9.2`. Fixed in [#28528](https://github.com/cypress-io/cypress/pull/28528).

packages/driver/package.json

@@ -19,6 +19,7 @@
     "@cypress/webpack-dev-server": "0.0.0-development",
     "@cypress/webpack-preprocessor": "0.0.0-development",
     "@cypress/what-is-circular": "1.0.1",
+    "@medv/finder": "3.1.0",
     "@packages/config": "0.0.0-development",
     "@packages/network": "0.0.0-development",
     "@packages/rewriter": "0.0.0-development",

packages/driver/src/cy/snapshots.ts

@@ -1,13 +1,10 @@
 import $ from 'jquery'
 import _ from 'lodash'
-import uniqueSelector from '@cypress/unique-selector'
 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')
+import { finder } from '@medv/finder'
 
 export const HIGHLIGHT_ATTR = 'data-cypress-el'
 
@@ -272,14 +269,9 @@ export const create = ($$: $Cy['$$'], state: StateFunc) => {
               return []
             }
 
-            const selector = uniqueSelector(el)
-
-            if (!selector) {
-              debug('could not find a unique selector for element %o', el)
-
-              return []
-            }
-
+            // 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 })
             const frameId = elWindow['__cypressProtocolMetadata']?.frameId
 
             return [{ selector, frameId }]

packages/network/lib/uri.ts

@@ -6,7 +6,7 @@
 // - https://nodejs.org/api/url.html#url_url_format_urlobject
 
 import _ from 'lodash'
-import url, { URL } from 'url'
+import url from 'url'
 
 // yup, protocol contains a: ':' colon
 // at the end of it (-______________-)

system-tests/__snapshots__/protocol_spec.js

@@ -4814,7 +4814,7 @@ exports['e2e events'] = `
           "timestamp": "Any.Number",
           "elementsToHighlight": [
             {
-              "selector": "h1"
+              "selector": "h1:nth-child(1)"
             }
           ]
         }
@@ -4846,7 +4846,7 @@ exports['e2e events'] = `
           "timestamp": "Any.Number",
           "elementsToHighlight": [
             {
-              "selector": "h1"
+              "selector": "h1:nth-child(1)"
             }
           ]
         },
@@ -4855,7 +4855,7 @@ exports['e2e events'] = `
           "timestamp": "Any.Number",
           "elementsToHighlight": [
             {
-              "selector": "h1"
+              "selector": "h1:nth-child(1)"
             }
           ]
         }
@@ -6277,7 +6277,7 @@ exports['component events - experimentalSingleTabRunMode: true'] = `
           "timestamp": "Any.Number",
           "elementsToHighlight": [
             {
-              "selector": ":nth-child(1) > div"
+              "selector": "div:nth-child(1) > div:nth-child(1)"
             }
           ]
         }
@@ -6308,7 +6308,7 @@ exports['component events - experimentalSingleTabRunMode: true'] = `
           "timestamp": "Any.Number",
           "elementsToHighlight": [
             {
-              "selector": ":nth-child(1) > div"
+              "selector": "div:nth-child(1) > div:nth-child(1)"
             }
           ]
         }
@@ -6561,7 +6561,7 @@ exports['component events - experimentalSingleTabRunMode: true'] = `
           "timestamp": "Any.Number",
           "elementsToHighlight": [
             {
-              "selector": ":nth-child(1) > div"
+              "selector": "div:nth-child(1) > div:nth-child(1)"
             }
           ]
         }
@@ -6592,7 +6592,7 @@ exports['component events - experimentalSingleTabRunMode: true'] = `
           "timestamp": "Any.Number",
           "elementsToHighlight": [
             {
-              "selector": ":nth-child(1) > div"
+              "selector": "div:nth-child(1) > div:nth-child(1)"
             }
           ]
         }
@@ -8016,7 +8016,7 @@ exports['component events - experimentalSingleTabRunMode: false'] = `
           "timestamp": "Any.Number",
           "elementsToHighlight": [
             {
-              "selector": ":nth-child(1) > div"
+              "selector": "div:nth-child(1) > div:nth-child(1)"
             }
           ]
         }
@@ -8047,7 +8047,7 @@ exports['component events - experimentalSingleTabRunMode: false'] = `
           "timestamp": "Any.Number",
           "elementsToHighlight": [
             {
-              "selector": ":nth-child(1) > div"
+              "selector": "div:nth-child(1) > div:nth-child(1)"
             }
           ]
         }
@@ -8300,7 +8300,7 @@ exports['component events - experimentalSingleTabRunMode: false'] = `
           "timestamp": "Any.Number",
           "elementsToHighlight": [
             {
-              "selector": ":nth-child(1) > div"
+              "selector": "div:nth-child(1) > div:nth-child(1)"
             }
           ]
         }
@@ -8331,7 +8331,7 @@ exports['component events - experimentalSingleTabRunMode: false'] = `
           "timestamp": "Any.Number",
           "elementsToHighlight": [
             {
-              "selector": ":nth-child(1) > div"
+              "selector": "div:nth-child(1) > div:nth-child(1)"
             }
           ]
         }

yarn.lock

@@ -4438,6 +4438,11 @@
     lodash "^4.17.15"
     tmp-promise "^3.0.2"
 
+"@medv/[email protected]":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@medv/finder/-/finder-3.1.0.tgz#e157c68f166ade9f113a1314603365bf81dd8b8c"
+  integrity sha512-ojkXjR3K0Zz3jnCR80tqPL+0yvbZk/lEodb6RIVjLz7W8RVA2wrw8ym/CzCpXO9SYVUIKHFUpc7jvf8UKfIM3w==
+
 "@microsoft/[email protected]":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@microsoft/fetch-event-source/-/fetch-event-source-2.0.1.tgz#9ceecc94b49fbaa15666e38ae8587f64acce007d"