diff --git a/test/e2e/scenario/recorder/shadowDom.scenario.ts b/test/e2e/scenario/recorder/shadowDom.scenario.ts index 1f9cfceeff..9b32cc8855 100644 --- a/test/e2e/scenario/recorder/shadowDom.scenario.ts +++ b/test/e2e/scenario/recorder/shadowDom.scenario.ts @@ -8,9 +8,12 @@ import { findElementWithTagName, findFullSnapshot, findIncrementalSnapshot, + findNode, findTextContent, findTextNode, } from '@datadog/browser-rum/test/utils' +import { isAdoptedStyleSheetsSupported } from '../../../../packages/core/src/tools/browserDetection' + import type { EventRegistry } from '../../lib/framework' import { flushEvents, createTest, bundleSetup, html } from '../../lib/framework' import { browserExecute } from '../../lib/helpers/browser' @@ -80,6 +83,34 @@ const divShadowDom = ` ` +/** Will generate the following HTML + * ```html + * + * #shadow-root + *
toto
+ *
+ *``` + when called like `` + */ +const divWithStyleShadowDom = ` +` + describe('recorder with shadow DOM', () => { createTest('can record fullsnapshot with the detail inside the shadow root') .withRum({ defaultPrivacyLevel: 'allow', enableExperimentalFeatures: ['record_shadow_dom'] }) @@ -104,6 +135,35 @@ describe('recorder with shadow DOM', () => { expect(textNode?.textContent).toBe('toto') }) + if (isAdoptedStyleSheetsSupported()) { + createTest('can record fullsnapshot with adoptedStylesheet') + .withRum({ defaultPrivacyLevel: 'allow', enableExperimentalFeatures: ['record_shadow_dom'] }) + .withRumInit(initRumAndStartRecording) + .withSetup(bundleSetup) + .withBody( + html` + ${divWithStyleShadowDom} + + ` + ) + .run(async ({ serverEvents }) => { + await flushEvents() + + expect(serverEvents.sessionReplay.length).toBe(1) + + const fullSnapshot = findFullSnapshot(getFirstSegment(serverEvents))! + expect(fullSnapshot).toBeTruthy() + const shadowRoot = findNode( + fullSnapshot.data.node, + (node) => node.type === NodeType.DocumentFragment + ) as DocumentFragmentNode + expect(shadowRoot.isShadowRoot).toBe(true) + expect(shadowRoot.adoptedStyleSheets).toEqual([ + { cssRules: ['div { width: 100%; }'], disabled: false, media: [] }, + ]) + }) + } + createTest('can apply privacy level set from outside or inside the shadow DOM') .withRum({ defaultPrivacyLevel: 'allow', enableExperimentalFeatures: ['record_shadow_dom'] }) .withRumInit(initRumAndStartRecording)