diff --git a/lighthouse-core/scripts/assert-golden-lhr-unchanged.sh b/lighthouse-core/scripts/assert-golden-lhr-unchanged.sh index 7f29084464a3..c407e460c980 100644 --- a/lighthouse-core/scripts/assert-golden-lhr-unchanged.sh +++ b/lighthouse-core/scripts/assert-golden-lhr-unchanged.sh @@ -28,7 +28,7 @@ trap teardown EXIT colorText "Generating a fresh LHR..." "$purple" set -x -node "$lhroot_path/lighthouse-cli" -A="$lhroot_path/lighthouse-core/test/results/artifacts" --throttling-method=devtools --quiet --output=json --output-path="$freshLHRPath" +node "$lhroot_path/lighthouse-cli" -A="$lhroot_path/lighthouse-core/test/results/artifacts" --config-path="$lhroot_path/lighthouse-core/test/results/sample-config.js" --quiet --output=json --output-path="$freshLHRPath" set +x # remove timing from both diff --git a/lighthouse-core/scripts/update-report-fixtures.js b/lighthouse-core/scripts/update-report-fixtures.js index 300941ab6aaf..1e8efe87b6e5 100644 --- a/lighthouse-core/scripts/update-report-fixtures.js +++ b/lighthouse-core/scripts/update-report-fixtures.js @@ -12,28 +12,10 @@ const assetSaver = require('../lib/asset-saver.js'); const artifactPath = 'lighthouse-core/test/results/artifacts'; const {server} = require('../../lighthouse-cli/test/fixtures/static-server.js'); +const budgetedConfig = require('../test/results/sample-config.js'); /** @typedef {import('net').AddressInfo} AddressInfo */ -/** @type {LH.Config.Json} */ -const budgetedConfig = { - extends: 'lighthouse:default', - settings: { - budgets: [{ - resourceSizes: [ - {resourceType: 'script', budget: 125}, - {resourceType: 'total', budget: 500}, - ], - timings: [ - {metric: 'interactive', budget: 5000, tolerance: 1000}, - ], - resourceCounts: [ - {resourceType: 'third-party', budget: 0}, - ], - }], - }, -}; - /** * Update the report artifacts. If artifactName is set only that artifact will be updated. * @param {keyof LH.Artifacts=} artifactName @@ -52,7 +34,6 @@ async function update(artifactName) { const url = `http://localhost:${port}/dobetterweb/dbw_tester.html`; const rawFlags = [ `--gather-mode=${artifactPath}`, - '--throttling-method=devtools', url, ].join(' '); const flags = cliFlags.getFlags(rawFlags); diff --git a/lighthouse-core/test/report/html/renderer/report-renderer-test.js b/lighthouse-core/test/report/html/renderer/report-renderer-test.js index efa3966da230..d6d8e6a987f5 100644 --- a/lighthouse-core/test/report/html/renderer/report-renderer-test.js +++ b/lighthouse-core/test/report/html/renderer/report-renderer-test.js @@ -265,10 +265,8 @@ describe('ReportRenderer', () => { const container = renderer._dom._document.body; const reportElement = renderer.renderReport(sampleResults, container); - // TODO(khempenius): Remove "+1" once budgets renderer code is added. - // Until budgets renderer code is added, JSON vs. DOM comparison will differ by 1. const notApplicableElementCount = reportElement .querySelectorAll('.lh-audit--notapplicable').length; - assert.strictEqual(notApplicableCount, notApplicableElementCount + 1); + assert.strictEqual(notApplicableCount, notApplicableElementCount); }); }); diff --git a/lighthouse-core/test/results/sample-config.js b/lighthouse-core/test/results/sample-config.js new file mode 100644 index 000000000000..9f8144dbb57c --- /dev/null +++ b/lighthouse-core/test/results/sample-config.js @@ -0,0 +1,51 @@ +/** + * @license Copyright 2019 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'; + +/** + * @fileoverview Config used for generating the sample_v2 golden LHR. + */ + +/** @type {LH.Config.Json} */ +const budgetedConfig = { + extends: 'lighthouse:default', + settings: { + throttlingMethod: 'devtools', + budgets: [{ + resourceCounts: [ + {resourceType: 'total', budget: 10}, + {resourceType: 'stylesheet', budget: 2}, + {resourceType: 'image', budget: 2}, + {resourceType: 'media', budget: 0}, + {resourceType: 'font', budget: 1}, + {resourceType: 'script', budget: 2}, + {resourceType: 'document', budget: 1}, + {resourceType: 'other', budget: 2}, + {resourceType: 'third-party', budget: 1}, + ], + resourceSizes: [ + {resourceType: 'total', budget: 100}, + {resourceType: 'stylesheet', budget: 5}, + {resourceType: 'image', budget: 30}, + {resourceType: 'media', budget: 0}, + {resourceType: 'font', budget: 20}, + {resourceType: 'script', budget: 30}, + {resourceType: 'document', budget: 15}, + {resourceType: 'other', budget: 5}, + {resourceType: 'third-party', budget: 25}, + ], + timings: [ + {metric: 'first-contentful-paint', budget: 3000, tolerance: 100}, + {metric: 'first-cpu-idle', budget: 2900, tolerance: 100}, + {metric: 'interactive', budget: 2900, tolerance: 100}, + {metric: 'first-meaningful-paint', budget: 2000, tolerance: 100}, + {metric: 'estimated-input-latency', budget: 100, tolerance: 100}, + ], + }], + }, +}; + +module.exports = budgetedConfig; diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json index c045c7cddc02..94a01b3e1399 100644 --- a/lighthouse-core/test/results/sample_v2.json +++ b/lighthouse-core/test/results/sample_v2.json @@ -1278,7 +1278,103 @@ "title": "Performance budget", "description": "Keep the quantity and size of network requests under the targets set by the provided performance budget.", "score": null, - "scoreDisplayMode": "notApplicable" + "scoreDisplayMode": "informative", + "details": { + "type": "table", + "headings": [ + { + "key": "label", + "itemType": "text", + "text": "Resource Type" + }, + { + "key": "requestCount", + "itemType": "numeric", + "text": "Requests" + }, + { + "key": "size", + "itemType": "bytes", + "text": "Transfer Size" + }, + { + "key": "countOverBudget", + "itemType": "text", + "text": "" + }, + { + "key": "sizeOverBudget", + "itemType": "bytes", + "text": "Over Budget" + } + ], + "items": [ + { + "resourceType": "script", + "label": "Script", + "requestCount": 4, + "size": 103675, + "countOverBudget": "2 requests", + "sizeOverBudget": 72955 + }, + { + "resourceType": "total", + "label": "Total", + "requestCount": 18, + "size": 160738, + "countOverBudget": "8 requests", + "sizeOverBudget": 58338 + }, + { + "resourceType": "other", + "label": "Other", + "requestCount": 2, + "size": 12861, + "sizeOverBudget": 7741 + }, + { + "resourceType": "third-party", + "label": "Third-party", + "requestCount": 2, + "size": 30174, + "countOverBudget": "1 request", + "sizeOverBudget": 4574 + }, + { + "resourceType": "stylesheet", + "label": "Stylesheet", + "requestCount": 7, + "size": 5352, + "countOverBudget": "5 requests", + "sizeOverBudget": 232 + }, + { + "resourceType": "image", + "label": "Image", + "requestCount": 2, + "size": 24741 + }, + { + "resourceType": "media", + "label": "Media", + "requestCount": 0, + "size": 0 + }, + { + "resourceType": "font", + "label": "Font", + "requestCount": 0, + "size": 0 + }, + { + "resourceType": "document", + "label": "Document", + "requestCount": 3, + "size": 14109, + "countOverBudget": "2 requests" + } + ] + } }, "resource-summary": { "id": "resource-summary", @@ -3049,7 +3145,113 @@ "disableStorageReset": false, "emulatedFormFactor": "mobile", "channel": "cli", - "budgets": null, + "budgets": [ + { + "resourceSizes": [ + { + "resourceType": "total", + "budget": 100 + }, + { + "resourceType": "stylesheet", + "budget": 5 + }, + { + "resourceType": "image", + "budget": 30 + }, + { + "resourceType": "media", + "budget": 0 + }, + { + "resourceType": "font", + "budget": 20 + }, + { + "resourceType": "script", + "budget": 30 + }, + { + "resourceType": "document", + "budget": 15 + }, + { + "resourceType": "other", + "budget": 5 + }, + { + "resourceType": "third-party", + "budget": 25 + } + ], + "resourceCounts": [ + { + "resourceType": "total", + "budget": 10 + }, + { + "resourceType": "stylesheet", + "budget": 2 + }, + { + "resourceType": "image", + "budget": 2 + }, + { + "resourceType": "media", + "budget": 0 + }, + { + "resourceType": "font", + "budget": 1 + }, + { + "resourceType": "script", + "budget": 2 + }, + { + "resourceType": "document", + "budget": 1 + }, + { + "resourceType": "other", + "budget": 2 + }, + { + "resourceType": "third-party", + "budget": 1 + } + ], + "timings": [ + { + "metric": "first-contentful-paint", + "budget": 3000, + "tolerance": 100 + }, + { + "metric": "first-cpu-idle", + "budget": 2900, + "tolerance": 100 + }, + { + "metric": "interactive", + "budget": 2900, + "tolerance": 100 + }, + { + "metric": "first-meaningful-paint", + "budget": 2000, + "tolerance": 100 + }, + { + "metric": "estimated-input-latency", + "budget": 100, + "tolerance": 100 + } + ] + } + ], "locale": "en-US", "blockedUrlPatterns": null, "additionalTraceCategories": null, @@ -4987,47 +5189,88 @@ "lighthouse-core/audits/performance-budget.js | description": [ "audits[performance-budget].description" ], - "lighthouse-core/audits/resource-summary.js | title": [ - "audits[resource-summary].title" - ], - "lighthouse-core/audits/resource-summary.js | description": [ - "audits[resource-summary].description" + "lighthouse-core/lib/i18n/i18n.js | scriptResourceType": [ + "audits[performance-budget].details.items[0].label", + "audits[resource-summary].details.items[1].label" ], - "lighthouse-core/audits/resource-summary.js | displayValue": [ + "lighthouse-core/audits/performance-budget.js | requestCountOverBudget": [ { "values": { - "requestCount": 18, - "byteCount": 160738 + "count": 2 }, - "path": "audits[resource-summary].displayValue" + "path": "audits[performance-budget].details.items[0].countOverBudget" + }, + { + "values": { + "count": 8 + }, + "path": "audits[performance-budget].details.items[1].countOverBudget" + }, + { + "values": { + "count": 1 + }, + "path": "audits[performance-budget].details.items[3].countOverBudget" + }, + { + "values": { + "count": 5 + }, + "path": "audits[performance-budget].details.items[4].countOverBudget" + }, + { + "values": { + "count": 2 + }, + "path": "audits[performance-budget].details.items[8].countOverBudget" } ], "lighthouse-core/lib/i18n/i18n.js | totalResourceType": [ + "audits[performance-budget].details.items[1].label", "audits[resource-summary].details.items[0].label" ], - "lighthouse-core/lib/i18n/i18n.js | scriptResourceType": [ - "audits[resource-summary].details.items[1].label" - ], - "lighthouse-core/lib/i18n/i18n.js | imageResourceType": [ - "audits[resource-summary].details.items[2].label" - ], - "lighthouse-core/lib/i18n/i18n.js | documentResourceType": [ - "audits[resource-summary].details.items[3].label" - ], "lighthouse-core/lib/i18n/i18n.js | otherResourceType": [ + "audits[performance-budget].details.items[2].label", "audits[resource-summary].details.items[4].label" ], + "lighthouse-core/lib/i18n/i18n.js | thirdPartyResourceType": [ + "audits[performance-budget].details.items[3].label", + "audits[resource-summary].details.items[8].label" + ], "lighthouse-core/lib/i18n/i18n.js | stylesheetResourceType": [ + "audits[performance-budget].details.items[4].label", "audits[resource-summary].details.items[5].label" ], + "lighthouse-core/lib/i18n/i18n.js | imageResourceType": [ + "audits[performance-budget].details.items[5].label", + "audits[resource-summary].details.items[2].label" + ], "lighthouse-core/lib/i18n/i18n.js | mediaResourceType": [ + "audits[performance-budget].details.items[6].label", "audits[resource-summary].details.items[6].label" ], "lighthouse-core/lib/i18n/i18n.js | fontResourceType": [ + "audits[performance-budget].details.items[7].label", "audits[resource-summary].details.items[7].label" ], - "lighthouse-core/lib/i18n/i18n.js | thirdPartyResourceType": [ - "audits[resource-summary].details.items[8].label" + "lighthouse-core/lib/i18n/i18n.js | documentResourceType": [ + "audits[performance-budget].details.items[8].label", + "audits[resource-summary].details.items[3].label" + ], + "lighthouse-core/audits/resource-summary.js | title": [ + "audits[resource-summary].title" + ], + "lighthouse-core/audits/resource-summary.js | description": [ + "audits[resource-summary].description" + ], + "lighthouse-core/audits/resource-summary.js | displayValue": [ + { + "values": { + "requestCount": 18, + "byteCount": 160738 + }, + "path": "audits[resource-summary].displayValue" + } ], "lighthouse-core/audits/accessibility/accesskeys.js | title": [ "audits.accesskeys.title" diff --git a/package.json b/package.json index 5b92e60b3808..52098cfe8df7 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "i18n:checks": "./lighthouse-core/scripts/i18n/assert-strings-collected.sh", "i18n:collect-strings": "node lighthouse-core/scripts/i18n/collect-strings.js", "update:sample-artifacts": "node lighthouse-core/scripts/update-report-fixtures.js", - "update:sample-json": "yarn i18n:collect-strings && node ./lighthouse-cli -A=./lighthouse-core/test/results/artifacts --throttling-method=devtools --output=json --output-path=./lighthouse-core/test/results/sample_v2.json && node lighthouse-core/scripts/cleanup-LHR-for-diff.js ./lighthouse-core/test/results/sample_v2.json --only-remove-timing && yarn compile-proto && yarn build-proto-roundtrip", + "update:sample-json": "yarn i18n:collect-strings && node ./lighthouse-cli -A=./lighthouse-core/test/results/artifacts --config-path=./lighthouse-core/test/results/sample-config.js --output=json --output-path=./lighthouse-core/test/results/sample_v2.json && node lighthouse-core/scripts/cleanup-LHR-for-diff.js ./lighthouse-core/test/results/sample_v2.json --only-remove-timing && yarn compile-proto && yarn build-proto-roundtrip", "diff:sample-json": "yarn i18n:checks && bash lighthouse-core/scripts/assert-golden-lhr-unchanged.sh", "ultradumbBenchmark": "./lighthouse-core/scripts/benchmark.js", "mixed-content": "./lighthouse-cli/index.js --chrome-flags='--headless' --preset=mixed-content", diff --git a/proto/sample_v2_round_trip.json b/proto/sample_v2_round_trip.json index d9f5ba95c53b..23a83ffe1c34 100644 --- a/proto/sample_v2_round_trip.json +++ b/proto/sample_v2_round_trip.json @@ -2033,9 +2033,104 @@ }, "performance-budget": { "description": "Keep the quantity and size of network requests under the targets set by the provided performance budget.", + "details": { + "headings": [ + { + "itemType": "text", + "key": "label", + "text": "Resource Type" + }, + { + "itemType": "numeric", + "key": "requestCount", + "text": "Requests" + }, + { + "itemType": "bytes", + "key": "size", + "text": "Transfer Size" + }, + { + "itemType": "text", + "key": "countOverBudget" + }, + { + "itemType": "bytes", + "key": "sizeOverBudget", + "text": "Over Budget" + } + ], + "items": [ + { + "countOverBudget": "2 requests", + "label": "Script", + "requestCount": 4.0, + "resourceType": "script", + "size": 103675.0, + "sizeOverBudget": 72955.0 + }, + { + "countOverBudget": "8 requests", + "label": "Total", + "requestCount": 18.0, + "resourceType": "total", + "size": 160738.0, + "sizeOverBudget": 58338.0 + }, + { + "label": "Other", + "requestCount": 2.0, + "resourceType": "other", + "size": 12861.0, + "sizeOverBudget": 7741.0 + }, + { + "countOverBudget": "1 request", + "label": "Third-party", + "requestCount": 2.0, + "resourceType": "third-party", + "size": 30174.0, + "sizeOverBudget": 4574.0 + }, + { + "countOverBudget": "5 requests", + "label": "Stylesheet", + "requestCount": 7.0, + "resourceType": "stylesheet", + "size": 5352.0, + "sizeOverBudget": 232.0 + }, + { + "label": "Image", + "requestCount": 2.0, + "resourceType": "image", + "size": 24741.0 + }, + { + "label": "Media", + "requestCount": 0.0, + "resourceType": "media", + "size": 0.0 + }, + { + "label": "Font", + "requestCount": 0.0, + "resourceType": "font", + "size": 0.0 + }, + { + "countOverBudget": "2 requests", + "label": "Document", + "requestCount": 3.0, + "resourceType": "document", + "size": 14109.0 + } + ], + "type": "table" + }, "id": "performance-budget", "score": null, - "scoreDisplayMode": "notApplicable", + "scoreDisplayMode": "informative", "title": "Performance budget" }, "plugins": {