diff --git a/lib/cli/cli.js b/lib/cli/cli.js index 2ecc6a6b7..8f5fdf607 100644 --- a/lib/cli/cli.js +++ b/lib/cli/cli.js @@ -565,6 +565,12 @@ export async function parseCommandLine() { describe: 'Make one extra run that collects the profiling trace log (no other metrics is collected). For Chrome it will collect the timeline trace, for Firefox it will get the Geckoprofiler trace. This means you do not need to get the trace for all runs and can skip the overhead it produces.' }) + .option('browsertime.enableVideoRun', { + alias: 'enableVideoRun', + type: 'boolean', + describe: + 'Make one extra run that collects video and visual metrics. This means you can do your runs with --visualMetrics true --video false --enableVideoRun true to collect visual metrics from all runs and save a video from the profile/video run. If you run it together with --enableProfileRun it will also collect profiling trace.' + }) .option('browsertime.videoParams.filmstripFullSize', { alias: 'videoParams.filmstripFullSize', type: 'boolean', diff --git a/lib/plugins/browsertime/analyzer.js b/lib/plugins/browsertime/analyzer.js index 5aa126837..5a6403237 100644 --- a/lib/plugins/browsertime/analyzer.js +++ b/lib/plugins/browsertime/analyzer.js @@ -66,22 +66,33 @@ async function preWarmServer(urls, options, scriptOrMultiple) { } async function extraProfileRun(urls, options, scriptOrMultiple) { - log.info('Make one extra run to collect trace information'); + log.info('Make one extra run to collect trace/video information'); options.iterations = 1; - if (options.browser === 'firefox') { - options.firefox.geckoProfiler = true; - } else if (options.browser === 'chrome') { - options.chrome.enableTraceScreenshots = true; - options.chrome.traceCategory = ['disabled-by-default-v8.cpu_profiler']; - options.chrome.timeline = true; + if (options.enableProfileRun) { + if (options.browser === 'firefox') { + options.firefox.geckoProfiler = true; + } else if (options.browser === 'chrome') { + options.chrome.enableTraceScreenshots = true; + options.chrome.traceCategory = ['disabled-by-default-v8.cpu_profiler']; + options.chrome.timeline = true; + } + } + if (options.enableVideoRun) { + options.video = true; + options.visualMetrics = true; + } else { + options.video = false; + options.visualMetrics = false; } - options.video = false; - options.visualMetrics = false; const traceEngine = new BrowsertimeEngine(options); + const scriptCategories = await browserScripts.allScriptCategories(); + let scriptsByCategory = + await browserScripts.getScriptsForCategories(scriptCategories); + await traceEngine.start(); await (scriptOrMultiple - ? traceEngine.runMultiple(urls, {}) - : traceEngine.run(urls, {})); + ? traceEngine.runMultiple(urls, scriptsByCategory) + : traceEngine.run(urls, scriptsByCategory)); await traceEngine.stop(); } @@ -187,13 +198,13 @@ export async function analyzeUrl( await engine.start(); if (scriptOrMultiple) { const res = await engine.runMultiple(url, scriptsByCategory, asyncScript); - if (btOptions.enableProfileRun) { + if (btOptions.enableProfileRun || btOptions.enableVideoRun) { await extraProfileRun(url, btOptions, scriptOrMultiple); } return res; } else { const res = await engine.run(url, scriptsByCategory, asyncScript); - if (btOptions.enableProfileRun) { + if (btOptions.enableProfileRun || btOptions.enableVideoRun) { await extraProfileRun(url, btOptions, scriptOrMultiple); } return res; diff --git a/lib/plugins/html/templates/url/summary/index.pug b/lib/plugins/html/templates/url/summary/index.pug index 86150a80d..441039183 100644 --- a/lib/plugins/html/templates/url/summary/index.pug +++ b/lib/plugins/html/templates/url/summary/index.pug @@ -258,7 +258,7 @@ block content section#waterfall-panel include ../waterfall/index.pug - if options.browsertime.video + if options.browsertime.video || options.browsertime.enableVideoRun section#video-panel include ../video/index.pug diff --git a/lib/plugins/html/templates/url/summary/tabs.pug b/lib/plugins/html/templates/url/summary/tabs.pug index d6fdef4a5..7d364bc9b 100644 --- a/lib/plugins/html/templates/url/summary/tabs.pug +++ b/lib/plugins/html/templates/url/summary/tabs.pug @@ -7,7 +7,7 @@ if d.browsertime && d.browsertime.pageSummary a(id='metrics', href='#metrics', onclick='return selectTab(this, true);') | Metrics - if options.browsertime.video + if options.browsertime.video || options.enableVideoRun a(id='video', href='#video', onclick='return selectTab(this, true);') | Video if (options.browsertime.visualMetrics && options.videoParams.createFilmstrip) || options.browsertime.chrome && options.browsertime.chrome.enableTraceScreenshots diff --git a/lib/plugins/html/templates/url/video/index.pug b/lib/plugins/html/templates/url/video/index.pug index f35262224..9361aa67f 100644 --- a/lib/plugins/html/templates/url/video/index.pug +++ b/lib/plugins/html/templates/url/video/index.pug @@ -1,5 +1,6 @@ -- const videoIndex = medianRun ? medianRun.runIndex : iteration; +- let videoIndex = medianRun ? medianRun.runIndex : iteration; - const width = options.mobile || options.android || (options.safari && options.safari.useSimulator) ? '400' : '800' +- videoIndex = options.browsertime.enableVideoRun ? '1' : videoIndex; small || @@ -13,6 +14,11 @@ h3 Video video(controls, preload='none', width=width) source(src='data/video/' + videoIndex +'.mp4', type='video/mp4') +if options.browsertime.enableVideoRun + p Video from --enableVideoRun + a#download-video -- const videoPath = 'data/video/' + (iteration ? iteration : medianRun.runIndex ) +'.mp4' +- let downloadable = iteration ? iteration : medianRun.runIndex; +- downloadable = options.browsertime.enableVideoRun ? '1' : downloadable; +- const videoPath = 'data/video/' + downloadable +'.mp4' a.button.button-download(href=videoPath, download=downloadName + '-video.mp4') Download video