From fa971f1bc8afe1db06acb1dbe7604a4a2f757013 Mon Sep 17 00:00:00 2001 From: Matt Schile Date: Fri, 15 Dec 2023 15:30:59 -0700 Subject: [PATCH] perf: improve performance when finding unique selectors for Test Replay (#28536) --- cli/CHANGELOG.md | 4 ++++ packages/driver/package.json | 1 + packages/driver/src/cy/snapshots.ts | 16 ++++----------- packages/network/lib/uri.ts | 2 +- system-tests/__snapshots__/protocol_spec.js | 22 ++++++++++----------- yarn.lock | 5 +++++ 6 files changed, 26 insertions(+), 24 deletions(-) diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index 1d29c521d6d3..eac6691aff4b 100644 --- a/cli/CHANGELOG.md +++ b/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 `
` 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). diff --git a/packages/driver/package.json b/packages/driver/package.json index cd2aa279f8eb..ca196c19ff95 100644 --- a/packages/driver/package.json +++ b/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", diff --git a/packages/driver/src/cy/snapshots.ts b/packages/driver/src/cy/snapshots.ts index a6dd45f3b399..cde49e02c3dd 100644 --- a/packages/driver/src/cy/snapshots.ts +++ b/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 }] diff --git a/packages/network/lib/uri.ts b/packages/network/lib/uri.ts index 12c5943b5d23..c4be3c4cf652 100644 --- a/packages/network/lib/uri.ts +++ b/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 (-______________-) diff --git a/system-tests/__snapshots__/protocol_spec.js b/system-tests/__snapshots__/protocol_spec.js index 2e9ad628f700..eddc97537c1e 100644 --- a/system-tests/__snapshots__/protocol_spec.js +++ b/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)" } ] } diff --git a/yarn.lock b/yarn.lock index 661b3c1a0001..0d8047fe974c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4438,6 +4438,11 @@ lodash "^4.17.15" tmp-promise "^3.0.2" +"@medv/finder@3.1.0": + version "3.1.0" + resolved "https://registry.yarnpkg.com/@medv/finder/-/finder-3.1.0.tgz#e157c68f166ade9f113a1314603365bf81dd8b8c" + integrity sha512-ojkXjR3K0Zz3jnCR80tqPL+0yvbZk/lEodb6RIVjLz7W8RVA2wrw8ym/CzCpXO9SYVUIKHFUpc7jvf8UKfIM3w== + "@microsoft/fetch-event-source@2.0.1": version "2.0.1" resolved "https://registry.yarnpkg.com/@microsoft/fetch-event-source/-/fetch-event-source-2.0.1.tgz#9ceecc94b49fbaa15666e38ae8587f64acce007d"