lighthouse 8.6.0-dev.20211102 → 8.6.0-dev.20211103

package/report/renderer/element-screenshot-renderer.js

@@ -18,7 +18,7 @@
 /**
  * @typedef InstallOverlayFeatureParams
  * @property {DOM} dom
- * @property {Element} reportEl
+ * @property {Element} rootEl
  * @property {Element} overlayContainerEl
  * @property {LH.Audit.Details.FullPageScreenshot} fullPageScreenshot
  */
@@ -135,7 +135,7 @@ export class ElementScreenshotRenderer {
    * @param {LH.Audit.Details.FullPageScreenshot['screenshot']} screenshot
    */
   static installFullPageScreenshot(el, screenshot) {
-    el.style.setProperty('--element-screenshot-url', `url(${screenshot.data})`);
+    el.style.setProperty('--element-screenshot-url', `url('${screenshot.data}')`);
   }
 
   /**
@@ -143,14 +143,14 @@ export class ElementScreenshotRenderer {
    * @param {InstallOverlayFeatureParams} opts
    */
   static installOverlayFeature(opts) {
-    const {dom, reportEl, overlayContainerEl, fullPageScreenshot} = opts;
+    const {dom, rootEl, overlayContainerEl, fullPageScreenshot} = opts;
     const screenshotOverlayClass = 'lh-screenshot-overlay--enabled';
     // Don't install the feature more than once.
-    if (reportEl.classList.contains(screenshotOverlayClass)) return;
-    reportEl.classList.add(screenshotOverlayClass);
+    if (rootEl.classList.contains(screenshotOverlayClass)) return;
+    rootEl.classList.add(screenshotOverlayClass);
 
     // Add a single listener to the provided element to handle all clicks within (event delegation).
-    reportEl.addEventListener('click', e => {
+    rootEl.addEventListener('click', e => {
       const target = /** @type {?HTMLElement} */ (e.target);
       if (!target) return;
       // Only activate the overlay for clicks on the screenshot *preview* of an element, not the full-size too.

package/report/renderer/features-util.js

@@ -14,7 +14,7 @@
  * @param {boolean} [force]
  */
 export function toggleDarkTheme(dom, force) {
-  const el = dom.find('.lh-vars', dom.document());
+  const el = dom.rootEl;
   // This seems unnecessary, but in DevTools, passing "undefined" as the second
   // parameter acts like passing "false".
   // https://github.com/ChromeDevTools/devtools-frontend/blob/dd6a6d4153647c2a4203c327c595692c5e0a4256/front_end/dom_extension/DOMExtension.js#L809-L819

package/report/renderer/report-renderer.js

@@ -36,22 +36,43 @@ export class ReportRenderer {
   constructor(dom) {
     /** @type {DOM} */
     this._dom = dom;
+    /** @type {LH.Renderer.Options} */
+    this._opts = {};
   }
 
   /**
    * @param {LH.Result} lhr
-   * @param {Element} container Parent element to render the report into.
+   * @param {HTMLElement?} rootEl Report root element containing the report
+   * @param {LH.Renderer.Options=} opts
    * @return {!Element}
    */
-  renderReport(lhr, container) {
+  renderReport(lhr, rootEl, opts) {
+    // Allow legacy report rendering API
+    if (!this._dom.rootEl && rootEl) {
+      console.warn('Please adopt the new report API in renderer/api.js.');
+      const closestRoot = rootEl.closest('.lh-root');
+      if (closestRoot) {
+        this._dom.rootEl = /** @type {HTMLElement} */ (closestRoot);
+      } else {
+        rootEl.classList.add('lh-root', 'lh-vars');
+        this._dom.rootEl = rootEl;
+      }
+    } else if (this._dom.rootEl && rootEl) {
+      // Handle legacy flow-report case
+      this._dom.rootEl = rootEl;
+    }
+    if (opts) {
+      this._opts = opts;
+    }
+
     this._dom.setLighthouseChannel(lhr.configSettings.channel || 'unknown');
 
     const report = Util.prepareReportResult(lhr);
 
-    container.textContent = ''; // Remove previous report.
-    container.appendChild(this._renderReport(report));
+    this._dom.rootEl.textContent = ''; // Remove previous report.
+    this._dom.rootEl.appendChild(this._renderReport(report));
 
-    return container;
+    return this._dom.rootEl;
   }
 
   /**
@@ -197,7 +218,7 @@ export class ReportRenderer {
         gaugeWrapperEl.addEventListener('click', e => {
           if (!gaugeWrapperEl.matches('[href^="#"]')) return;
           const selector = gaugeWrapperEl.getAttribute('href');
-          const reportRoot = gaugeWrapperEl.closest('.lh-vars');
+          const reportRoot = this._dom.rootEl;
           if (!selector || !reportRoot) return;
           const destEl = this._dom.find(selector, reportRoot);
           e.preventDefault();
@@ -301,9 +322,11 @@ export class ReportRenderer {
 
     const reportFragment = this._dom.createFragment();
     reportFragment.append(this._dom.createComponent('styles'));
-    const topbarDocumentFragment = this._renderReportTopbar(report);
 
-    reportFragment.appendChild(topbarDocumentFragment);
+    if (!this._opts.omitTopbar) {
+      reportFragment.appendChild(this._renderReportTopbar(report));
+    }
+
     reportFragment.appendChild(reportContainer);
     reportContainer.appendChild(headerContainer);
     reportContainer.appendChild(reportSection);
@@ -311,7 +334,7 @@ export class ReportRenderer {
 
     if (fullPageScreenshot) {
       ElementScreenshotRenderer.installFullPageScreenshot(
-        reportContainer, fullPageScreenshot.screenshot);
+        this._dom.rootEl, fullPageScreenshot.screenshot);
     }
 
     return reportFragment;

package/report/renderer/report-ui-features.js

@@ -40,16 +40,17 @@ function getTableRows(tableEl) {
 export class ReportUIFeatures {
   /**
    * @param {DOM} dom
+   * @param {LH.Renderer.Options} opts
    */
-  constructor(dom) {
+  constructor(dom, opts = {}) {
     /** @type {LH.Result} */
     this.json; // eslint-disable-line no-unused-expressions
     /** @type {DOM} */
     this._dom = dom;
-    /** @type {Document} */
-    this._document = this._dom.document();
-    this._topbar = new TopbarFeatures(this, dom);
 
+    this._opts = opts;
+
+    this._topbar = opts.omitTopbar ? null : new TopbarFeatures(this, dom);
     this.onMediaQueryChange = this.onMediaQueryChange.bind(this);
   }
 
@@ -61,16 +62,19 @@ export class ReportUIFeatures {
   initFeatures(lhr) {
     this.json = lhr;
 
-    this._topbar.enable(lhr);
-    this._topbar.resetUIState();
+    if (this._topbar) {
+      this._topbar.enable(lhr);
+      this._topbar.resetUIState();
+    }
     this._setupMediaQueryListeners();
     this._setupThirdPartyFilter();
-    this._setupElementScreenshotOverlay(this._dom.find('.lh-container', this._document));
+    this._setupElementScreenshotOverlay(this._dom.rootEl);
 
     let turnOffTheLights = false;
     // Do not query the system preferences for DevTools - DevTools should only apply dark theme
     // if dark is selected in the settings panel.
-    if (!this._dom.isDevTools() && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    const disableDarkMode = this._dom.isDevTools() || this._opts.disableAutoDarkModeAndFireworks;
+    if (!disableDarkMode && window.matchMedia('(prefers-color-scheme: dark)').matches) {
       turnOffTheLights = true;
     }
 
@@ -94,7 +98,7 @@ export class ReportUIFeatures {
     const hasMetricError = lhr.categories.performance && lhr.categories.performance.auditRefs
       .some(audit => Boolean(audit.group === 'metrics' && lhr.audits[audit.id].errorMessage));
     if (hasMetricError) {
-      const toggleInputEl = this._dom.find('input.lh-metrics-toggle__input', this._document);
+      const toggleInputEl = this._dom.find('input.lh-metrics-toggle__input', this._dom.rootEl);
       toggleInputEl.checked = true;
     }
 
@@ -109,7 +113,7 @@ export class ReportUIFeatures {
     }
 
     // Fill in all i18n data.
-    for (const node of this._dom.findAll('[data-i18n]', this._dom.document())) {
+    for (const node of this._dom.findAll('[data-i18n]', this._dom.rootEl)) {
       // These strings are guaranteed to (at least) have a default English string in Util.UIStrings,
       // so this cannot be undefined as long as `report-ui-features.data-i18n` test passes.
       const i18nKey = node.getAttribute('data-i18n');
@@ -119,18 +123,15 @@ export class ReportUIFeatures {
   }
 
   /**
-   * @param {{container?: Element, text: string, icon?: string, onClick: () => void}} opts
+   * @param {{text: string, icon?: string, onClick: () => void}} opts
    */
   addButton(opts) {
-    // report-ui-features doesn't have a reference to the root report el, and PSI has
-    // 2 reports on the page (and not even attached to DOM when installFeatures is called..)
-    // so we need a container option to specify where the element should go.
-    const metricsEl = this._document.querySelector('.lh-audit-group--metrics');
-    const containerEl = opts.container || metricsEl;
-    if (!containerEl) return;
+    // Use qSA directly to as we don't want to throw (if this element is missing).
+    const metricsEl = this._dom.rootEl.querySelector('.lh-audit-group--metrics');
+    if (!metricsEl) return;
 
-    let buttonsEl = containerEl.querySelector('.lh-buttons');
-    if (!buttonsEl) buttonsEl = this._dom.createChildOf(containerEl, 'div', 'lh-buttons');
+    let buttonsEl = metricsEl.querySelector('.lh-buttons');
+    if (!buttonsEl) buttonsEl = this._dom.createChildOf(metricsEl, 'div', 'lh-buttons');
 
     const classes = [
       'lh-button',
@@ -150,8 +151,10 @@ export class ReportUIFeatures {
    * @return {string}
    */
   getReportHtml() {
-    this._topbar.resetUIState();
-    return this._document.documentElement.outerHTML;
+    if (this._topbar) {
+      this._topbar.resetUIState();
+    }
+    return `<!doctype html><body>${this._dom.rootEl.outerHTML}`;
   }
 
   /**
@@ -163,7 +166,7 @@ export class ReportUIFeatures {
   }
 
   _enableFireworks() {
-    const scoresContainer = this._dom.find('.lh-scores-container', this._document);
+    const scoresContainer = this._dom.find('.lh-scores-container', this._dom.rootEl);
     scoresContainer.classList.add('lh-score100');
     scoresContainer.addEventListener('click', _ => {
       scoresContainer.classList.toggle('lh-fireworks-paused');
@@ -183,7 +186,9 @@ export class ReportUIFeatures {
    * be in their closed state (not opened) and the templates should be unstamped.
    */
   _resetUIState() {
-    this._topbar.resetUIState();
+    if (this._topbar) {
+      this._topbar.resetUIState();
+    }
   }
 
   /**
@@ -191,8 +196,7 @@ export class ReportUIFeatures {
    * @param {MediaQueryList|MediaQueryListEvent} mql
    */
   onMediaQueryChange(mql) {
-    const root = this._dom.find('.lh-root', this._document);
-    root.classList.toggle('lh-narrow', mql.matches);
+    this._dom.rootEl.classList.toggle('lh-narrow', mql.matches);
   }
 
   _setupThirdPartyFilter() {
@@ -209,7 +213,7 @@ export class ReportUIFeatures {
     ];
 
     // Get all tables with a text url column.
-    const tables = Array.from(this._document.querySelectorAll('table.lh-table'));
+    const tables = Array.from(this._dom.rootEl.querySelectorAll('table.lh-table'));
     const tablesWithUrls = tables
       .filter(el =>
         el.querySelector('td.lh-table-column--url, td.lh-table-column--source-location'))
@@ -275,9 +279,9 @@ export class ReportUIFeatures {
   }
 
   /**
-   * @param {Element} el
+   * @param {Element} rootEl
    */
-  _setupElementScreenshotOverlay(el) {
+  _setupElementScreenshotOverlay(rootEl) {
     const fullPageScreenshot =
       this.json.audits['full-page-screenshot'] &&
       this.json.audits['full-page-screenshot'].details &&
@@ -287,8 +291,8 @@ export class ReportUIFeatures {
 
     ElementScreenshotRenderer.installOverlayFeature({
       dom: this._dom,
-      reportEl: el,
-      overlayContainerEl: el,
+      rootEl: rootEl,
+      overlayContainerEl: rootEl,
       fullPageScreenshot,
     });
   }

package/report/renderer/swap-locale-feature.js

@@ -33,17 +33,17 @@ export class SwapLocaleFeature {
       throw new Error('missing icuMessagePaths');
     }
 
-    this._dom.find('.lh-tools-locale', this._dom.document()).classList.remove('lh-hidden');
+    this._dom.find('.lh-tools-locale', this._dom.rootEl).classList.remove('lh-hidden');
 
     const currentLocale = this._reportUIFeatures.json.configSettings.locale;
 
-    const containerEl = this._dom.find('.lh-tools-locale__selector-wrapper', this._dom.document());
+    const containerEl = this._dom.find('.lh-tools-locale__selector-wrapper', this._dom.rootEl);
     containerEl.removeAttribute('aria-hidden');
     const selectEl = this._dom.createChildOf(containerEl, 'select', 'lh-locale-selector');
     selectEl.name = 'lh-locale-list';
     selectEl.setAttribute('role', 'menuitem');
 
-    const toggleEl = this._dom.find('.lh-tool-locale__button', this._dom.document());
+    const toggleEl = this._dom.find('.lh-tool-locale__button', this._dom.rootEl);
     toggleEl.addEventListener('click', () => {
       toggleEl.classList.toggle('lh-active');
     });

package/report/renderer/topbar-features.js

@@ -24,8 +24,6 @@ export class TopbarFeatures {
     this.lhr; // eslint-disable-line no-unused-expressions
     this._reportUIFeatures = reportUIFeatures;
     this._dom = dom;
-    /** @type {Document} */
-    this._document = this._dom.document();
     this._dropDownMenu = new DropDownMenu(this._dom);
     this._copyAttempt = false;
     /** @type {HTMLElement} */
@@ -48,19 +46,19 @@ export class TopbarFeatures {
    */
   enable(lhr) {
     this.lhr = lhr;
-    this._document.addEventListener('keyup', this.onKeyUp);
-    this._document.addEventListener('copy', this.onCopy);
+    this._dom.rootEl.addEventListener('keyup', this.onKeyUp);
+    this._dom.document().addEventListener('copy', this.onCopy);
     this._dropDownMenu.setup(this.onDropDownMenuClick);
     this._setUpCollapseDetailsAfterPrinting();
 
-    const topbarLogo = this._dom.find('.lh-topbar__logo', this._document);
+    const topbarLogo = this._dom.find('.lh-topbar__logo', this._dom.rootEl);
     topbarLogo.addEventListener('click', () => toggleDarkTheme(this._dom));
 
     // There is only a sticky header when at least 2 categories are present.
     if (Object.keys(this.lhr.categories).length >= 2) {
       this._setupStickyHeaderElements();
-      const containerEl = this._dom.find('.lh-container', this._document);
-      const elToAddScrollListener = this._getScrollParent(containerEl);
+      const reportRootEl = this._dom.rootEl;
+      const elToAddScrollListener = this._getScrollParent(reportRootEl);
       elToAddScrollListener.addEventListener('scroll', this._updateStickyHeaderOnScroll);
 
       // Use ResizeObserver where available.
@@ -70,7 +68,7 @@ export class TopbarFeatures {
       // For now, limit to DevTools.
       if (this._dom.isDevTools()) {
         const resizeObserver = new window.ResizeObserver(this._updateStickyHeaderOnScroll);
-        resizeObserver.observe(containerEl);
+        resizeObserver.observe(reportRootEl);
       } else {
         window.addEventListener('resize', this._updateStickyHeaderOnScroll);
       }
@@ -112,7 +110,7 @@ export class TopbarFeatures {
         try {
           this._reportUIFeatures._saveFile(new Blob([htmlStr], {type: 'text/html'}));
         } catch (e) {
-          this._dom.fireEventOn('lh-log', this._document, {
+          this._dom.fireEventOn('lh-log', this._dom.document(), {
             cmd: 'error', msg: 'Could not export as HTML. ' + e.message,
           });
         }
@@ -152,7 +150,7 @@ export class TopbarFeatures {
       e.preventDefault();
       e.clipboardData.setData('text/plain', JSON.stringify(this.lhr, null, 2));
 
-      this._dom.fireEventOn('lh-log', this._document, {
+      this._dom.fireEventOn('lh-log', this._dom.document(), {
         cmd: 'log', msg: 'Report JSON copied to clipboard',
       });
     }
@@ -164,28 +162,28 @@ export class TopbarFeatures {
    * Copies the report JSON to the clipboard (if supported by the browser).
    */
   onCopyButtonClick() {
-    this._dom.fireEventOn('lh-analytics', this._document, {
+    this._dom.fireEventOn('lh-analytics', this._dom.document(), {
       cmd: 'send',
       fields: {hitType: 'event', eventCategory: 'report', eventAction: 'copy'},
     });
 
     try {
-      if (this._document.queryCommandSupported('copy')) {
+      if (this._dom.document().queryCommandSupported('copy')) {
         this._copyAttempt = true;
 
         // Note: In Safari 10.0.1, execCommand('copy') returns true if there's
         // a valid text selection on the page. See http://caniuse.com/#feat=clipboard.
-        if (!this._document.execCommand('copy')) {
+        if (!this._dom.document().execCommand('copy')) {
           this._copyAttempt = false; // Prevent event handler from seeing this as a copy attempt.
 
-          this._dom.fireEventOn('lh-log', this._document, {
+          this._dom.fireEventOn('lh-log', this._dom.document(), {
             cmd: 'warn', msg: 'Your browser does not support copy to clipboard.',
           });
         }
       }
     } catch (e) {
       this._copyAttempt = false;
-      this._dom.fireEventOn('lh-log', this._document, {cmd: 'log', msg: e.message});
+      this._dom.fireEventOn('lh-log', this._dom.document(), {cmd: 'log', msg: e.message});
     }
   }
 
@@ -206,7 +204,7 @@ export class TopbarFeatures {
    * open a `<details>` element.
    */
   expandAllDetails() {
-    const details = this._dom.findAll('.lh-categories details', this._document);
+    const details = this._dom.findAll('.lh-categories details', this._dom.rootEl);
     details.map(detail => detail.open = true);
   }
 
@@ -215,7 +213,7 @@ export class TopbarFeatures {
    * open a `<details>` element.
    */
   collapseAllDetails() {
-    const details = this._dom.findAll('.lh-categories details', this._document);
+    const details = this._dom.findAll('.lh-categories details', this._dom.rootEl);
     details.map(detail => detail.open = false);
   }
 
@@ -274,9 +272,9 @@ export class TopbarFeatures {
   }
 
   _setupStickyHeaderElements() {
-    this.topbarEl = this._dom.find('div.lh-topbar', this._document);
-    this.scoreScaleEl = this._dom.find('div.lh-scorescale', this._document);
-    this.stickyHeaderEl = this._dom.find('div.lh-sticky-header', this._document);
+    this.topbarEl = this._dom.find('div.lh-topbar', this._dom.rootEl);
+    this.scoreScaleEl = this._dom.find('div.lh-scorescale', this._dom.rootEl);
+    this.stickyHeaderEl = this._dom.find('div.lh-sticky-header', this._dom.rootEl);
 
     // Highlighter will be absolutely positioned at first gauge, then transformed on scroll.
     this.highlightEl = this._dom.createChildOf(this.stickyHeaderEl, 'div', 'lh-highlighter');
@@ -290,7 +288,7 @@ export class TopbarFeatures {
 
     // Highlight mini gauge when section is in view.
     // In view = the last category that starts above the middle of the window.
-    const categoryEls = Array.from(this._document.querySelectorAll('.lh-category'));
+    const categoryEls = Array.from(this._dom.rootEl.querySelectorAll('.lh-category'));
     const categoriesAboveTheMiddle =
       categoryEls.filter(el => el.getBoundingClientRect().top - window.innerHeight / 2 < 0);
     const highlightIndex =

package/report/test/clients/bundle-test.js

@@ -9,6 +9,7 @@
 import fs from 'fs';
 
 import jsdom from 'jsdom';
+import {jest} from '@jest/globals';
 
 import * as lighthouseRenderer from '../../clients/bundle.js';
 import {LH_ROOT} from '../../../root.js';
@@ -22,6 +23,8 @@ const sampleResultsStr =
 describe('lighthouseRenderer bundle', () => {
   let document;
   beforeAll(() => {
+    global.console.warn = jest.fn();
+
     const {window} = new jsdom.JSDOM();
     document = window.document;
 

package/report/test/renderer/report-renderer-axe-test.js

@@ -8,6 +8,7 @@
 /* eslint-env jest */
 
 import jsdom from 'jsdom';
+import {jest} from '@jest/globals';
 
 import {Util} from '../../renderer/util.js';
 import {DOM} from '../../renderer/dom.js';
@@ -23,6 +24,8 @@ describe('ReportRendererAxe', () => {
     let sampleResults;
 
     beforeAll(async () => {
+      global.console.warn = jest.fn();
+
       const {window} = new jsdom.JSDOM();
       const dom = new DOM(window.document);
       const detailsRenderer = new DetailsRenderer(dom);
@@ -47,10 +50,10 @@ describe('ReportRendererAxe', () => {
     });
 
     it('renders without axe violations', async () => {
-      const container = renderer._dom._document.createElement('main');
+      const container = renderer._dom.document().createElement('main');
       const output = renderer.renderReport(sampleResults, container);
 
-      renderer._dom._document.body.appendChild(container);
+      renderer._dom.document().body.appendChild(container);
 
       const config = {
         rules: {

package/report/test/renderer/report-renderer-test.js

@@ -10,6 +10,7 @@
 import {strict as assert} from 'assert';
 
 import jsdom from 'jsdom';
+import {jest} from '@jest/globals';
 
 import {Util} from '../../renderer/util.js';
 import URL from '../../../lighthouse-core/lib/url-shim.js';
@@ -26,6 +27,8 @@ describe('ReportRenderer', () => {
   let sampleResults;
 
   beforeAll(() => {
+    global.console.warn = jest.fn();
+
     // Stub out matchMedia for Node.
     global.matchMedia = function() {
       return {
@@ -50,7 +53,7 @@ describe('ReportRenderer', () => {
 
   describe('renderReport', () => {
     it('should render a report', () => {
-      const container = renderer._dom._document.body;
+      const container = renderer._dom.document().body;
       const output = renderer.renderReport(sampleResults, container);
       assert.ok(output.querySelector('.lh-header-container'), 'has a header');
       assert.ok(output.querySelector('.lh-report'), 'has report body');
@@ -60,7 +63,7 @@ describe('ReportRenderer', () => {
     });
 
     it('renders additional reports by replacing the existing one', () => {
-      const container = renderer._dom._document.body;
+      const container = renderer._dom.document().body;
       const oldReport = Array.from(renderer.renderReport(sampleResults, container).children);
       const newReport = Array.from(renderer.renderReport(sampleResults, container).children);
       assert.ok(!oldReport.find(node => container.contains(node)), 'old report was removed');
@@ -86,7 +89,7 @@ describe('ReportRenderer', () => {
         auditRefs: [],
       };
 
-      const container = renderer._dom._document.body;
+      const container = renderer._dom.document().body;
       const output = renderer.renderReport(sampleResultsCopy, container);
 
       function isPWAGauge(el) {
@@ -126,7 +129,7 @@ describe('ReportRenderer', () => {
         title: 'Some Plugin',
         auditRefs: [],
       };
-      const container = renderer._dom._document.body;
+      const container = renderer._dom.document().body;
       const output = renderer.renderReport(sampleResultsCopy, container);
       const scoresHeaderElem = output.querySelector('.lh-scores-header');
 
@@ -140,7 +143,7 @@ describe('ReportRenderer', () => {
     });
 
     it('should not mutate a report object', () => {
-      const container = renderer._dom._document.body;
+      const container = renderer._dom.document().body;
       const originalResults = JSON.parse(JSON.stringify(sampleResults));
       renderer.renderReport(sampleResults, container);
       assert.deepStrictEqual(sampleResults, originalResults);
@@ -148,13 +151,13 @@ describe('ReportRenderer', () => {
 
     it('renders no warning section when no lighthouseRunWarnings occur', () => {
       const warningResults = Object.assign({}, sampleResults, {runWarnings: []});
-      const container = renderer._dom._document.body;
+      const container = renderer._dom.document().body;
       const output = renderer.renderReport(warningResults, container);
       assert.strictEqual(output.querySelector('.lh-warnings--toplevel'), null);
     });
 
     it('renders a warning section', () => {
-      const container = renderer._dom._document.body;
+      const container = renderer._dom.document().body;
       const output = renderer.renderReport(sampleResults, container);
 
       const warningEls = output.querySelectorAll('.lh-warnings--toplevel > ul > li');
@@ -165,7 +168,7 @@ describe('ReportRenderer', () => {
       const warningResults = Object.assign({}, sampleResults, {
         runWarnings: ['[I am a link](https://example.com/)'],
       });
-      const container = renderer._dom._document.body;
+      const container = renderer._dom.document().body;
       const output = renderer.renderReport(warningResults, container);
 
       const warningEls = output.querySelectorAll('.lh-warnings--toplevel ul li a');
@@ -196,7 +199,7 @@ describe('ReportRenderer', () => {
     // Make sure we have a channel in the LHR.
     assert.ok(lhrChannel.length > 2);
 
-    const container = renderer._dom._document.body;
+    const container = renderer._dom.document().body;
     const output = renderer.renderReport(sampleResults, container);
 
     const DOCS_ORIGINS = ['https://developers.google.com', 'https://web.dev'];
@@ -225,7 +228,7 @@ describe('ReportRenderer', () => {
 
     assert.ok(notApplicableCount > 20); // Make sure something's being tested.
 
-    const container = renderer._dom._document.body;
+    const container = renderer._dom.document().body;
     const reportElement = renderer.renderReport(sampleResults, container);
     const notApplicableElementCount = reportElement
       .querySelectorAll('.lh-audit--notapplicable').length;

package/report/test/renderer/report-ui-features-test.js

@@ -10,6 +10,7 @@
 import {strict as assert} from 'assert';
 
 import jsdom from 'jsdom';
+import {jest} from '@jest/globals';
 
 import reportAssets from '../../generator/report-assets.js';
 import {Util} from '../../renderer/util.js';
@@ -33,13 +34,15 @@ describe('ReportUIFeatures', () => {
     const categoryRenderer = new CategoryRenderer(dom, detailsRenderer);
     const renderer = new ReportRenderer(dom, categoryRenderer);
     const reportUIFeatures = new ReportUIFeatures(dom);
-    const container = dom.find('main', dom._document);
+    const container = dom.find('body', dom.document());
     renderer.renderReport(lhr, container);
     reportUIFeatures.initFeatures(lhr);
     return container;
   }
 
   beforeAll(() => {
+    global.console.warn = jest.fn();
+
     // Stub out matchMedia for Node.
     global.matchMedia = function() {
       return {

package/report/test-assets/faux-psi-template.html

@@ -66,7 +66,6 @@
 }
 
 .tab-panel {
-  padding: 30px 0;
   border-top: 1px solid #ccc;
 }
 
@@ -101,13 +100,9 @@ body {
     <label for="tab2">Desktop</label>
 
     <div class="tab-panels">
-      <section id="mobile" class="tab-panel">
-        <main></main>
-      </section>
+      <section id="mobile" class="tab-panel"></section>
 
-      <section id="desktop" class="tab-panel">
-        <main></main>
-      </section>
+      <section id="desktop" class="tab-panel"></section>
 
     </div>
   </div>