How to use isShadowHost method in wpt

Best JavaScript code snippet using wpt

domstats.js

Source:domstats.js

1/**2 * @license Copyright 2017 Google Inc. All Rights Reserved.3 * 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.04 * 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.5 */6// @ts-nocheck7/**8 * @fileoverview Gathers stats about the max height and width of the DOM tree9 * and total number of nodes used on the page.10 */11/* global ShadowRoot */12'use strict';13const Gatherer = require('../gatherer');14/**15 * Gets the opening tag text of the given node.16 * @param {Element} element17 * @return {?string}18 */19/* istanbul ignore next */20function getOuterHTMLSnippet(element) {21  const reOpeningTag = /^.*?>/;22  const match = element.outerHTML.match(reOpeningTag);23  return match && match[0];24}25/**26 * Constructs a pretty label from element's selectors. For example, given27 * <div id="myid" class="myclass">, returns 'div#myid.myclass'.28 * @param {Element} element29 * @return {string}30 */31/* istanbul ignore next */32function createSelectorsLabel(element) {33  let name = element.localName || '';34  const idAttr = element.getAttribute && element.getAttribute('id');35  if (idAttr) {36    name += `#${idAttr}`;37  }38  // svg elements return SVGAnimatedString for .className, which is an object.39  // Stringify classList instead.40  if (element.classList) {41    const className = element.classList.toString();42    if (className) {43      name += `.${className.trim().replace(/\s+/g, '.')}`;44    }45  } else if (ShadowRoot.prototype.isPrototypeOf(element)) {46    name += '#shadow-root';47  }48  return name;49}50/**51 * @param {Node} element52 * @return {Array<string>}53 */54/* istanbul ignore next */55function elementPathInDOM(element) {56  const visited = new Set();57  const path = [createSelectorsLabel(element)];58  let node = element;59  while (node) {60    visited.add(node);61    // Anchor elements have a .host property. Be sure we've found a shadow root62    // host and not an anchor.63    if (ShadowRoot.prototype.isPrototypeOf(node)) {64      const isShadowHost = node.host && node.localName !== 'a';65      node = isShadowHost ? node.host : node.parentElement;66    } else {67      const isShadowHost = node.parentNode && node.parentNode.host &&68                           node.parentNode.localName !== 'a';69      node = isShadowHost ? node.parentNode.host : node.parentElement;70    }71    if (visited.has(node)) {72      node = null;73    }74    if (node) {75      path.unshift(createSelectorsLabel(node));76    }77  }78  return path;79}80/**81 * Calculates the maximum tree depth of the DOM.82 * @param {HTMLElement} element Root of the tree to look in.83 * @param {boolean=} deep True to include shadow roots. Defaults to true.84 * @return {LH.Artifacts.DOMStats}85 */86/* istanbul ignore next */87function getDOMStats(element, deep=true) {88  let deepestNode = null;89  let maxDepth = 0;90  let maxWidth = 0;91  let parentWithMostChildren = null;92  /**93   * @param {Element} element94   * @param {number} depth95   */96  const _calcDOMWidthAndHeight = function(element, depth=1) {97    if (depth > maxDepth) {98      deepestNode = element;99      maxDepth = depth;100    }101    if (element.children.length > maxWidth) {102      parentWithMostChildren = element;103      maxWidth = element.children.length;104    }105    let child = element.firstElementChild;106    while (child) {107      _calcDOMWidthAndHeight(child, depth + 1);108      // If node has shadow dom, traverse into that tree.109      if (deep && child.shadowRoot) {110        _calcDOMWidthAndHeight(child.shadowRoot, depth + 1);111      }112      child = child.nextElementSibling;113    }114    return {maxDepth, maxWidth};115  };116  const result = _calcDOMWidthAndHeight(element);117  return {118    depth: {119      max: result.maxDepth,120      pathToElement: elementPathInDOM(deepestNode),121      snippet: getOuterHTMLSnippet(deepestNode),122    },123    width: {124      max: result.maxWidth,125      pathToElement: elementPathInDOM(parentWithMostChildren),126      snippet: getOuterHTMLSnippet(parentWithMostChildren),127    },128  };129}130class DOMStats extends Gatherer {131  /**132   * @param {LH.Gatherer.PassContext} passContext133   * @return {Promise<LH.Artifacts['DOMStats']>}134   */135  afterPass(passContext) {136    const expression = `(function() {137      ${getOuterHTMLSnippet.toString()};138      ${createSelectorsLabel.toString()};139      ${elementPathInDOM.toString()};140      return (${getDOMStats.toString()}(document.documentElement));141    })()`;142    return passContext.driver.sendCommand('DOM.enable')143      .then(() => passContext.driver.evaluateAsync(expression, {useIsolation: true}))144      .then(results => passContext.driver.getElementsInDocument().then(allNodes => {145        results.totalDOMNodes = allNodes.length;146        return passContext.driver.sendCommand('DOM.disable').then(() => results);147      }));148  }149}...

dom_structure.js

Source:dom_structure.js

1(function() {2    function getOuterHTMLSnippet(element) {3        const reOpeningTag = /^.*?>/;4        const match = element.outerHTML.match(reOpeningTag);5        return match && match[0];6    };7    function createSelectorsLabel(element) {8        let name = element.localName || '';9        const idAttr = element.getAttribute && element.getAttribute('id');10        if (idAttr) {11            name += `#${idAttr}`;12        }13        // svg elements return SVGAnimatedString for .className, which is an object.14        // Stringify classList instead.15        if (element.classList) {16            const className = element.classList.toString();17            if (className) {18                name += `.${className.trim().replace(/\s+/g, '.')}`;19            }20        } else if (ShadowRoot.prototype.isPrototypeOf(element)) {21            name += '#shadow-root';22        }23        return name;24    };25    function elementPathInDOM(element) {26        const visited = new Set();27        const path = [createSelectorsLabel(element)];28        let node = element;29        while (node) {30            visited.add(node);31            // Anchor elements have a .host property. Be sure we've found a shadow root32            // host and not an anchor.33            if (ShadowRoot.prototype.isPrototypeOf(node)) {34                const isShadowHost = node.host && node.localName !== 'a';35                node = isShadowHost ? node.host : node.parentElement;36            } else {37                const isShadowHost = node.parentNode && node.parentNode.host &&38                    node.parentNode.localName !== 'a';39                node = isShadowHost ? node.parentNode.host : node.parentElement;40            }41            if (visited.has(node)) {42                node = null;43            }44            if (node) {45                path.unshift(createSelectorsLabel(node));46            }47        }48        return path;49    };50    return (function getDOMStats(element, deep = true) {51        let deepestNode = null;52        let maxDepth = 0;53        let maxWidth = 0;54        let parentWithMostChildren = null;55        /**56         * @param {Element} element57         * @param {number} depth58         */59        const _calcDOMWidthAndHeight = function(element, depth = 1) {60            if (depth > maxDepth) {61                deepestNode = element;62                maxDepth = depth;63            }64            if (element.children.length > maxWidth) {65                parentWithMostChildren = element;66                maxWidth = element.children.length;67            }68            let child = element.firstElementChild;69            while (child) {70                _calcDOMWidthAndHeight(child, depth + 1);71                // If node has shadow dom, traverse into that tree.72                if (deep && child.shadowRoot) {73                    _calcDOMWidthAndHeight(child.shadowRoot, depth + 1);74                }75                child = child.nextElementSibling;76            }77            return { maxDepth, maxWidth };78        };79        const result = _calcDOMWidthAndHeight(element);80        return {81            depth: {82                max: result.maxDepth,83                pathToElement: elementPathInDOM(deepestNode),84                snippet: getOuterHTMLSnippet(deepestNode),85            },86            width: {87                max: result.maxWidth,88                pathToElement: elementPathInDOM(parentWithMostChildren),89                snippet: getOuterHTMLSnippet(parentWithMostChildren),90            },91        };92    }(document.documentElement));...

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.