From fb69e334f8729cd3ffdbe89869db7fcf8fd67129 Mon Sep 17 00:00:00 2001 From: Rui Figueira Date: Sun, 14 Apr 2024 10:45:06 +0100 Subject: [PATCH] fix(codegen): constructed CSSStyleSheet was not for the injected window It caused the following error: DOMException: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Sharing constructed stylesheets in multiple documents is not allowed See https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets#notallowederror --- packages/playwright-core/src/server/injected/highlight.ts | 2 +- .../playwright-core/src/server/injected/recorder/recorder.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/playwright-core/src/server/injected/highlight.ts b/packages/playwright-core/src/server/injected/highlight.ts index bb8c8fd123..bf109f7a08 100644 --- a/packages/playwright-core/src/server/injected/highlight.ts +++ b/packages/playwright-core/src/server/injected/highlight.ts @@ -75,7 +75,7 @@ export class Highlight { this._actionPointElement = document.createElement('x-pw-action-point'); this._actionPointElement.setAttribute('hidden', 'true'); this._glassPaneShadow = this._glassPaneElement.attachShadow({ mode: this._isUnderTest ? 'open' : 'closed' }); - const sheet = new CSSStyleSheet(); + const sheet = new injectedScript.window.CSSStyleSheet(); sheet.replaceSync(highlightCSS); this._glassPaneShadow.adoptedStyleSheets = [sheet]; this._glassPaneShadow.appendChild(this._actionPointElement); diff --git a/packages/playwright-core/src/server/injected/recorder/recorder.ts b/packages/playwright-core/src/server/injected/recorder/recorder.ts index 9a74cbf3b8..740e1e63f2 100644 --- a/packages/playwright-core/src/server/injected/recorder/recorder.ts +++ b/packages/playwright-core/src/server/injected/recorder/recorder.ts @@ -1024,7 +1024,7 @@ export class Recorder { this.overlay = new Overlay(this); this.overlay.setUIState(this.state); } - this._stylesheet = new CSSStyleSheet(); + this._stylesheet = new injectedScript.window.CSSStyleSheet(); this._stylesheet.replaceSync(` body[data-pw-cursor=pointer] *, body[data-pw-cursor=pointer] *::after { cursor: pointer !important; } body[data-pw-cursor=text] *, body[data-pw-cursor=text] *::after { cursor: text !important; }