feat(replays): Display component name in selector when available (#68840)

Adds a display selector so the selector is more readable if there's a
component name.
<img width="1134" alt="image"
src="https://github.com/getsentry/sentry/assets/55311782/34f41b68-b1b4-4430-beed-010c13bf6fcc">

Related to #64673

Author: c298lee

static/app/views/replays/deadRageClick/constructSelector.spec.tsx

@@ -7,107 +7,121 @@ describe('constructSelector', () => {
         alt: 'view more',
         aria_label: 'View More',
         class: ['classA'],
+        component_name: 'TestButton',
         id: 'ID1',
         role: 'button',
         tag: 'button',
         testid: 'button-test',
         title: 'cool title',
       },
       fullSelector:
-        'button#ID1.classA[role="button"][aria="View More"][data-test-id="button-test"][alt="view more"][title="cool title"]',
+        'button#ID1.classA[role="button"][aria="View More"][data-test-id="button-test"][alt="view more"][title="cool title"][data-sentry-component="TestButton"]',
       selector:
-        'button#ID1.classA[role="button"][aria="View More"][data-test-id="button-test"][alt="view more"][title="cool title"]',
+        'TestButton#ID1[role="button"][aria="View More"][data-test-id="button-test"][alt="view more"][title="cool title"]',
     },
     {
       element: {
         alt: '',
         aria_label: '',
         class: ['', ''],
+        component_name: '',
         id: '',
         role: '',
         tag: 'a',
         testid: '',
         title: '',
       },
-      fullSelector: 'a[role=""][aria=""][data-test-id=""][alt=""][title=""]',
+      fullSelector:
+        'a[role=""][aria=""][data-test-id=""][alt=""][title=""][data-sentry-component=""]',
       selector: 'a',
     },
     {
       element: {
         alt: '',
         aria_label: '',
         class: ['classA', ''],
+        component_name: '',
         id: '',
         role: '',
         tag: 'a',
         testid: '',
         title: '',
       },
-      fullSelector: 'a.classA[role=""][aria=""][data-test-id=""][alt=""][title=""]',
+      fullSelector:
+        'a.classA[role=""][aria=""][data-test-id=""][alt=""][title=""][data-sentry-component=""]',
       selector: 'a.classA',
     },
     {
       element: {
         alt: '',
         aria_label: '',
         class: ['classA', ''],
+        component_name: '',
         id: 'ID2',
         role: '',
         tag: 'a',
         testid: '',
         title: '',
       },
-      fullSelector: 'a#ID2.classA[role=""][aria=""][data-test-id=""][alt=""][title=""]',
+      fullSelector:
+        'a#ID2.classA[role=""][aria=""][data-test-id=""][alt=""][title=""][data-sentry-component=""]',
       selector: 'a#ID2.classA',
     },
     {
       element: {
         alt: '',
         aria_label: '',
         class: ['classA', 'classB'],
+        component_name: 'TestButton',
         id: 'ID2',
         role: '',
         tag: 'a',
         testid: '',
         title: '',
       },
       fullSelector:
-        'a#ID2.classA.classB[role=""][aria=""][data-test-id=""][alt=""][title=""]',
-      selector: 'a#ID2.classA.classB',
+        'a#ID2.classA.classB[role=""][aria=""][data-test-id=""][alt=""][title=""][data-sentry-component="TestButton"]',
+      selector: 'TestButton#ID2',
     },
     {
       element: {
         alt: '',
         aria_label: 'hello',
         class: ['classA', 'classB'],
+        component_name: '',
         id: 'ID2',
         role: '',
         tag: 'a',
         testid: '',
         title: '',
       },
       fullSelector:
-        'a#ID2.classA.classB[role=""][aria="hello"][data-test-id=""][alt=""][title=""]',
+        'a#ID2.classA.classB[role=""][aria="hello"][data-test-id=""][alt=""][title=""][data-sentry-component=""]',
       selector: 'a#ID2.classA.classB[aria="hello"]',
     },
     {
       element: {
         alt: '',
         aria_label: 'hello',
+        component_name: 'TestHello',
         class: [''],
         id: 'ID2',
         role: '',
         tag: 'a',
         testid: '',
         title: '',
       },
-      fullSelector: 'a#ID2[role=""][aria="hello"][data-test-id=""][alt=""][title=""]',
-      selector: 'a#ID2[aria="hello"]',
+      fullSelector:
+        'a#ID2[role=""][aria="hello"][data-test-id=""][alt=""][title=""][data-sentry-component="TestHello"]',
+      selector: 'TestHello#ID2[aria="hello"]',
     },
   ])(
     'should construct the correct trimmed selector and full selector, for each element in the list',
     ({element, fullSelector, selector}) => {
-      expect(constructSelector(element)).toStrictEqual({fullSelector, selector});
+      expect(constructSelector(element)).toStrictEqual({
+        fullSelector,
+        selector,
+      });
     }
   );
 });

static/app/views/replays/deadRageClick/constructSelector.tsx

@@ -4,33 +4,53 @@ function trimAttribute(elementAttribute, fullAlltribute) {
   return elementAttribute === '' ? '' : fullAlltribute;
 }
 
+// fullSelector is used for searches since searching without all attributes returns too many replays
+// selector is the selector shown in the selector widget/table and when you hover
 export default function constructSelector(element: ReplayClickElement) {
-  const fullAlt = '[alt="' + element.alt + '"]';
-  const alt = trimAttribute(element.alt, fullAlt);
+  const tag = element.tag;
 
-  const fullAriaLabel = '[aria="' + element.aria_label + '"]';
-  const ariaLabel = trimAttribute(element.aria_label, fullAriaLabel);
+  const id = trimAttribute(element.id, '#' + element.id);
 
   const trimClass = element.class.filter(e => e !== '');
   const classWithPeriod = trimClass.join('.');
   const classNoPeriod = classWithPeriod.replace('.', '');
   const classes = trimAttribute(classNoPeriod, '.' + classWithPeriod);
 
-  const id = trimAttribute(element.id, '#' + element.id);
+  const fullAlt = '[alt="' + element.alt + '"]';
+  const alt = trimAttribute(element.alt, fullAlt);
+
+  const fullAriaLabel = '[aria="' + element.aria_label + '"]';
+  const ariaLabel = trimAttribute(element.aria_label, fullAriaLabel);
 
   const fullRole = '[role="' + element.role + '"]';
   const role = trimAttribute(element.role, fullRole);
 
-  const tag = element.tag;
-
   const fullTestId = '[data-test-id="' + element.testid + '"]';
   const testId = trimAttribute(element.testid, fullTestId);
 
   const fullTitle = '[title="' + element.title + '"]';
   const title = trimAttribute(element.title, fullTitle);
 
+  const fullComponentName = '[data-sentry-component="' + element.component_name + '"]';
+  const componentName = trimAttribute(element.component_name, fullComponentName);
+
   const fullSelector =
-    tag + id + classes + fullRole + fullAriaLabel + fullTestId + fullAlt + fullTitle;
-  const selector = tag + id + classes + role + ariaLabel + testId + alt + title;
+    tag +
+    id +
+    classes +
+    fullRole +
+    fullAriaLabel +
+    fullTestId +
+    fullAlt +
+    fullTitle +
+    fullComponentName;
+  const selector =
+    (componentName ? element.component_name + id : tag + id + classes) +
+    role +
+    ariaLabel +
+    testId +
+    alt +
+    title;
+
   return {fullSelector, selector};
 }

static/app/views/replays/types.tsx

@@ -176,7 +176,11 @@ export interface ReplayError {
 
 export type DeadRageSelectorItem = {
   aria_label: string;
-  dom_element: {fullSelector: string; projectId: number; selector: string};
+  dom_element: {
+    fullSelector: string;
+    projectId: number;
+    selector: string;
+  };
   element: string;
   project_id: number;
   count_dead_clicks?: number;
@@ -197,6 +201,7 @@ export type ReplayClickElement = {
   alt: string;
   aria_label: string;
   class: string[];
+  component_name: string;
   id: string;
   role: string;
   tag: string;