[PANA-6072] add e2e test

Author: LFBarreto

packages/core/src/domain/telemetry/telemetryEvent.types.ts

@@ -476,6 +476,11 @@ export type TelemetryConfigurationEvent = CommonTelemetryProperties & {
        */
       beta_encode_cookie_options?: boolean
       [k: string]: unknown
+
+      /**
+       * Whether the allowed HTML attributes list is used
+       */
+      use_allowed_html_attributes?: boolean
     }
     [k: string]: unknown
   }

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

@@ -246,9 +246,14 @@ function computeClickActionBase(
   const rect = target.getBoundingClientRect()
   const selector = getSelectorFromElement(target, configuration.actionNameAttribute)
 
-  const composedPathSelector = isExperimentalFeatureEnabled(ExperimentalFeature.COMPOSED_PATH_SELECTOR) && typeof event.composedPath === 'function'
-    ? getComposedPathSelector(event.composedPath(), configuration.actionNameAttribute, configuration.allowedHtmlAttributes || [])
-    : undefined
+  const composedPathSelector =
+    isExperimentalFeatureEnabled(ExperimentalFeature.COMPOSED_PATH_SELECTOR) && typeof event.composedPath === 'function'
+      ? getComposedPathSelector(
+          event.composedPath(),
+          configuration.actionNameAttribute,
+          configuration.allowedHtmlAttributes || []
+        )
+      : undefined
 
   if (selector) {
     updateInteractionSelector(event.timeStamp, selector)

test/e2e/scenario/rum/actions.scenario.ts

@@ -781,3 +781,42 @@ test.describe('custom actions with startAction/stopAction', () => {
       expect(relatedFetch).toBeDefined()
     })
 })
+
+test.describe('action collection with composed path selector', () => {
+  createTest('should not return a composed_path_selector if flag is disabled')
+    .withRum({ trackUserInteractions: true })
+    .withBody(html`
+      <button>Click</button>
+      <button id="my-button" data-test-allowed="test-btn" data-random="secret" class="foo bar baz">Click me</button>
+    `)
+    .run(async ({ intakeRegistry, flushEvents, page }) => {
+      const button = page.locator('#my-button')
+      await button.click()
+      await flushEvents()
+
+      const actionEvents = intakeRegistry.rumActionEvents
+      expect(actionEvents).toHaveLength(1)
+      expect(actionEvents[0]._dd.action?.target?.composed_path_selector).toBeUndefined()
+    })
+  createTest('should return a composed_path_selector if flag is enabled')
+    .withRum({
+      trackUserInteractions: true,
+      enableExperimentalFeatures: ['composed_path_selector'],
+      allowedHtmlAttributes: ['data-test-allowed'],
+    })
+    .withBody(html`
+      <button>Click</button>
+      <button id="my-button" data-test-allowed="test-btn" data-random="secret" class="foo bar baz">Click me</button>
+    `)
+    .run(async ({ intakeRegistry, flushEvents, page }) => {
+      const button = page.locator('#my-button')
+      await button.click()
+      await flushEvents()
+
+      const actionEvents = intakeRegistry.rumActionEvents
+      expect(actionEvents).toHaveLength(1)
+      expect(actionEvents[0]._dd.action?.target?.composed_path_selector).toBe(
+        'BUTTON#my-button[data-test-allowed="test-btn"].bar.baz.foo:nth-child(2):nth-of-type(2);'
+      )
+    })
+})