core(driver): create eval code using interface

lighthouse-core/gather/driver.js

@@ -418,17 +418,86 @@ class Driver {
  });
  }
 
+ /**
+ * Deprecated: renamed to `evaluate`.
+ * @param {string} expression
+ * @param {{useIsolation?: boolean}=} options
+ * @return {Promise<*>}
+ */
+ async evaluateAsync(expression, options = {}) {
+ return this.evaluate(expression, options);
+ }
+
+ /**
+ * Evaluate an expression in the context of the current page. If useIsolation is true, the expression
+ * will be evaluated in a content script that has access to the page's DOM but whose JavaScript state
+ * is completely separate.
+ * Returns a promise that resolves on the expression's value.
+ * See the documentation for `createEvalCode` in `page-functions.js`.
+ * @template T, R
+ * @param {string | ((...args: T[]) => R)} expressionOrMainFn
+ * @param {{useIsolation?: boolean, args?: T[], deps?: (Function|string)[]}=} options
+ * @return {Promise<R>}
+ */
+ async evaluate(expressionOrMainFn, options = {}) {
+ if (typeof expressionOrMainFn !== 'string') {
+ expressionOrMainFn = pageFunctions.createEvalCode(expressionOrMainFn, {mode: 'iffe', ...options});
+ }
+ return this._evaluate(expressionOrMainFn, options);
+ }
+
+ /**
+ * Evaluate a statement in the context of a JavaScript object on the current page.
+ * Returns a promise that resolves on the expression's value.
+ * See the documentation for `createEvalCode` in `page-functions.js`.
+ * @template T, R
+ * @param {string | ((...args: T[]) => R)} statementOrMainFn
+ * @param {{objectId: string, args?: T[], deps?: (Function|string)[]}} options
+ * @return {Promise<R>}
+ */
+ async evaluateFunctionOnObject(statementOrMainFn, options) {
+ if (typeof statementOrMainFn !== 'string') {
+ statementOrMainFn = pageFunctions.createEvalCode(statementOrMainFn, {
+ mode: 'function',
+ ...options,
+ });
+ }
+
+ const response = await this.sendCommand('Runtime.callFunctionOn', {
+ objectId: options.objectId,
+ functionDeclaration: statementOrMainFn,
+ returnByValue: true,
+ awaitPromise: true,
+ });
+
+ if (response.exceptionDetails) {
+ // An error occurred before we could even create a Promise, should be *very* rare.
+ // Also occurs when the expression is not valid JavaScript.
+ const errorMessage = response.exceptionDetails.exception ?
+ response.exceptionDetails.exception.description :
+ response.exceptionDetails.text;
+ return Promise.reject(new Error(`Evaluation exception: ${errorMessage}`));
+ }
+
+ // TODO: check if __failedInBrowser happens here too.
+ if (response && response.result && response.result.value) {
+ return response.result.value;
+ }
+ return Promise.reject();
+ }
+
  /**
  * Evaluate an expression in the context of the current page. If useIsolation is true, the expression
  * will be evaluated in a content script that has access to the page's DOM but whose JavaScript state
  * is completely separate.
  * Returns a promise that resolves on the expression's value.
  * @param {string} expression
- * @param {{useIsolation?: boolean}=} options
+ * @param {{useIsolation?: boolean}} options
  * @return {Promise<*>}
  */
- async evaluateAsync(expression, options = {}) {
- const contextId = options.useIsolation ? await this._getOrCreateIsolatedContextId() : undefined;
+ async _evaluate(expression, options) {
+ const contextId =
+ options.useIsolation ? await this._getOrCreateIsolatedContextId() : undefined;
 
  try {
  // `await` is not redundant here because we want to `catch` the async errors

lighthouse-core/gather/fetcher.js

@@ -156,7 +156,8 @@ class Fetcher {
  document.body.appendChild(iframe);
  }
 
- await this.driver.evaluateAsync(`${injectIframe}(${JSON.stringify(url)})`, {
+ await this.driver.evaluate(injectIframe, {
+ args: [url],
  useIsolation: true,
  });
 

lighthouse-core/gather/gatherers/link-elements.js

@@ -9,7 +9,7 @@ const Gatherer = require('./gatherer.js');
 const URL = require('../../lib/url-shim.js').URL;
 const NetworkAnalyzer = require('../../lib/dependency-graph/simulator/network-analyzer.js');
 const LinkHeader = require('http-link-header');
-const {getElementsInDocumentString} = require('../../lib/page-functions.js');
+const {getElementsInDocument} = require('../../lib/page-functions.js');
 
 /* globals HTMLLinkElement */
 
@@ -48,9 +48,7 @@ function getCrossoriginFromHeader(value) {
  */
 /* istanbul ignore next */
 function getLinkElementsInDOM() {
- /** @type {Array<HTMLOrSVGElement>} */
- // @ts-ignore - getElementsInDocument put into scope via stringification
- const browserElements = getElementsInDocument('link'); // eslint-disable-line no-undef
+ const browserElements = getElementsInDocument('link');
  /** @type {LH.Artifacts['LinkElements']} */
  const linkElements = [];
 
@@ -81,12 +79,10 @@ class LinkElements extends Gatherer {
  static getLinkElementsInDOM(passContext) {
  // We'll use evaluateAsync because the `node.getAttribute` method doesn't actually normalize
  // the values like access from JavaScript does.
- return passContext.driver.evaluateAsync(`(() => {
- ${getElementsInDocumentString};
- ${getLinkElementsInDOM};
-
- return getLinkElementsInDOM();
- })()`, {useIsolation: true});
+ return passContext.driver.evaluate(getLinkElementsInDOM, {
+ useIsolation: true,
+ deps: [getElementsInDocument],
+ });
  }
 
  /**

lighthouse-core/gather/gatherers/meta-elements.js

@@ -6,7 +6,27 @@
 'use strict';
 
 const Gatherer = require('./gatherer.js');
-const getElementsInDocumentString = require('../../lib/page-functions.js').getElementsInDocumentString; // eslint-disable-line max-len
+const {getElementsInDocument} = require('../../lib/page-functions.js');
+
+/* istanbul ignore next */
+function collectMetaElements() {
+ const metas = /** @type {HTMLMetaElement[]} */ (getElementsInDocument('head meta'));
+ return metas.map(meta => {
+ /** @param {string} name */
+ const getAttribute = name => {
+ const attr = meta.attributes.getNamedItem(name);
+ if (!attr) return;
+ return attr.value;
+ };
+ return {
+ name: meta.name.toLowerCase(),
+ content: meta.content,
+ property: getAttribute('property'),
+ httpEquiv: meta.httpEquiv ? meta.httpEquiv.toLowerCase() : undefined,
+ charset: getAttribute('charset'),
+ };
+ });
+}
 
 class MetaElements extends Gatherer {
  /**
@@ -18,19 +38,10 @@ class MetaElements extends Gatherer {
 
  // We'll use evaluateAsync because the `node.getAttribute` method doesn't actually normalize
  // the values like access from JavaScript does.
- return driver.evaluateAsync(`(() => {
- ${getElementsInDocumentString};
-
- return getElementsInDocument('head meta').map(meta => {
- return {
- name: meta.name.toLowerCase(),
- content: meta.content,
- property: meta.attributes.property ? meta.attributes.property.value : undefined,
- httpEquiv: meta.httpEquiv ? meta.httpEquiv.toLowerCase() : undefined,
- charset: meta.attributes.charset ? meta.attributes.charset.value : undefined,
- };
- });
- })()`, {useIsolation: true});
+ return driver.evaluate(collectMetaElements, {
+ useIsolation: true,
+ deps: [getElementsInDocument],
+ });
  }
 }
 

lighthouse-core/gather/gatherers/script-elements.js

@@ -8,19 +8,15 @@
 const Gatherer = require('./gatherer.js');
 const NetworkAnalyzer = require('../../lib/dependency-graph/simulator/network-analyzer.js');
 const NetworkRequest = require('../../lib/network-request.js');
-const getElementsInDocumentString = require('../../lib/page-functions.js').getElementsInDocumentString; // eslint-disable-line max-len
+const {getElementsInDocument, getNodePath} = require('../../lib/page-functions.js');
 const pageFunctions = require('../../lib/page-functions.js');
 
-/* global getNodePath */
-
 /**
  * @return {LH.Artifacts['ScriptElements']}
  */
 /* istanbul ignore next */
-function collectAllScriptElements() {
- /** @type {HTMLScriptElement[]} */
- // @ts-ignore - getElementsInDocument put into scope via stringification
- const scripts = getElementsInDocument('script'); // eslint-disable-line no-undef
+function collectScriptElements() {
+ const scripts = getElementsInDocument('script');
 
  return scripts.map(script => {
  return {
@@ -30,7 +26,6 @@ function collectAllScriptElements() {
  async: script.async,
  defer: script.defer,
  source: /** @type {'head'|'body'} */ (script.closest('head') ? 'head' : 'body'),
- // @ts-ignore - getNodePath put into scope via stringification
  devtoolsNodePath: getNodePath(script),
  content: script.src ? null : script.text,
  requestId: null,
@@ -72,12 +67,13 @@ class ScriptElements extends Gatherer {
  const driver = passContext.driver;
  const mainResource = NetworkAnalyzer.findMainDocument(loadData.networkRecords, passContext.url);
 
- /** @type {LH.Artifacts['ScriptElements']} */
- const scripts = await driver.evaluateAsync(`(() => {
- ${getElementsInDocumentString}
- ${pageFunctions.getNodePathString};
- return (${collectAllScriptElements.toString()})();
- })()`, {useIsolation: true});
+ const scripts = await driver.evaluate(collectScriptElements, {
+ useIsolation: true,
+ deps: [
+ getElementsInDocument,
+ pageFunctions.getNodePathString,
+ ],
+ });
 
  for (const script of scripts) {
  if (script.content) script.requestId = mainResource.requestId;

lighthouse-core/gather/gatherers/seo/tap-targets.js

@@ -38,7 +38,7 @@ const tapTargetsSelector = TARGET_SELECTORS.join(',');
 
 /**
  * @param {HTMLElement} element
- * @returns {boolean}
+ * @return {boolean}
  */
 /* istanbul ignore next */
 function elementIsVisible(element) {
@@ -47,7 +47,7 @@ function elementIsVisible(element) {
 
 /**
  * @param {Element} element
- * @returns {LH.Artifacts.Rect[]}
+ * @return {LH.Artifacts.Rect[]}
  */
 /* istanbul ignore next */
 function getClientRects(element) {
@@ -69,17 +69,18 @@ function getClientRects(element) {
 
 /**
  * @param {Element} element
- * @returns {boolean}
+ * @param {string} tapTargetsSelector
+ * @return {boolean}
  */
 /* istanbul ignore next */
-function elementHasAncestorTapTarget(element) {
+function elementHasAncestorTapTarget(element, tapTargetsSelector) {
  if (!element.parentElement) {
  return false;
  }
  if (element.parentElement.matches(tapTargetsSelector)) {
  return true;
  }
- return elementHasAncestorTapTarget(element.parentElement);
+ return elementHasAncestorTapTarget(element.parentElement, tapTargetsSelector);
 }
 
 /**
@@ -123,7 +124,7 @@ function hasTextNodeSiblingsFormingTextBlock(element) {
  * Makes a reasonable guess, but for example gets it wrong if the element is surrounded by other
  * HTML elements instead of direct text nodes.
  * @param {Element} element
- * @returns {boolean}
+ * @return {boolean}
  */
 /* istanbul ignore next */
 function elementIsInTextBlock(element) {
@@ -177,7 +178,7 @@ function elementCenterIsAtZAxisTop(el, elCenterPoint) {
 /**
  * Finds all position sticky/absolute elements on the page and adds a class
  * that disables pointer events on them.
- * @returns {() => void} - undo function to re-enable pointer events
+ * @return {() => void} - undo function to re-enable pointer events
  */
 /* istanbul ignore next */
 function disableFixedAndStickyElementPointerEvents() {
@@ -202,10 +203,11 @@ function disableFixedAndStickyElementPointerEvents() {
 }
 
 /**
- * @returns {LH.Artifacts.TapTarget[]}
+ * @param {string} tapTargetsSelector
+ * @return {LH.Artifacts.TapTarget[]}
  */
 /* istanbul ignore next */
-function gatherTapTargets() {
+function gatherTapTargets(tapTargetsSelector) {
  /** @type {LH.Artifacts.TapTarget[]} */
  const targets = [];
 
@@ -223,7 +225,7 @@ function gatherTapTargets() {
  const tapTargetsWithClientRects = [];
  tapTargetElements.forEach(tapTargetElement => {
  // Filter out tap targets that are likely to cause false failures:
- if (elementHasAncestorTapTarget(tapTargetElement)) {
+ if (elementHasAncestorTapTarget(tapTargetElement, tapTargetsSelector)) {
  // This is usually intentional, either the tap targets trigger the same action
  // or there's a child with a related action (like a delete button for an item)
  return;
@@ -305,30 +307,28 @@ class TapTargets extends Gatherer {
  * @return {Promise<LH.Artifacts.TapTarget[]>} All visible tap targets with their positions and sizes
  */
  afterPass(passContext) {
- const expression = `(function() {
- const tapTargetsSelector = "${tapTargetsSelector}";
- ${pageFunctions.getElementsInDocumentString};
- ${disableFixedAndStickyElementPointerEvents.toString()};
- ${elementIsVisible.toString()};
- ${elementHasAncestorTapTarget.toString()};
- ${elementCenterIsAtZAxisTop.toString()}
- ${truncate.toString()};
- ${getClientRects.toString()};
- ${hasTextNodeSiblingsFormingTextBlock.toString()};
- ${elementIsInTextBlock.toString()};
- ${getRectArea.toString()};
- ${getLargestRect.toString()};
- ${getRectCenterPoint.toString()};
- ${rectContains.toString()};
- ${pageFunctions.getNodePathString};
- ${pageFunctions.getNodeSelectorString};
- ${pageFunctions.getNodeLabelString};
- ${gatherTapTargets.toString()};
-
- return gatherTapTargets();
- })()`;
-
- return passContext.driver.evaluateAsync(expression, {useIsolation: true});
+ return passContext.driver.evaluate(gatherTapTargets, {
+ args: [tapTargetsSelector],
+ useIsolation: true,
+ deps: [
+ pageFunctions.getElementsInDocument,
+ disableFixedAndStickyElementPointerEvents,
+ elementIsVisible,
+ elementHasAncestorTapTarget,
+ elementCenterIsAtZAxisTop,
+ truncate,
+ getClientRects,
+ hasTextNodeSiblingsFormingTextBlock,
+ elementIsInTextBlock,
+ getRectArea,
+ getLargestRect,
+ getRectCenterPoint,
+ rectContains,
+ pageFunctions.getNodePath,
+ pageFunctions.getNodeSelectorString,
+ pageFunctions.getNodeLabelString,
+ ],
+ });
  }
 }