diff --git a/packages/playwright-core/src/server/injected/highlight.ts b/packages/playwright-core/src/server/injected/highlight.ts index bf109f7a08..dfc298cb24 100644 --- a/packages/playwright-core/src/server/injected/highlight.ts +++ b/packages/playwright-core/src/server/injected/highlight.ts @@ -75,9 +75,17 @@ 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 injectedScript.window.CSSStyleSheet(); - sheet.replaceSync(highlightCSS); - this._glassPaneShadow.adoptedStyleSheets = [sheet]; + // workaround for firefox: when taking screenshots, it complains adoptedStyleSheets.push + // is not a function, so we fallback to style injection + if (typeof this._glassPaneShadow.adoptedStyleSheets.push === 'function') { + const sheet = new this._injectedScript.window.CSSStyleSheet(); + sheet.replaceSync(highlightCSS); + this._glassPaneShadow.adoptedStyleSheets.push(sheet); + } else { + const styleElement = this._injectedScript.document.createElement('style'); + styleElement.textContent = highlightCSS; + this._glassPaneShadow.appendChild(styleElement); + } 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 740e1e63f2..6bf98c78e7 100644 --- a/packages/playwright-core/src/server/injected/recorder/recorder.ts +++ b/packages/playwright-core/src/server/injected/recorder/recorder.ts @@ -1057,7 +1057,7 @@ export class Recorder { ]; this.highlight.install(); this.overlay?.install(); - this.document.adoptedStyleSheets = [...this.document.adoptedStyleSheets, this._stylesheet]; + this.document.adoptedStyleSheets.push(this._stylesheet); } private _switchCurrentTool() {