fix(player): fix clickmap selectors

frontend/app/player/web/Screen/Screen.ts

@@ -3,7 +3,6 @@ import Cursor from './Cursor'
 
 import type { Point, Dimensions } from './types';
 
-
 export type State  = Dimensions
 
 export const INITIAL_STATE: State = {
@@ -182,7 +181,7 @@ export default class Screen {
   getElementBySelector(selector: string) {
     if (!selector) return null;
     try {
-      const safeSelector = selector.replace(/:/g, '\\\\3A ').replace(/\//g, '\\/');
+      const safeSelector = selector.replace(/\//g, '\\/');
       return this.document?.querySelector<HTMLElement>(safeSelector) || null;
     } catch (e) {
       console.error("Can not select element. ", e)

tracker/tracker/CHANGELOG.md

@@ -1,6 +1,7 @@
 ## 5.0.1
 
 - Default text input mode is now Obscured
+- Use `@medv/finder` instead of our own implementation of `getSelector` for better clickmaps experience
 
 ## 5.0.0
 

tracker/tracker/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openreplay/tracker",
   "description": "The OpenReplay tracker main package",
-  "version": "5.0.0",
+  "version": "5.0.1-beta.1",
   "keywords": [
     "logging",
     "replay"
@@ -47,6 +47,7 @@
     "typescript": "^4.9.4"
   },
   "dependencies": {
+    "@medv/finder": "^3.0.0",
     "error-stack-parser": "^2.0.6"
   },
   "engines": {

tracker/tracker/src/main/modules/mouse.ts

@@ -3,26 +3,17 @@ import { hasTag, isSVGElement, isDocument } from '../app/guards.js'
 import { normSpaces, hasOpenreplayAttribute, getLabelAttribute } from '../utils.js'
 import { MouseMove, MouseClick } from '../app/messages.gen.js'
 import { getInputLabel } from './input.js'
+import { finder } from '@medv/finder'
 
 function _getSelector(target: Element, document: Document): string {
-  let el: Element | null = target
-  let selector: string | null = null
-  do {
-    if (el.id) {
-      return `#${el.id}` + (selector ? ` > ${selector}` : '')
-    }
-    selector =
-      el.className
-        .split(' ')
-        .map((cn) => cn.trim())
-        .filter((cn) => cn !== '')
-        .reduce((sel, cn) => `${sel}.${cn}`, el.tagName.toLowerCase()) +
-      (selector ? ` > ${selector}` : '')
-    if (el === document.body) {
-      return selector
-    }
-    el = el.parentElement
-  } while (el !== document.body && el !== null)
+  const selector = finder(target, {
+    root: document.body,
+    seedMinLength: 3,
+    optimizedMinLength: 2,
+    threshold: 1000,
+    maxNumberOfTries: 10_000,
+  })
+
   return selector
 }