| /** |
| * Copyright 2017 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. |
| */ |
| |
| const {helper, debugError, assert} = require('./helper'); |
| |
| const {EVALUATION_SCRIPT_URL} = require('./ExecutionContext'); |
| |
| /** |
| * @typedef {Object} CoverageEntry |
| * @property {string} url |
| * @property {string} text |
| * @property {!Array<!{start: number, end: number}>} ranges |
| */ |
| |
| class Coverage { |
| /** |
| * @param {!Puppeteer.CDPSession} client |
| */ |
| constructor(client) { |
| this._jsCoverage = new JSCoverage(client); |
| this._cssCoverage = new CSSCoverage(client); |
| } |
| |
| /** |
| * @param {!{resetOnNavigation?: boolean, reportAnonymousScripts?: boolean}} options |
| */ |
| async startJSCoverage(options) { |
| return await this._jsCoverage.start(options); |
| } |
| |
| /** |
| * @return {!Promise<!Array<!CoverageEntry>>} |
| */ |
| async stopJSCoverage() { |
| return await this._jsCoverage.stop(); |
| } |
| |
| /** |
| * @param {{resetOnNavigation?: boolean}=} options |
| */ |
| async startCSSCoverage(options) { |
| return await this._cssCoverage.start(options); |
| } |
| |
| /** |
| * @return {!Promise<!Array<!CoverageEntry>>} |
| */ |
| async stopCSSCoverage() { |
| return await this._cssCoverage.stop(); |
| } |
| } |
| |
| module.exports = {Coverage}; |
| |
| class JSCoverage { |
| /** |
| * @param {!Puppeteer.CDPSession} client |
| */ |
| constructor(client) { |
| this._client = client; |
| this._enabled = false; |
| this._scriptURLs = new Map(); |
| this._scriptSources = new Map(); |
| this._eventListeners = []; |
| this._resetOnNavigation = false; |
| } |
| |
| /** |
| * @param {!{resetOnNavigation?: boolean, reportAnonymousScripts?: boolean}} options |
| */ |
| async start(options = {}) { |
| assert(!this._enabled, 'JSCoverage is already enabled'); |
| const { |
| resetOnNavigation = true, |
| reportAnonymousScripts = false |
| } = options; |
| this._resetOnNavigation = resetOnNavigation; |
| this._reportAnonymousScripts = reportAnonymousScripts; |
| this._enabled = true; |
| this._scriptURLs.clear(); |
| this._scriptSources.clear(); |
| this._eventListeners = [ |
| helper.addEventListener(this._client, 'Debugger.scriptParsed', this._onScriptParsed.bind(this)), |
| helper.addEventListener(this._client, 'Runtime.executionContextsCleared', this._onExecutionContextsCleared.bind(this)), |
| ]; |
| await Promise.all([ |
| this._client.send('Profiler.enable'), |
| this._client.send('Profiler.startPreciseCoverage', {callCount: false, detailed: true}), |
| this._client.send('Debugger.enable'), |
| this._client.send('Debugger.setSkipAllPauses', {skip: true}) |
| ]); |
| } |
| |
| _onExecutionContextsCleared() { |
| if (!this._resetOnNavigation) |
| return; |
| this._scriptURLs.clear(); |
| this._scriptSources.clear(); |
| } |
| |
| /** |
| * @param {!Protocol.Debugger.scriptParsedPayload} event |
| */ |
| async _onScriptParsed(event) { |
| // Ignore puppeteer-injected scripts |
| if (event.url === EVALUATION_SCRIPT_URL) |
| return; |
| // Ignore other anonymous scripts unless the reportAnonymousScripts option is true. |
| if (!event.url && !this._reportAnonymousScripts) |
| return; |
| try { |
| const response = await this._client.send('Debugger.getScriptSource', {scriptId: event.scriptId}); |
| this._scriptURLs.set(event.scriptId, event.url); |
| this._scriptSources.set(event.scriptId, response.scriptSource); |
| } catch (e) { |
| // This might happen if the page has already navigated away. |
| debugError(e); |
| } |
| } |
| |
| /** |
| * @return {!Promise<!Array<!CoverageEntry>>} |
| */ |
| async stop() { |
| assert(this._enabled, 'JSCoverage is not enabled'); |
| this._enabled = false; |
| const [profileResponse] = await Promise.all([ |
| this._client.send('Profiler.takePreciseCoverage'), |
| this._client.send('Profiler.stopPreciseCoverage'), |
| this._client.send('Profiler.disable'), |
| this._client.send('Debugger.disable'), |
| ]); |
| helper.removeEventListeners(this._eventListeners); |
| |
| const coverage = []; |
| for (const entry of profileResponse.result) { |
| let url = this._scriptURLs.get(entry.scriptId); |
| if (!url && this._reportAnonymousScripts) |
| url = 'debugger://VM' + entry.scriptId; |
| const text = this._scriptSources.get(entry.scriptId); |
| if (text === undefined || url === undefined) |
| continue; |
| const flattenRanges = []; |
| for (const func of entry.functions) |
| flattenRanges.push(...func.ranges); |
| const ranges = convertToDisjointRanges(flattenRanges); |
| coverage.push({url, ranges, text}); |
| } |
| return coverage; |
| } |
| } |
| |
| class CSSCoverage { |
| /** |
| * @param {!Puppeteer.CDPSession} client |
| */ |
| constructor(client) { |
| this._client = client; |
| this._enabled = false; |
| this._stylesheetURLs = new Map(); |
| this._stylesheetSources = new Map(); |
| this._eventListeners = []; |
| this._resetOnNavigation = false; |
| } |
| |
| /** |
| * @param {{resetOnNavigation?: boolean}=} options |
| */ |
| async start(options = {}) { |
| assert(!this._enabled, 'CSSCoverage is already enabled'); |
| const {resetOnNavigation = true} = options; |
| this._resetOnNavigation = resetOnNavigation; |
| this._enabled = true; |
| this._stylesheetURLs.clear(); |
| this._stylesheetSources.clear(); |
| this._eventListeners = [ |
| helper.addEventListener(this._client, 'CSS.styleSheetAdded', this._onStyleSheet.bind(this)), |
| helper.addEventListener(this._client, 'Runtime.executionContextsCleared', this._onExecutionContextsCleared.bind(this)), |
| ]; |
| await Promise.all([ |
| this._client.send('DOM.enable'), |
| this._client.send('CSS.enable'), |
| this._client.send('CSS.startRuleUsageTracking'), |
| ]); |
| } |
| |
| _onExecutionContextsCleared() { |
| if (!this._resetOnNavigation) |
| return; |
| this._stylesheetURLs.clear(); |
| this._stylesheetSources.clear(); |
| } |
| |
| /** |
| * @param {!Protocol.CSS.styleSheetAddedPayload} event |
| */ |
| async _onStyleSheet(event) { |
| const header = event.header; |
| // Ignore anonymous scripts |
| if (!header.sourceURL) |
| return; |
| try { |
| const response = await this._client.send('CSS.getStyleSheetText', {styleSheetId: header.styleSheetId}); |
| this._stylesheetURLs.set(header.styleSheetId, header.sourceURL); |
| this._stylesheetSources.set(header.styleSheetId, response.text); |
| } catch (e) { |
| // This might happen if the page has already navigated away. |
| debugError(e); |
| } |
| } |
| |
| /** |
| * @return {!Promise<!Array<!CoverageEntry>>} |
| */ |
| async stop() { |
| assert(this._enabled, 'CSSCoverage is not enabled'); |
| this._enabled = false; |
| const ruleTrackingResponse = await this._client.send('CSS.stopRuleUsageTracking'); |
| await Promise.all([ |
| this._client.send('CSS.disable'), |
| this._client.send('DOM.disable'), |
| ]); |
| helper.removeEventListeners(this._eventListeners); |
| |
| // aggregate by styleSheetId |
| const styleSheetIdToCoverage = new Map(); |
| for (const entry of ruleTrackingResponse.ruleUsage) { |
| let ranges = styleSheetIdToCoverage.get(entry.styleSheetId); |
| if (!ranges) { |
| ranges = []; |
| styleSheetIdToCoverage.set(entry.styleSheetId, ranges); |
| } |
| ranges.push({ |
| startOffset: entry.startOffset, |
| endOffset: entry.endOffset, |
| count: entry.used ? 1 : 0, |
| }); |
| } |
| |
| const coverage = []; |
| for (const styleSheetId of this._stylesheetURLs.keys()) { |
| const url = this._stylesheetURLs.get(styleSheetId); |
| const text = this._stylesheetSources.get(styleSheetId); |
| const ranges = convertToDisjointRanges(styleSheetIdToCoverage.get(styleSheetId) || []); |
| coverage.push({url, ranges, text}); |
| } |
| |
| return coverage; |
| } |
| } |
| |
| /** |
| * @param {!Array<!{startOffset:number, endOffset:number, count:number}>} nestedRanges |
| * @return {!Array<!{start:number, end:number}>} |
| */ |
| function convertToDisjointRanges(nestedRanges) { |
| const points = []; |
| for (const range of nestedRanges) { |
| points.push({ offset: range.startOffset, type: 0, range }); |
| points.push({ offset: range.endOffset, type: 1, range }); |
| } |
| // Sort points to form a valid parenthesis sequence. |
| points.sort((a, b) => { |
| // Sort with increasing offsets. |
| if (a.offset !== b.offset) |
| return a.offset - b.offset; |
| // All "end" points should go before "start" points. |
| if (a.type !== b.type) |
| return b.type - a.type; |
| const aLength = a.range.endOffset - a.range.startOffset; |
| const bLength = b.range.endOffset - b.range.startOffset; |
| // For two "start" points, the one with longer range goes first. |
| if (a.type === 0) |
| return bLength - aLength; |
| // For two "end" points, the one with shorter range goes first. |
| return aLength - bLength; |
| }); |
| |
| const hitCountStack = []; |
| const results = []; |
| let lastOffset = 0; |
| // Run scanning line to intersect all ranges. |
| for (const point of points) { |
| if (hitCountStack.length && lastOffset < point.offset && hitCountStack[hitCountStack.length - 1] > 0) { |
| const lastResult = results.length ? results[results.length - 1] : null; |
| if (lastResult && lastResult.end === lastOffset) |
| lastResult.end = point.offset; |
| else |
| results.push({start: lastOffset, end: point.offset}); |
| } |
| lastOffset = point.offset; |
| if (point.type === 0) |
| hitCountStack.push(point.range.count); |
| else |
| hitCountStack.pop(); |
| } |
| // Filter out empty ranges. |
| return results.filter(range => range.end - range.start > 1); |
| } |
| |