@gemx-dev/clarity-js 0.8.39

package/src/layout/node.ts

@@ -0,0 +1,294 @@
+import { Constant, Source } from "@clarity-types/layout";
+import { Code, Dimension, Severity } from "@clarity-types/data";
+import * as dom from "./dom";
+import * as event from "@src/core/event";
+import * as dimension from "@src/data/dimension";
+import * as internal from "@src/diagnostic/internal";
+import * as interaction from "@src/interaction";
+import * as mutation from "@src/layout/mutation";
+import * as schema from "@src/layout/schema";
+import * as custom from "@src/layout/custom";
+import { checkDocumentStyles } from "@src/layout/style";
+import { electron } from "@src/data/metadata";
+
+const IGNORE_ATTRIBUTES = ["title", "alt", "onload", "onfocus", "onerror", "data-drupal-form-submit-last", "aria-label"];
+const newlineRegex = /[\r\n]+/g;
+
+export default function (node: Node, source: Source, timestamp: number): Node {
+    let child: Node = null;
+
+    // Do not track this change if we are attempting to remove a node before discovering it
+    if (source === Source.ChildListRemove && dom.has(node) === false) { return child; }
+
+    // Special handling for text nodes that belong to style nodes
+    if (source !== Source.Discover &&
+        node.nodeType === Node.TEXT_NODE &&
+        node.parentElement &&
+        node.parentElement.tagName === "STYLE") {
+        node = node.parentNode;
+    }
+
+    let add = dom.has(node) === false;
+    let call = add ? "add" : "update";
+    let parent = node.parentElement ? node.parentElement : null;
+    let insideFrame = node.ownerDocument !== document;
+    switch (node.nodeType) {
+        case Node.DOCUMENT_TYPE_NODE:
+            parent = insideFrame && node.parentNode ? dom.iframe(node.parentNode) : parent;
+            let docTypePrefix = insideFrame ? Constant.IFramePrefix : Constant.Empty;
+            let doctype = node as DocumentType;
+            let docName = doctype.name ? doctype.name : Constant.HTML; 
+            let docAttributes = { name: docName, publicId: doctype.publicId, systemId: doctype.systemId };
+            let docData = { tag: docTypePrefix + Constant.DocumentTag, attributes: docAttributes };
+            dom[call](node, parent, docData, source);
+            break;
+        case Node.DOCUMENT_NODE:
+            // We check for regions in the beginning when discovering document and
+            // later whenever there are new additions or modifications to DOM (mutations)
+            if (node === document) {
+                dom.parse(document);
+            }
+            checkDocumentStyles(node as Document, timestamp);
+            observe(node as Document);
+            break;
+        case Node.DOCUMENT_FRAGMENT_NODE:
+            let shadowRoot = (node as ShadowRoot);
+            if (shadowRoot.host) {
+                dom.parse(shadowRoot);
+                let type = typeof (shadowRoot.constructor);
+                if (type === Constant.Function && shadowRoot.constructor.toString().indexOf(Constant.NativeCode) >= 0) {
+                    observe(shadowRoot);
+                    
+                    // See: https://wicg.github.io/construct-stylesheets/ for more details on adoptedStyleSheets.
+                    // At the moment, we are only able to capture "open" shadow DOM nodes. If they are closed, they are not accessible.
+                    // In future we may decide to proxy "attachShadow" call to gain access, but at the moment, we don't want to
+                    // cause any unintended side effect to the page. We will re-evaluate after we gather more real world data on this.
+                    let style = Constant.Empty as string;
+                    let fragmentData = { tag: Constant.ShadowDomTag, attributes: { style } };
+                    dom[call](node, shadowRoot.host, fragmentData, source);
+                } else {
+                    // If the browser doesn't support shadow DOM natively, we detect that, and send appropriate tag back.
+                    // The differentiation is important because we don't have to observe pollyfill shadow DOM nodes,
+                    // the same way we observe real shadow DOM nodes (encapsulation provided by the browser).
+                    dom[call](node, shadowRoot.host, { tag: Constant.PolyfillShadowDomTag, attributes: {} }, source);
+                }
+                checkDocumentStyles(node as Document, timestamp);
+            }
+            break;
+        case Node.TEXT_NODE:
+            // In IE11 TEXT_NODE doesn't expose a valid parentElement property. Instead we need to lookup parentNode property.
+            parent = parent ? parent : node.parentNode as HTMLElement;
+            // Account for this text node only if we are tracking the parent node
+            // We do not wish to track text nodes for ignored parent nodes, like script tags
+            // Also, we do not track text nodes for STYLE tags
+            // The only exception is when we receive a mutation to remove the text node, in that case
+            // parent will be null, but we can still process the node by checking it's an update call.
+            if (call === "update" || (parent && dom.has(parent) && parent.tagName !== "STYLE" && parent.tagName !== "NOSCRIPT")) {
+                let textData = { tag: Constant.TextTag, value: node.nodeValue };
+                dom[call](node, parent, textData, source);
+            }
+            break;
+        case Node.ELEMENT_NODE:
+            let element = (node as HTMLElement);
+            let tag = element.tagName;
+            let attributes = getAttributes(element);
+            // In some cases, external libraries like vue-fragment, can modify parentNode property to not be in sync with the DOM
+            // For correctness, we first look at parentElement and if it not present then fall back to using parentNode
+            parent = node.parentElement ? node.parentElement : (node.parentNode ? node.parentNode as HTMLElement : null);
+            // If we encounter a node that is part of SVG namespace, prefix the tag with SVG_PREFIX
+            if (element.namespaceURI === Constant.SvgNamespace) { tag = Constant.SvgPrefix + tag; }
+
+            switch (tag) {
+                case "HTML":
+                    parent = insideFrame && parent ? dom.iframe(parent) : parent;
+                    let htmlPrefix = insideFrame ? Constant.IFramePrefix : Constant.Empty;
+                    let htmlData = { tag: htmlPrefix + tag, attributes };
+                    dom[call](node, parent, htmlData, source);
+                    break;
+                case "SCRIPT":
+                    if (Constant.Type in attributes && attributes[Constant.Type] === Constant.JsonLD) {
+                        try {
+                            schema.ld(JSON.parse((element as HTMLScriptElement).text.replace(newlineRegex, Constant.Empty)));
+                        } catch { /* do nothing */ }
+                    }
+                    break;
+                case "NOSCRIPT":
+                    // keeping the noscript tag but ignoring its contents. Some HTML markup relies on having these tags
+                    // to maintain parity with the original css view, but we don't want to execute any noscript in Clarity
+                    let noscriptData = { tag, attributes: {}, value: '' };
+                    dom[call](node, parent, noscriptData, source);
+                    break;
+                case "META":
+                    var key = (Constant.Property in attributes ?
+                                    Constant.Property : 
+                                    (Constant.Name in attributes ? Constant.Name : null));
+                    if (key && Constant.Content in attributes) {
+                        let content = attributes[Constant.Content]
+                        switch(attributes[key]) {
+                            case Constant.ogTitle:
+                                dimension.log(Dimension.MetaTitle, content)
+                                break;
+                            case Constant.ogType:
+                                dimension.log(Dimension.MetaType, content)
+                                break;
+                            case Constant.Generator:
+                                dimension.log(Dimension.Generator, content)
+                                break;
+                        }
+                    }
+                    break;
+                case "HEAD":
+                    let head = { tag, attributes };
+                    let l = insideFrame && node.ownerDocument?.location ? node.ownerDocument.location : location;
+                    head.attributes[Constant.Base] = l.protocol + "//" + l.host + l.pathname;
+                    dom[call](node, parent, head, source);
+                    break;
+                case "BASE":
+                    // Override the auto detected base path to explicit value specified in this tag
+                    let baseHead = dom.get(node.parentElement);
+                    if (baseHead) {
+                        // We create "a" element so we can generate protocol and hostname for relative paths like "/path/"
+                        let a = document.createElement("a");
+                        a.href = attributes["href"];
+                        baseHead.data.attributes[Constant.Base] = a.protocol + "//" + a.host + a.pathname;
+                    }
+                    break;
+                case "STYLE":
+                    let styleData = { tag, attributes, value: getStyleValue(element as HTMLStyleElement) };
+                    dom[call](node, parent, styleData, source);
+                    break;
+                case "IFRAME":
+                    let iframe = node as HTMLIFrameElement;
+                    let frameData = { tag, attributes };
+                    if (dom.sameorigin(iframe)) {
+                        mutation.monitor(iframe);
+                        frameData.attributes[Constant.SameOrigin] = "true";
+                        if (iframe.contentDocument && iframe.contentWindow && iframe.contentDocument.readyState !== "loading") {
+                            child = iframe.contentDocument;
+                        }
+                    }
+                    if (source === Source.ChildListRemove) {
+                        removeObserver(iframe);
+                    }
+                    dom[call](node, parent, frameData, source);
+                    break;
+                case "LINK":
+                    // electron stylesheets reference the local file system - translating those
+                    // to inline styles so playback can work
+                    if (electron && attributes['rel'] === Constant.StyleSheet) {
+                        for (var styleSheetIndex in Object.keys(document.styleSheets)) {
+                            var currentStyleSheet = document.styleSheets[styleSheetIndex];
+                            if (currentStyleSheet.ownerNode == element) {
+                                let syntheticStyleData = { tag: "STYLE", attributes, value: getCssRules(currentStyleSheet) };
+                                dom[call](node, parent, syntheticStyleData, source);
+                                break;
+                            }
+                        }
+                        break;
+                    }
+                    // for links that aren't electron style sheets we can process them normally
+                    let linkData = { tag, attributes };
+                    dom[call](node, parent, linkData, source);
+                    break;
+                case "VIDEO":
+                case "AUDIO":
+                case "SOURCE":
+                    // Ignoring any base64 src attribute for media elements to prevent big unused tokens to be sent and shock the network
+                    if (Constant.Src in attributes && attributes[Constant.Src].startsWith("data:")) {
+                        attributes[Constant.Src] = "";
+                    }
+                    let mediaTag = { tag, attributes };
+                    dom[call](node, parent, mediaTag, source);
+                    break;
+                default:
+                    custom.check(element.localName);
+                    let data = { tag, attributes };
+                    if (element.shadowRoot) { child = element.shadowRoot; }
+                    dom[call](node, parent, data, source);
+                    break;
+            }
+            break;
+        default:
+            break;
+    }
+    return child;
+}
+
+function observe(root: Document | ShadowRoot): void {
+    if (dom.has(root) || event.has(root)) { return; }
+    mutation.observe(root); // Observe mutations for this root node
+    interaction.observe(root); // Observe interactions for this root node
+}
+
+export function removeObserver(root: HTMLIFrameElement): void {
+    // iframes will have load event listeners and they should be removed when iframe is removed
+    // from the document
+    event.unbind(root);
+    const { doc = null, win = null } = dom.iframeContent(root) || {};
+
+    if (win) {
+        // For iframes, scroll event is observed on content window and this needs to be removed as well
+        event.unbind(win);
+    }
+    
+    if (doc) {
+        // When an iframe is removed, we should also remove all listeners attached to its document
+        // to avoid memory leaks.
+        event.unbind(doc);
+        mutation.disconnect(doc);
+        
+        // Remove iframe and content document from maps tracking them
+        dom.removeIFrame(root, doc);
+    }
+}
+
+function getStyleValue(style: HTMLStyleElement): string {
+    // Call trim on the text content to ensure we do not process white spaces ( , \n, \r\n, \t, etc.)
+    // Also, check if stylesheet has any data-* attribute, if so process rules instead of looking up text
+    // Additionally, check if style node has an id - if so it's at a high risk to have experienced dynamic
+    // style updates which would make the textContent out of date with its true style contribution.
+    let value = style.textContent ? style.textContent.trim() : Constant.Empty;
+    let dataset = style.dataset ? Object.keys(style.dataset).length : 0;
+    if (value.length === 0 || dataset > 0 || style.id.length > 0) {
+        value = getCssRules(style.sheet as CSSStyleSheet);
+    }
+    return value;
+}
+
+export function getCssRules(sheet: CSSStyleSheet): string {
+    let value = Constant.Empty as string;
+    let cssRules = null;
+    // Firefox throws a SecurityError when trying to access cssRules of a stylesheet from a different domain
+    try { cssRules = sheet ? sheet.cssRules : []; } catch (e) {
+        internal.log(Code.CssRules, Severity.Warning, e ? e.name : null);
+        if (e && e.name !== "SecurityError") { throw e; }
+    }
+
+    if (cssRules !== null) {
+        for (let i = 0; i < cssRules.length; i++) {
+            value += cssRules[i].cssText;
+        }
+    }
+
+    return value;
+}
+
+function getAttributes(element: HTMLElement): { [key: string]: string } {
+    let output = {};
+    let attributes = element.attributes;
+    if (attributes && attributes.length > 0) {
+        for (let i = 0; i < attributes.length; i++) {
+            let name = attributes[i].name;
+            if (IGNORE_ATTRIBUTES.indexOf(name) < 0) {
+                output[name] = attributes[i].value;
+            }
+        }
+    }
+
+    // For INPUT tags read the dynamic "value" property if an explicit "value" attribute is not set
+    if (element.tagName === Constant.InputTag && !(Constant.Value in output) && (element as HTMLInputElement).value) {
+        output[Constant.Value] = (element as HTMLInputElement).value;
+    }
+
+    return output;
+}

package/src/layout/offset.ts

@@ -0,0 +1,19 @@
+import { OffsetDistance } from "@clarity-types/core";
+import { iframe } from "@src/layout/dom";
+
+export function offset(element: HTMLElement): OffsetDistance {
+    let output: OffsetDistance = { x: 0, y: 0 };
+
+    // Walk up the chain to ensure we compute offset distance correctly
+    // In case where we may have nested IFRAMEs, we keep walking up until we get to the top most parent page
+    if (element && element.offsetParent) {
+        do {
+            let parent = element.offsetParent as HTMLElement;
+            let frame = parent === null ? iframe(element.ownerDocument) : null;
+            output.x += element.offsetLeft;
+            output.y += element.offsetTop;
+            element = frame ? frame : parent;
+        } while (element);
+    }
+    return output;
+}

package/src/layout/region.ts

@@ -0,0 +1,151 @@
+import { Event, Setting } from "@clarity-types/data";
+import { InteractionState, RegionData, RegionState, RegionQueue, RegionVisibility } from "@clarity-types/layout";
+import { time } from "@src/core/time";
+import * as dom from "@src/layout/dom";
+import encode from "@src/layout/encode";
+
+export let state: RegionState[] = [];
+let regionMap: WeakMap<Node, string> = null; // Maps region nodes => region name
+let regions: { [key: number]: RegionData } = {};
+let queue: RegionQueue[] = [];
+let watch = false;
+let observer: IntersectionObserver = null;
+
+export function start(): void {
+    reset();
+    observer = null;
+    regionMap = new WeakMap();
+    regions = {};
+    queue = [];
+    watch = window["IntersectionObserver"] ? true : false;
+    
+}
+
+export function observe(node: Node, name: string): void {
+    if (regionMap.has(node) === false) {
+        regionMap.set(node, name);
+        observer = observer === null && watch ? new IntersectionObserver(handler, {
+            // Get notified as intersection continues to change
+            // This allows us to process regions that get partially hidden during the lifetime of the page
+            // See: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer
+            // By default, intersection observers only fire an event when even a single pixel is visible and not thereafter.
+            threshold: [0, 0.05, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
+        }) : observer;
+        if (observer && node && node.nodeType === Node.ELEMENT_NODE) {
+            observer.observe(node as Element);
+        }
+    }
+}
+
+export function exists(node: Node): boolean {
+    // Check if regionMap is not null before looking up a node
+    // Since, dom module stops after region module, it's possible that we may set regionMap to be null
+    // and still attempt to call exists on a late coming DOM mutation (or addition), effectively causing a script error
+    return regionMap && regionMap.has(node);
+}
+
+export function track(id: number, event: Event): void {
+    let node = dom.getNode(id);
+    let data = id in regions ? regions[id] : { id, visibility: RegionVisibility.Rendered, interaction: InteractionState.None, name: regionMap.get(node) };
+    
+    // Determine the interaction state based on incoming event
+    let interaction = InteractionState.None;
+    switch (event) {
+        case Event.Click: interaction = InteractionState.Clicked; break;
+        case Event.Input: interaction = InteractionState.Input; break;
+    }
+    // Process updates to this region, if applicable
+    process(node, data, interaction, data.visibility);
+}
+
+export function compute(): void {
+    // Process any regions where we couldn't resolve an "id" for at the time of last intersection observer event
+    // This could happen in cases where elements are not yet processed by Clarity's virtual DOM but browser reports a change, regardless.
+    // For those cases we add them to the queue and re-process them below
+    let q = [];
+    for (let r of queue) {
+        let id = dom.getId(r.node);
+        if (id) {
+            r.state.data.id = id;
+            regions[id] = r.state.data;
+            state.push(r.state);
+        } else { q.push(r); }
+    }
+    queue = q;
+
+    // Schedule encode only when we have at least one valid data entry
+    if (state.length > 0) { encode(Event.Region); }
+}
+
+function handler(entries: IntersectionObserverEntry[]): void {
+    for (let entry of entries) {
+        let target = entry.target;
+        let rect = entry.boundingClientRect;
+        let overlap = entry.intersectionRect;
+        let viewport = entry.rootBounds;
+        // Only capture regions that have non-zero width or height to avoid tracking and sending regions
+        // that cannot ever be seen by the user. In some cases, websites will have a multiple copy of the same region
+        // like search box - one for desktop, and another for mobile. In those cases, CSS media queries determine which one should be visible.
+        // Also, if these regions ever become non-zero width or height (through AJAX, user action or orientation change) - we will automatically start monitoring them from that point onwards
+        if (regionMap.has(target) && rect.width + rect.height > 0 && viewport && viewport.width > 0 && viewport.height > 0) {
+            let id = target ? dom.getId(target) : null;
+            let data = id in regions ? regions[id] : { id, name: regionMap.get(target), interaction: InteractionState.None, visibility: RegionVisibility.Rendered };
+            
+            // For regions that have relatively smaller area, we look at intersection ratio and see the overlap relative to element's area
+            // However, for larger regions, area of regions could be bigger than viewport and therefore comparison is relative to visible area
+            let viewportRatio = overlap ? (overlap.width * overlap.height * 1.0) / (viewport.width * viewport.height) : 0;
+            let visible = viewportRatio > Setting.ViewportIntersectionRatio || entry.intersectionRatio > Setting.IntersectionRatio;
+            // If an element is either visible or was visible and has been scrolled to the end
+            // i.e. Scrolled to end is determined by if the starting position of the element + the window height is more than the total element height. 
+            // starting position is relative to the viewport - so Intersection observer returns a negative value for rect.top to indicate that the element top is above the viewport
+            let scrolledToEnd = (visible || data.visibility == RegionVisibility.Visible) && Math.abs(rect.top) + viewport.height > rect.height;
+            // Process updates to this region, if applicable
+            process(target, data, data.interaction, 
+                        (scrolledToEnd ? 
+                            RegionVisibility.ScrolledToEnd :
+                            (visible ? RegionVisibility.Visible : RegionVisibility.Rendered)));
+
+            // Stop observing this element now that we have already received scrolled signal
+            if (data.visibility >= RegionVisibility.ScrolledToEnd && observer) { observer.unobserve(target); }
+        }
+    }
+    if (state.length > 0) { encode(Event.Region); }
+}
+
+function process(n: Node, d: RegionData, s: InteractionState, v: RegionVisibility): void {
+    // Check if received a state that supersedes existing state
+    let updated = s > d.interaction || v > d.visibility;
+    d.interaction = s > d.interaction ? s : d.interaction;
+    d.visibility = v > d.visibility ? v : d.visibility;
+    // If the corresponding node is already discovered, update the internal state
+    // Otherwise, track it in a queue to reprocess later.
+    if (d.id) {
+        if ((d.id in regions && updated) || !(d.id in regions)) {
+            regions[d.id] = d;
+            state.push(clone(d));
+        }
+    } else {
+        // Get the time before adding to queue to ensure accurate event time
+        queue.push({node: n, state: clone(d)}); 
+    }
+}
+
+function clone(r: RegionData): RegionState {
+    return { time: time(), data: { id: r.id, interaction: r.interaction, visibility: r.visibility, name: r.name }};
+}
+
+export function reset(): void {
+    state = [];   
+}
+
+export function stop(): void {
+    reset();
+    regionMap = null;
+    regions = {};
+    queue = [];
+    if (observer) {
+        observer.disconnect();
+        observer = null;
+    }
+    watch = false;
+}

package/src/layout/schema.ts

@@ -0,0 +1,63 @@
+import { Dimension, Metric, Setting } from "@clarity-types/data";
+import { Constant, JsonLD } from "@clarity-types/layout";
+import * as dimension from "@src/data/dimension";
+import * as metric from "@src/data/metric";
+
+const digitsRegex = /[^0-9\.]/g;
+
+/* JSON+LD (Linked Data) Recursive Parser */
+export function ld(json: any): void {
+    for (let key of Object.keys(json)) {
+        let value = json[key];
+        if (key === JsonLD.Type && typeof value === "string") {
+            value = value.toLowerCase();
+            /* Normalizations */
+            value = value.indexOf(JsonLD.Article) >= 0 || value.indexOf(JsonLD.Posting) >= 0 ? JsonLD.Article : value;
+            switch (value) {
+                case JsonLD.Article:
+                case JsonLD.Recipe:
+                    dimension.log(Dimension.SchemaType, json[key]);
+                    dimension.log(Dimension.AuthorName,  json[JsonLD.Creator]);
+                    dimension.log(Dimension.Headline,  json[JsonLD.Headline]);
+                    break;
+                case JsonLD.Product:
+                    dimension.log(Dimension.SchemaType, json[key]);
+                    dimension.log(Dimension.ProductName, json[JsonLD.Name]);
+                    dimension.log(Dimension.ProductSku, json[JsonLD.Sku]);
+                    if (json[JsonLD.Brand]) { dimension.log(Dimension.ProductBrand, json[JsonLD.Brand][JsonLD.Name]); }
+                    break;
+                case JsonLD.AggregateRating:
+                    if (json[JsonLD.RatingValue]) {
+                        metric.max(Metric.RatingValue, num(json[JsonLD.RatingValue], Setting.RatingScale));
+                        metric.max(Metric.BestRating, num(json[JsonLD.BestRating]));
+                        metric.max(Metric.WorstRating, num(json[JsonLD.WorstRating]));
+                    }
+                    metric.max(Metric.RatingCount, num(json[JsonLD.RatingCount]));
+                    metric.max(Metric.ReviewCount, num(json[JsonLD.ReviewCount]));
+                    break;
+                case JsonLD.Offer:
+                    dimension.log(Dimension.ProductAvailability, json[JsonLD.Availability]);
+                    dimension.log(Dimension.ProductCondition, json[JsonLD.ItemCondition]);
+                    dimension.log(Dimension.ProductCurrency, json[JsonLD.PriceCurrency]);
+                    dimension.log(Dimension.ProductSku, json[JsonLD.Sku]);
+                    metric.max(Metric.ProductPrice, num(json[JsonLD.Price]));
+                    break;
+                case JsonLD.Brand:
+                    dimension.log(Dimension.ProductBrand, json[JsonLD.Name]);
+                    break;
+            }
+        }
+        // Continue parsing nested objects
+        if (value !== null && typeof(value) === Constant.Object) { ld(value); }
+    }
+}
+
+function num(input: string | number, scale: number = 1): number {
+    if (input !== null) {
+        switch (typeof input) {
+            case Constant.Number: return Math.round((input as number) * scale);
+            case Constant.String: return Math.round(parseFloat((input as string).replace(digitsRegex, Constant.Empty)) * scale);
+        }
+    }
+    return null;
+}

package/src/layout/selector.ts

@@ -0,0 +1,82 @@
+import { Character } from "../../types/data";
+import { Constant, Selector, SelectorInput } from "../../types/layout";
+
+const excludeClassNames = Constant.ExcludeClassNames.split(Constant.Comma);
+let selectorMap: { [selector: string]: number[] } = {};
+
+export function reset(): void {
+    selectorMap = {};
+}
+
+export function get(input: SelectorInput, type: Selector): string {
+    let a = input.attributes;
+    let prefix = input.prefix ? input.prefix[type] : null;
+    let suffix = type === Selector.Alpha ? `${Constant.Tilde}${input.position-1}` : `:nth-of-type(${input.position})`;
+    switch (input.tag) {
+        case "STYLE":
+        case "TITLE":
+        case "LINK":
+        case "META":
+        case Constant.TextTag:
+        case Constant.DocumentTag:
+            return Constant.Empty;
+        case "HTML":
+            return Constant.HTML;
+        default:
+            if (prefix === null) { return Constant.Empty; }
+            prefix = `${prefix}${Constant.Separator}`;
+            input.tag = input.tag.indexOf(Constant.SvgPrefix) === 0 ? input.tag.substr(Constant.SvgPrefix.length) : input.tag;
+            let selector = `${prefix}${input.tag}${suffix}`;
+            let id = Constant.Id in a && a[Constant.Id].length > 0 ? a[Constant.Id] : null;
+            let classes = input.tag !== Constant.BodyTag && Constant.Class in a && a[Constant.Class].length > 0 ? a[Constant.Class].trim().split(/\s+/).filter(c => filter(c)).join(Constant.Period) : null;
+            if (classes && classes.length > 0) {
+                if (type === Selector.Alpha) {
+                    // In Alpha mode, update selector to use class names, with relative positioning within the parent id container.
+                    // If the node has valid class name(s) then drop relative positioning within the parent path to keep things simple.
+                    let key = `${getDomPath(prefix)}${input.tag}${Constant.Dot}${classes}`;
+                    if (!(key in selectorMap)) { selectorMap[key] = []; }
+                    if (selectorMap[key].indexOf(input.id) < 0) { selectorMap[key].push(input.id); }
+                    selector = `${key}${Constant.Tilde}${selectorMap[key].indexOf(input.id)}`;
+                } else {
+                    // In Beta mode, we continue to look at query selectors in context of the full page
+                    selector = `${prefix}${input.tag}.${classes}${suffix}`
+                }
+            }
+            // Update selector to use "id" field when available. There are two exceptions:
+            // (1) if "id" appears to be an auto generated string token, e.g. guid or a random id containing digits
+            // (2) if "id" appears inside a shadow DOM, in which case we continue to prefix up to shadow DOM to prevent conflicts
+            selector = id && filter(id) ? `${getDomPrefix(prefix)}${Constant.Hash}${id}` : selector;
+            return selector;
+    }
+}
+
+function getDomPrefix(prefix: string): string {
+  const shadowDomStart = prefix.lastIndexOf(Constant.ShadowDomTag);
+  const iframeDomStart = prefix.lastIndexOf(`${Constant.IFramePrefix}${Constant.HTML}`);
+  const domStart = Math.max(shadowDomStart, iframeDomStart);
+  
+  if (domStart < 0) { return Constant.Empty; }
+
+  return prefix.substring(0, prefix.indexOf(Constant.Separator, domStart) + 1);
+}
+
+function getDomPath(input: string): string {
+    let parts = input.split(Constant.Separator);
+    for (let i = 0; i < parts.length; i++) {
+        let tIndex = parts[i].indexOf(Constant.Tilde);
+        let dIndex = parts[i].indexOf(Constant.Dot);
+        parts[i] = parts[i].substring(0, dIndex > 0 ? dIndex : (tIndex > 0 ? tIndex : parts[i].length));
+    }
+    return parts.join(Constant.Separator);
+}
+
+// Check if the given input string has digits or excluded class names
+function filter(value: string): boolean {
+    if (!value) { return false; } // Do not process empty strings
+    if (excludeClassNames.some(x => value.toLowerCase().indexOf(x) >= 0)) { return false; }
+    for (let i = 0; i < value.length; i++) {
+        let c = value.charCodeAt(i);
+        if (c >= Character.Zero && c <= Character.Nine) { return false };
+    }
+    return true;
+}