GoogleChrome · connorjclark · Jul 20, 2020 · May 2, 2019 · May 15, 2019 · May 15, 2019
diff --git a/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap b/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap
@@ -42,6 +42,9 @@ Object {
     Object {
       "path": "final-screenshot",
     },
+    Object {
+      "path": "full-page-screenshot",
+    },
     Object {
       "path": "metrics/estimated-input-latency",
     },
@@ -1349,6 +1352,9 @@ Object {
         Object {
           "path": "inspector-issues",
         },
+        Object {
+          "path": "full-page-screenshot",
+        },
       ],
       "loadFailureMode": "fatal",
       "networkQuietThresholdMs": 1000,

diff --git a/lighthouse-cli/test/fixtures/screenshots.html b/lighthouse-cli/test/fixtures/screenshots.html
@@ -0,0 +1,17 @@
+<style>
+body {
+  background: lightblue url('https://i.stack.imgur.com/YbUvO.gif') no-repeat fixed center;
+}
+p {
+  background-color: white;
+}
+</style>
+
+<body>
+  <script>
+    const params = new URLSearchParams(document.location.search);
+    document.body.style.height = params.get('height') || '100vh';
+  </script>
+
+  <p>Screenshot tester.</p>
+</body>
diff --git a/lighthouse-cli/test/smokehouse/report-assert.js b/lighthouse-cli/test/smokehouse/report-assert.js
@@ -175,7 +175,7 @@ function collateResults(localConsole, actual, expected) {
     const artifactNames = /** @type {(keyof LH.Artifacts)[]} */ (Object.keys(expectedArtifacts));
     artifactAssertions = artifactNames.map(artifactName => {
       const actualResult = (actual.artifacts || {})[artifactName];
-      if (!actualResult) {
+      if (!actualResult && expectedArtifacts[artifactName]) {
         localConsole.log(log.redify('Error: ') +
           `Config run did not generate artifact ${artifactName}`);
       }

diff --git a/lighthouse-cli/test/smokehouse/test-definitions/a11y/expectations.js b/lighthouse-cli/test/smokehouse/test-definitions/a11y/expectations.js
@@ -48,6 +48,10 @@ const expectations = [
               {
                 node: {
                   'type': 'node',
+                  'boundingRect': {
+                    'width': '>0',
+                    'height': '>0',
+                  },
                   'selector': '#aria-hidden-focus',
                   'snippet': '<div id="aria-hidden-focus" aria-hidden="true">\n        <button>Focusable Button</button>\n      </div>',
                   'explanation': 'Fix all of the following:\n  Focusable content should be disabled or be removed from the DOM',
@@ -64,6 +68,10 @@ const expectations = [
               {
                 node: {
                   'type': 'node',
+                  'boundingRect': {
+                    'width': '>0',
+                    'height': '>0',
+                  },
                   'selector': '#aria-input-field-name',
                   'snippet': '<div id="aria-input-field-name" role="textbox">text-in-a-box</div>',
                   'explanation': 'Fix any of the following:\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute or the title attribute is empty',

diff --git a/lighthouse-cli/test/smokehouse/test-definitions/core-tests.js b/lighthouse-cli/test/smokehouse/test-definitions/core-tests.js
@@ -74,6 +74,10 @@ const smokeTests = [{
   id: 'source-maps',
   expectations: require('./source-maps/expectations.js'),
   config: require('./source-maps/source-maps-config.js'),
+}, {
+  id: 'screenshots',
+  expectations: require('./screenshots/expectations.js'),
+  config: require('./screenshots/screenshots-config.js'),
 }];
 
 module.exports = smokeTests;
diff --git a/lighthouse-cli/test/smokehouse/test-definitions/screenshots/expectations.js b/lighthouse-cli/test/smokehouse/test-definitions/screenshots/expectations.js
@@ -0,0 +1,39 @@
+/**
+ * @license Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+'use strict';
+
+/**
+ * @type {Array<Smokehouse.ExpectedRunnerResult>}
+ */
+const expectations = [
+  {
+    artifacts: {
+      FullPageScreenshot: {
+        data: /data:image\/jpeg;base64,.{520000,530000}$/,
+        width: 1350,
+        height: 956,
+      },
+    },
+    lhr: {
+      requestedUrl: 'http://localhost:10200/screenshots.html',
+      finalUrl: 'http://localhost:10200/screenshots.html',
+      audits: {},
+    },
+  },
+  {
+    artifacts: {
+      FullPageScreenshot: null,
+    },
+    lhr: {
+      requestedUrl: 'http://localhost:10200/screenshots.html?height=1000vh',
+      finalUrl: 'http://localhost:10200/screenshots.html?height=1000vh',
+      runWarnings: ['Full page screenshot is too big.'],
+      audits: {},
+    },
+  },
+];
+
+module.exports = expectations;
diff --git a/lighthouse-cli/test/smokehouse/test-definitions/screenshots/screenshots-config.js b/lighthouse-cli/test/smokehouse/test-definitions/screenshots/screenshots-config.js
@@ -0,0 +1,15 @@
+/**
+ * @license Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+'use strict';
+
+/** @type {LH.Config.Json} */
+module.exports = {
+  extends: 'lighthouse:default',
+  settings: {
+    onlyAudits: ['full-page-screenshot'],
+    emulatedFormFactor: 'desktop',
+  },
+};
diff --git a/lighthouse-core/audits/accessibility/axe-audit.js b/lighthouse-core/audits/accessibility/axe-audit.js
@@ -80,6 +80,7 @@ class AxeAudit extends Audit {
           selector: Array.isArray(node.target) ? node.target.join(' ') : '',
           path: node.path,
           snippet: node.html || node.snippet,
+          boundingRect: node.boundingRect,
           explanation: node.failureSummary,
           nodeLabel: node.nodeLabel,
         }),

diff --git a/lighthouse-core/audits/full-page-screenshot.js b/lighthouse-core/audits/full-page-screenshot.js
@@ -0,0 +1,45 @@
+/**
+ * @license Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+'use strict';
+
+const Audit = require('./audit.js');
+
+class FullPageScreenshot extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'full-page-screenshot',
+      scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
+      title: 'Full-page screenshot',
+      description: 'A full-height screenshot of the final rendered page',
+      requiredArtifacts: ['FullPageScreenshot'],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts) {
+    if (!artifacts.FullPageScreenshot) {
+      return {score: 0, notApplicable: true};
+    }
+
+    return {
+      score: 1,
+      details: {
+        type: 'screenshot',
+        timing: 0,
+        timestamp: 0,
+        ...artifacts.FullPageScreenshot,
+      },
+    };
+  }
+}
+
+module.exports = FullPageScreenshot;
diff --git a/lighthouse-core/audits/largest-contentful-paint-element.js b/lighthouse-core/audits/largest-contentful-paint-element.js
@@ -53,6 +53,7 @@ class LargestContentfulPaintElement extends Audit {
           selector: lcpElement.selector,
           nodeLabel: lcpElement.nodeLabel,
           snippet: lcpElement.snippet,
+          boundingRect: lcpElement.boundingRect,
         }),
       });
     }

diff --git a/lighthouse-core/audits/layout-shift-elements.js b/lighthouse-core/audits/layout-shift-elements.js
@@ -52,6 +52,7 @@ class LayoutShiftElements extends Audit {
           selector: element.selector,
           nodeLabel: element.nodeLabel,
           snippet: element.snippet,
+          boundingRect: element.boundingRect,
         }),
       };
     });

diff --git a/lighthouse-core/audits/seo/font-size.js b/lighthouse-core/audits/seo/font-size.js
@@ -96,7 +96,7 @@ function getSelector(node) {
 
 /**
  * @param {FailingNodeData['node']} node
- * @return {{type: 'node', selector: string, snippet: string}}
+ * @return {LH.Audit.Details.NodeValue}
  */
 function nodeToTableNode(node) {
   const attributes = node.attributes || [];

diff --git a/lighthouse-core/audits/seo/tap-targets.js b/lighthouse-core/audits/seo/tap-targets.js
@@ -18,6 +18,7 @@ const {
   allRectsContainedWithinEachOther,
   getLargestRect,
   getBoundingRectWithPadding,
+  getBoundingRect,
 } = require('../../lib/rect-helpers.js');
 const {getTappableRectsFromClientRects} = require('../../lib/tappable-rects.js');
 const i18n = require('../../lib/i18n/i18n.js');
@@ -244,11 +245,14 @@ function getTableItems(overlapFailures) {
  * @returns {LH.Audit.Details.NodeValue}
  */
 function targetToTableNode(target) {
+  const boundingRect = getBoundingRect(target.clientRects);
+
   return {
     type: 'node',
     snippet: target.snippet,
     path: target.path,
     selector: target.selector,
+    boundingRect,
     nodeLabel: target.nodeLabel,
   };
 }

diff --git a/lighthouse-core/config/default-config.js b/lighthouse-core/config/default-config.js
@@ -161,6 +161,7 @@ const defaultConfig = {
       'accessibility',
       'trace-elements',
       'inspector-issues',
+      'full-page-screenshot',
     ],
   },
   {
@@ -196,6 +197,7 @@ const defaultConfig = {
     'metrics/speed-index',
     'screenshot-thumbnails',
     'final-screenshot',
+    'full-page-screenshot',
     'metrics/estimated-input-latency',
     'metrics/total-blocking-time',
     'metrics/max-potential-fid',

diff --git a/lighthouse-core/gather/gatherers/accessibility.js b/lighthouse-core/gather/gatherers/accessibility.js
@@ -5,7 +5,7 @@
  */
 'use strict';
 
-/* global window, document, getOuterHTMLSnippet, getNodePath, getNodeLabel */
+/* global window, document, getOuterHTMLSnippet, getBoundingClientRect, getNodePath, getNodeLabel */
 
 const Gatherer = require('./gatherer.js');
 const fs = require('fs');
@@ -52,6 +52,10 @@ function runA11yChecks() {
     },
     // @ts-ignore
   }).then(axeResult => {
+    // axe just scrolled the page, scroll back to the top of the page so that element positions
+    // are relative to the top of the page
+    document.documentElement.scrollTop = 0;
+
     // @ts-ignore
     const augmentAxeNodes = result => {
       // @ts-ignore
@@ -60,6 +64,12 @@ function runA11yChecks() {
         node.path = getNodePath(node.element);
         // @ts-ignore - getOuterHTMLSnippet put into scope via stringification
         node.snippet = getOuterHTMLSnippet(node.element);
+        // @ts-ignore - getOuterHTMLSnippet put into scope via stringification
+        const rect = getBoundingClientRect(node.element);
+        if (rect.width > 0 && rect.height > 0) {
+          node.boundingRect = rect;
+        }
+
         // @ts-ignore - getNodeLabel put into scope via stringification
         node.nodeLabel = getNodeLabel(node.element);
         // avoid circular JSON concerns
@@ -100,6 +110,7 @@ class Accessibility extends Gatherer {
     const driver = passContext.driver;
     const expression = `(function () {
       ${pageFunctions.getOuterHTMLSnippetString};
+      ${pageFunctions.getBoundingClientRectString};
       ${pageFunctions.getNodePathString};
       ${pageFunctions.getNodeLabelString};
       ${axeLibSource};