Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

core(asset-saver): stop creating screenshot files during --save-assets #6066

Merged
merged 3 commits into from
Sep 24, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,6 @@ last-run-results.html

*.trace.json
*.devtoolslog.json
*.screenshots.html
*.screenshots.json
*.report.html
*.report.dom.html
*.report.json
Expand Down
2 changes: 0 additions & 2 deletions .npmignore
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,6 @@ plots/
**/pages/scripts/lighthouse-report.js
*.report.html
*.dom.html
*.screenshots.html
*.screenshots.json
*.devtoolslog.json
*.trace.json
closure-error.log
Expand Down
63 changes: 0 additions & 63 deletions lighthouse-core/lib/asset-saver.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,58 +20,13 @@ const artifactsFilename = 'artifacts.json';
const traceSuffix = '.trace.json';
const devtoolsLogSuffix = '.devtoolslog.json';

/** @typedef {{timestamp: number, datauri: string}} Screenshot */
/**
* @typedef {object} PreparedAssets
* @property {string} passName
* @property {LH.Trace} traceData
* @property {LH.DevtoolsLog} devtoolsLog
* @property {string} screenshotsHTML
* @property {Array<Screenshot>} screenshots
*/

/**
* Generate basic HTML page of screenshot filmstrip
* @param {Array<Screenshot>} screenshots
* @return {string}
*/
function screenshotDump(screenshots) {
return `
<!doctype html>
<meta charset="utf-8">
<title>screenshots</title>
<style>
html {
overflow-x: scroll;
overflow-y: hidden;
height: 100%;
background-image: linear-gradient(to left, #4ca1af , #c4e0e5);
background-attachment: fixed;
padding: 10px;
}
body {
white-space: nowrap;
background-image: linear-gradient(to left, #4ca1af , #c4e0e5);
width: 100%;
margin: 0;
}
img {
margin: 4px;
}
</style>
<body>
<script>
var shots = ${JSON.stringify(screenshots)};

shots.forEach(s => {
var i = document.createElement('img');
i.src = s.datauri;
i.title = s.timestamp;
document.body.appendChild(i);
});
</script>
`;
}

/**
* Load artifacts object from files located within basePath
Expand Down Expand Up @@ -168,15 +123,7 @@ async function prepareAssets(artifacts, audits) {
const trace = artifacts.traces[passName];
const devtoolsLog = artifacts.devtoolsLogs[passName];

// Avoid Runner->AssetSaver->Runner circular require by loading Runner here.
const Runner = require('../runner.js');
const computedArtifacts = Runner.instantiateComputedArtifacts();
/** @type {Array<Screenshot>} */
const screenshots = await computedArtifacts.requestScreenshots(trace);

const traceData = Object.assign({}, trace);
const screenshotsHTML = screenshotDump(screenshots);

if (audits) {
const evts = new Metrics(traceData.traceEvents, audits).generateFakeEvents();
traceData.traceEvents = traceData.traceEvents.concat(evts);
Expand All @@ -186,8 +133,6 @@ async function prepareAssets(artifacts, audits) {
passName,
traceData,
devtoolsLog,
screenshotsHTML,
screenshots,
});
}

Expand Down Expand Up @@ -298,14 +243,6 @@ async function saveAssets(artifacts, audits, pathWithBasename) {
fs.writeFileSync(devtoolsLogFilename, JSON.stringify(passAssets.devtoolsLog, null, 2));
log.log('saveAssets', 'devtools log saved to disk: ' + devtoolsLogFilename);

const screenshotsHTMLFilename = `${pathWithBasename}-${index}.screenshots.html`;
fs.writeFileSync(screenshotsHTMLFilename, passAssets.screenshotsHTML);
log.log('saveAssets', 'screenshots saved to disk: ' + screenshotsHTMLFilename);

const screenshotsJSONFilename = `${pathWithBasename}-${index}.screenshots.json`;
fs.writeFileSync(screenshotsJSONFilename, JSON.stringify(passAssets.screenshots, null, 2));
log.log('saveAssets', 'screenshots saved to disk: ' + screenshotsJSONFilename);

const streamTraceFilename = `${pathWithBasename}-${index}${traceSuffix}`;
log.log('saveAssets', 'streaming trace file to disk: ' + streamTraceFilename);
await saveTrace(passAssets.traceData, streamTraceFilename);
Expand Down
16 changes: 0 additions & 16 deletions lighthouse-core/test/lib/asset-saver-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,22 +56,6 @@ describe('asset-saver helper', () => {
assert.ok(fileContents.includes('"message": "first"'));
fs.unlinkSync(filename);
});

it('screenshots html file saved to disk with data', () => {
const ssHTMLFilename = 'the_file-0.screenshots.html';
const ssFileContents = fs.readFileSync(ssHTMLFilename, 'utf8');
assert.ok(/<!doctype/gim.test(ssFileContents));
const expectedScreenshotContent = '{"timestamp":668545858.596';
assert.ok(ssFileContents.includes(expectedScreenshotContent), 'unexpected screenshot html');
fs.unlinkSync(ssHTMLFilename);
});

it('screenshots json file saved to disk with data', () => {
const ssJSONFilename = 'the_file-0.screenshots.json';
const ssContents = JSON.parse(fs.readFileSync(ssJSONFilename, 'utf8'));
assert.equal(ssContents[0].timestamp, 668545858.596, 'unexpected screenshot json');
fs.unlinkSync(ssJSONFilename);
});
});

describe('prepareAssets', () => {
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"build-all:task:windows": "yarn build-extension && yarn build-viewer",
"build-extension": "cd ./lighthouse-extension && yarn build",
"build-viewer": "cd ./lighthouse-viewer && yarn build",
"clean": "rimraf *.report.html *.report.dom.html *.report.json *.screenshots.html *.screenshots.json *.devtoolslog.json *.trace.json || true",
"clean": "rimraf *.report.html *.report.dom.html *.report.json *.devtoolslog.json *.trace.json || true",
"lint": "[ \"$CI\" = true ] && eslint --quiet -f codeframe . || eslint .",
"smoke": "node lighthouse-cli/test/smokehouse/run-smoke.js",
"debug": "node --inspect-brk ./lighthouse-cli/index.js",
Expand Down
6 changes: 3 additions & 3 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ Logging:
--quiet Displays no progress, debug logs or errors [boolean]

Configuration:
--save-assets Save the trace contents & screenshots to disk [boolean]
--save-assets Save the trace & devtools log to disk [boolean]
--list-all-audits Prints a list of all available audits and exits [boolean]
--list-trace-categories Prints a list of all required trace categories and exits [boolean]
--additional-trace-categories Additional categories to capture with the trace (comma-delimited).
Expand Down Expand Up @@ -97,7 +97,7 @@ Examples:
lighthouse <url> --view Opens the HTML report in a browser after the run completes
lighthouse <url> --config-path=./myconfig.js Runs Lighthouse with your own configuration: custom audits, report
generation, etc.
lighthouse <url> --output=json --output-path=./report.json --save-assets Save trace, screenshots, and named JSON report.
lighthouse <url> --output=json --output-path=./report.json --save-assets Save trace, devtoolslog, and named JSON report.
lighthouse <url> --disable-device-emulation Disable device emulation and all throttling.
--throttling-method=provided
lighthouse <url> --chrome-flags="--window-size=412,732" Launch Chrome with a specific window size
Expand Down Expand Up @@ -129,7 +129,7 @@ lighthouse --output json --output html

lighthouse --output-path=~/mydir/foo.out --save-assets
# saves `~/mydir/foo.report.html`
# saves `~/mydir/foo-0.trace.json` and `~/mydir/foo-0.screenshots.html`
# saves `~/mydir/foo-0.trace.json` and `~/mydir/foo-0.devtoolslog.json`

lighthouse --output-path=./report.json --output json
# saves `./report.json`
Expand Down