report: truncate long attribute values in HTML snippets

lighthouse-core/lib/page-functions.js

@@ -112,7 +112,8 @@ function getElementsInDocument(selector) {
  * @return {string}
  */
 /* istanbul ignore next */
-function getOuterHTMLSnippet(element, ignoreAttrs = []) {
+function getOuterHTMLSnippet(element, ignoreAttrs = [], snippetCharacterLimit = 500) {
+  const ATTRIBUTE_CHAR_LIMIT = 75;
   try {
     // ShadowRoots are sometimes passed in; use their hosts' outerHTML.
     if (element instanceof ShadowRoot) {
@@ -123,9 +124,26 @@ function getOuterHTMLSnippet(element, ignoreAttrs = []) {
     ignoreAttrs.forEach(attribute =>{
       clone.removeAttribute(attribute);
     });
+    let charCount = 0;
+    for (const attributeName of clone.getAttributeNames()) {
+      if (charCount > snippetCharacterLimit) {
+        clone.removeAttribute(attributeName);
+      } else {
+        let attributeValue = clone.getAttribute(attributeName);
+        if (attributeValue.length > ATTRIBUTE_CHAR_LIMIT) {
+          attributeValue = attributeValue.slice(0, ATTRIBUTE_CHAR_LIMIT - 1) + '…';
+          clone.setAttribute(attributeName, attributeValue);
+        }
+        charCount += attributeName.length + attributeValue.length;
+      }
+    }
+
     const reOpeningTag = /^[\s\S]*?>/;
-    const match = clone.outerHTML.match(reOpeningTag);
-    return (match && match[0]) || '';
+    const [match] = clone.outerHTML.match(reOpeningTag) || [];
+    if (match && charCount > snippetCharacterLimit) {
+      return match.slice(0, match.length - 1) + ' …>';
+    }
+    return match || '';
   } catch (_) {
     // As a last resort, fall back to localName.
     return `<${element.localName}>`;

lighthouse-core/test/lib/page-functions-test.js

@@ -61,6 +61,28 @@ describe('Page Functions', () => {
       assert.equal(pageFunctions.getOuterHTMLSnippet(
         dom.createElement('div', '', {style: 'style1\nstyle2'})), '<div style="style1\nstyle2">');
     });
+
+    it('truncates attribute values that are too long', () => {
+      const longClass = 'a'.repeat(200);
+      const truncatedExpectation = 'a'.repeat(74) + '…';
+      assert.equal(pageFunctions.getOuterHTMLSnippet(
+        dom.createElement('div', '', {class: longClass})), `<div class="${truncatedExpectation}">`
+      );
+    });
+
+    it('removes attributes if the length of the attribute name + value is too long', () => {
+      const longValue = 'a'.repeat(200);
+      const truncatedValue = 'a'.repeat(74) + '…';
+      const element = dom.createElement('div', '', {
+        class: longValue,
+        id: longValue,
+        att1: 'shouldn\'t see this',
+        att2: 'shouldn\'t see this either',
+      });
+      const snippet = pageFunctions.getOuterHTMLSnippet(element, [], 150);
+      assert.equal(snippet, `<div class="${truncatedValue}" id="${truncatedValue}" …>`
+      );
+    });
   });
 
   describe('getNodeSelector', () => {