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)