[PANA-6072] PoC - add composedPathSelector to click actions target

Author: LFBarreto

packages/rum-core/src/domain/action/trackClickActions.spec.ts

@@ -133,6 +133,7 @@ describe('trackClickActions', () => {
           selector: '#button',
           width: 100,
           height: 100,
+          composed_path_selector: 'BUTTON#button[type="button"]:nth-child(1);',
         },
         position: { x: 50, y: 50 },
         events: [domEvent],

packages/rum-core/src/domain/action/trackClickActions.ts

@@ -13,6 +13,7 @@ import type { RumConfiguration } from '../configuration'
 import type { RumMutationRecord } from '../../browser/domMutationObservable'
 import { startEventTracker } from '../eventTracker'
 import type { StoppedEvent, DiscardedEvent, EventTracker } from '../eventTracker'
+import { getComposedPathSelector } from '../getComposedPathSelector'
 import type { ClickChain } from './clickChain'
 import { createClickChain } from './clickChain'
 import { getActionNameFromElement } from './getActionNameFromElement'
@@ -36,6 +37,7 @@ export interface ClickAction {
   nameSource: ActionNameSource
   target?: {
     selector: string | undefined
+    composed_path_selector?: string
     width: number
     height: number
   }
@@ -231,10 +233,16 @@ function computeClickActionBase(
   nodePrivacyLevel: NodePrivacyLevel,
   configuration: RumConfiguration
 ): ClickActionBase {
+  const eventPath = event.composedPath()
+
   const selectorTarget = event.target
   const rect = selectorTarget.getBoundingClientRect()
   const selector = getSelectorFromElement(selectorTarget, configuration.actionNameAttribute)
-
+  const composedPathSelector = getComposedPathSelector(
+    eventPath,
+    configuration.actionNameAttribute,
+    configuration.allowedHtmlAttributes || []
+  )
   if (selector) {
     updateInteractionSelector(event.timeStamp, selector)
   }
@@ -248,6 +256,7 @@ function computeClickActionBase(
       width: Math.round(rect.width),
       height: Math.round(rect.height),
       selector,
+      composed_path_selector: composedPathSelector ?? undefined,
     },
     position: {
       // Use clientX and Y because for SVG element offsetX and Y are relatives to the <svg> element

packages/rum-core/src/domain/configuration/configuration.spec.ts

@@ -631,6 +631,7 @@ describe('serializeRumConfiguration', () => {
       profilingSampleRate: 42,
       propagateTraceBaggage: true,
       betaTrackActionsInShadowDom: true,
+      allowedHtmlAttributes: ['data-testid'],
     }
 
     type MapRumInitConfigurationKey<Key extends string> = Key extends keyof InitConfiguration
@@ -687,6 +688,7 @@ describe('serializeRumConfiguration', () => {
       remote_configuration_id: '123',
       use_remote_configuration_proxy: true,
       profiling_sample_rate: 42,
+      allowed_html_attributes: ['data-testid'],
     })
   })
 })

packages/rum-core/src/domain/configuration/configuration.ts

@@ -281,6 +281,15 @@ export interface RumInitConfiguration extends InitConfiguration {
    * @category Data Collection
    */
   allowedGraphQlUrls?: Array<MatchOption | GraphQlUrlOption> | undefined
+
+  /**
+   * A list of HTML attributes allowed to be used in the action selector collection.
+   * Matches attributes against the event target and its ancestors.
+   * If not provided, the SDK will use a default list of HTML attributes.
+   *
+   * @category Data Collection
+   */
+    allowedHtmlAttributes?: MatchOption[] | undefined
 }
 
 export type HybridInitConfiguration = Omit<RumInitConfiguration, 'applicationId' | 'clientToken'>
@@ -321,6 +330,7 @@ export interface RumConfiguration extends Configuration {
   profilingSampleRate: number
   propagateTraceBaggage: boolean
   allowedGraphQlUrls: GraphQlUrlOption[]
+  allowedHtmlAttributes?: MatchOption[]
 }
 
 export function validateAndBuildRumConfiguration(
@@ -400,6 +410,9 @@ export function validateAndBuildRumConfiguration(
     profilingSampleRate: initConfiguration.profilingSampleRate ?? 0,
     propagateTraceBaggage: !!initConfiguration.propagateTraceBaggage,
     allowedGraphQlUrls,
+    allowedHtmlAttributes: Array.isArray(initConfiguration.allowedHtmlAttributes)
+      ? initConfiguration.allowedHtmlAttributes.filter(isMatchOption)
+      : [],
     ...baseConfiguration,
   }
 }