@devassure/tpp-engine 0.0.0-stage → 1.8.1

package/src/mobile/recorder-utils/finder.js

@@ -0,0 +1,752 @@
+//Source: https://github.com/antonmedv/finder
+var tppLimit;
+(function (tppLimit) {
+    tppLimit[tppLimit["All"] = 0] = "All";
+    tppLimit[tppLimit["Two"] = 1] = "Two";
+    tppLimit[tppLimit["One"] = 2] = "One";
+})(tppLimit || (tppLimit = {}));
+let tppConfig;
+let tppRootDocument;
+
+function tppSelector(path) {
+    let node = path[0];
+    let query = node.name;
+    for (let i = 1; i < path.length; i++) {
+        const level = path[i].level || 0;
+        if (node.level === level - 1) {
+            query = `${path[i].name} > ${query}`;
+        }
+        else {
+            query = `${path[i].name} ${query}`;
+        }
+        node = path[i];
+    }
+    return query;
+}
+
+function tppFindRootDocument(rootNode, defaults) {
+    if (rootNode.nodeType === Node.DOCUMENT_NODE) {
+        return rootNode;
+    }
+    if (rootNode === defaults.root) {
+        return rootNode.ownerDocument;
+    }
+    return rootNode;
+}
+
+function tppFinder(input, ignoreOptions) {
+    if (input.nodeType !== Node.ELEMENT_NODE) {
+        throw new Error(`Can't generate CSS selector for non-element node type.`);
+    }
+    if ("html" === input.tagName.toLowerCase()) {
+        return "html";
+    }
+    let path = tppBottomUpSearch(input, tppLimit.All, ignoreOptions, () => tppBottomUpSearch(input, tppLimit.Two, ignoreOptions, () => tppBottomUpSearch(input, tppLimit.One, ignoreOptions)));
+    if (path) {
+        const optimized = tppSort(optimize(path, input));
+        if (optimized.length > 0) {
+            path = optimized[0];
+        }
+        return tppSelector(path);
+    }
+    else {
+        return undefined;
+    }
+}
+
+function tppId(input) {
+    const elementId = input.getAttribute("id");
+    if (elementId && !/\d/.test(elementId) && tppConfig.idName(elementId)) {
+        return {
+            name: "#" + tptppcssesc(elementId, { isIdentifier: true }),
+            penalty: 0,
+        };
+    }
+    return null;
+}
+
+function tppBottomUpSearch(input, limit, ignoreOptions, fallback) {
+    let path = null;
+    let stack = [];
+    let current = input;
+    let i = 0;
+    while (current && current !== tppConfig.root.parentElement) {
+        let level = (!ignoreOptions?.id && tppMaybe(tppId(current))) ||
+            tppMaybe(...tppAttr(current)) ||
+            (!ignoreOptions?.tagName && tppMaybe(tppTagName(current))) ||
+            tppMaybe(...tppClassNames(current)) ||
+            [tppAny()];
+        const nth = tppIndex(current);
+        if (limit === tppLimit.All) {
+            if (nth) {
+                level = level.concat(level.filter(tppDispensableNth).map((node) => tppNthChild(node, nth)));
+            }
+        }
+        else if (limit === tppLimit.Two) {
+            level = level.slice(0, 1);
+            if (nth) {
+                level = level.concat(level.filter(tppDispensableNth).map((node) => tppNthChild(node, nth)));
+            }
+        }
+        else if (limit === tppLimit.One) {
+            const [node] = (level = level.slice(0, 1));
+            if (nth && tppDispensableNth(node)) {
+                level = [tppNthChild(node, nth)];
+            }
+        }
+        for (let node of level) {
+            node.level = i;
+        }
+        stack.push(level);
+        if (stack.length >= tppConfig.seedMinLength) {
+            path = tppFindUniquePath(stack, fallback);
+            if (path) {
+                break;
+            }
+        }
+        current = current.parentElement;
+        i++;
+    }
+    if (!path) {
+        path = tppFindUniquePath(stack, fallback);
+    }
+    return path;
+}
+
+function tppUnique(path) {
+    switch (tppRootDocument.querySelectorAll(tppSelector(path)).length) {
+        case 0:
+            return false;
+        case 1:
+            return true;
+        default:
+            return false;
+    }
+}
+
+function tppFindUniquePath(stack, fallback) {
+    const paths = tppSort(tppCombinations(stack));
+    if (paths.length > tppConfig.threshold) {
+        return fallback ? fallback() : null;
+    }
+    for (let candidate of paths) {
+        if (tppUnique(candidate)) {
+            return candidate;
+        }
+    }
+    return null;
+}
+
+function tppPenalty(path) {
+    return path.map((node) => node.penalty).reduce((acc, i) => acc + i, 0);
+}
+
+function tppAttr(input) {
+    const attrs = Array.from(input.attributes).filter((attr) => tppConfig.attr(attr.name, attr.value));
+    return attrs.map((attr) => ({
+        name: "[" +
+            tptppcssesc(attr.name, { isIdentifier: true }) +
+            '="' +
+            tptppcssesc(attr.value) +
+            '"]',
+        penalty: 0.5,
+    }));
+}
+
+function tppClassNames(input) {
+    const names = Array.from(input.classList).filter(tppConfig.className);
+    return names.map((name) => ({
+        name: "." + tptppcssesc(name, { isIdentifier: true }),
+        penalty: 1,
+    }));
+}
+function tppTagName(input) {
+    const name = tppSanitiseTagName(input.tagName);
+    if (tppConfig.tagName(name)) {
+        return {
+            name,
+            penalty: 2,
+        };
+    }
+    return null;
+}
+function tppAny() {
+    return {
+        name: "*",
+        penalty: 3,
+    };
+}
+function tppIndex(input) {
+    const parent = input.parentNode;
+    if (!parent) {
+        return null;
+    }
+    let child = parent.firstChild;
+    if (!child) {
+        return null;
+    }
+    let i = 0;
+    while (child) {
+        if (child.nodeType === Node.ELEMENT_NODE) {
+            i++;
+        }
+        if (child === input) {
+            break;
+        }
+        child = child.nextSibling;
+    }
+    return i;
+}
+
+function tppNthChild(node, i) {
+    return {
+        name: node.name + `:nth-child(${i})`,
+        penalty: node.penalty + 1,
+    };
+}
+function tppDispensableNth(node) {
+    return node.name !== "html" && !node.name.startsWith("#");
+}
+function tppMaybe(...level) {
+    const list = level.filter(tppNotEmpty);
+    if (list.length > 0) {
+        return list;
+    }
+    return null;
+}
+function tppNotEmpty(value) {
+    return value !== null && value !== undefined;
+}
+function* tppCombinations(stack, path = []) {
+    if (stack.length > 0) {
+        for (let node of stack[0]) {
+            yield* tppCombinations(stack.slice(1, stack.length), path.concat(node));
+        }
+    }
+    else {
+        yield path;
+    }
+}
+function tppSort(paths) {
+    return Array.from(paths).sort((a, b) => tppPenalty(a) - tppPenalty(b));
+}
+function* optimize(path, input, scope = {
+    counter: 0,
+    visited: new Map(),
+}) {
+    if (path.length > 2 && path.length > tppConfig.optimizedMinLength) {
+        for (let i = 1; i < path.length - 1; i++) {
+            if (scope.counter > tppConfig.maxNumberOfTries) {
+                return; // Okay At least I tried!
+            }
+            scope.counter += 1;
+            const newPath = [...path];
+            newPath.splice(i, 1);
+            const newPathKey = tppSelector(newPath);
+            if (scope.visited.has(newPathKey)) {
+                return;
+            }
+            if (tppUnique(newPath) && tppSame(newPath, input)) {
+                yield newPath;
+                scope.visited.set(newPathKey, true);
+                yield* optimize(newPath, input, scope);
+            }
+        }
+    }
+}
+function tppSame(path, input) {
+    return tppRootDocument.querySelector(tppSelector(path)) === input;
+}
+const tppRegexAnySingleEscape = /[ -,\.\/:-@\[-\^`\{-~]/;
+const tppRegexSingleEscape = /[ -,\.\/:-@\[\]\^`\{-~]/;
+const tppRegexExcessiveSpaces = /(^|\\+)?(\\[A-F0-9]{1,6})\x20(?![a-fA-F0-9\x20])/g;
+const tppDefaultOptions = {
+    escapeEverything: false,
+    isIdentifier: false,
+    quotes: "single",
+    wrap: false,
+};
+function tptppcssesc(string, opt = {}) {
+    const options = Object.assign(Object.assign({}, tppDefaultOptions), opt);
+    if (options.quotes != "single" && options.quotes != "double") {
+        options.quotes = "single";
+    }
+    const quote = options.quotes == "double" ? '"' : "'";
+    const isIdentifier = options.isIdentifier;
+    const firstChar = string.charAt(0);
+    let output = "";
+    let counter = 0;
+    const length = string.length;
+    while (counter < length) {
+        const character = string.charAt(counter++);
+        let codePoint = character.charCodeAt(0);
+        let value = void 0;
+        // If it’s not a printable ASCII character…
+        if (codePoint < 0x20 || codePoint > 0x7e) {
+            if (codePoint >= 0xd800 && codePoint <= 0xdbff && counter < length) {
+                // It’s a high surrogate, and there is a next character.
+                const extra = string.charCodeAt(counter++);
+                if ((extra & 0xfc00) == 0xdc00) {
+                    // next character is low surrogate
+                    codePoint = ((codePoint & 0x3ff) << 10) + (extra & 0x3ff) + 0x10000;
+                }
+                else {
+                    // It’s an unmatched surrogate; only append this code unit, in case
+                    // the next code unit is the high surrogate of a surrogate pair.
+                    counter--;
+                }
+            }
+            value = "\\" + codePoint.toString(16).toUpperCase() + " ";
+        }
+        else {
+            if (options.escapeEverything) {
+                if (tppRegexAnySingleEscape.test(character)) {
+                    value = "\\" + character;
+                }
+                else {
+                    value = "\\" + codePoint.toString(16).toUpperCase() + " ";
+                }
+            }
+            else if (/[\t\n\f\r\x0B]/.test(character)) {
+                value = "\\" + codePoint.toString(16).toUpperCase() + " ";
+            }
+            else if (character == "\\" ||
+                (!isIdentifier &&
+                    ((character == '"' && quote == character) ||
+                        (character == "'" && quote == character))) ||
+                (isIdentifier && tppRegexSingleEscape.test(character))) {
+                value = "\\" + character;
+            }
+            else {
+                value = character;
+            }
+        }
+        output += value;
+    }
+    if (isIdentifier) {
+        if (/^-[-\d]/.test(output)) {
+            output = "\\-" + output.slice(1);
+        }
+        else if (/\d/.test(firstChar)) {
+            output = "\\3" + firstChar + " " + output.slice(1);
+        }
+    }
+    // Remove spaces after `\HEX` escapes that are not followed by a hex digit,
+    // since they’re redundant. Note that this is only possible if the escape
+    // sequence isn’t preceded by an odd number of backslashes.
+    output = output.replace(tppRegexExcessiveSpaces, function ($0, $1, $2) {
+        if ($1 && $1.length % 2) {
+            // It’s not safe to remove the space, so don’t.
+            return $0;
+        }
+        // Strip the space.
+        return ($1 || "") + $2;
+    });
+    if (!isIdentifier && options.wrap) {
+        return quote + output + quote;
+    }
+    return output;
+}
+
+function tppSanitiseTagName(tagName) {
+    return tagName.includes(':') 
+        ? tagName.split(":")?.at(0)?.toLocaleLowerCase() 
+        : tagName.toLowerCase();
+}
+
+//Below is custom code for locators
+
+/**
+ * Get absolute xPath position from dom element
+ * xPath position will does not contain any id, class or attribute, etc selector
+ * Because, Some page use random id and class. This function should ignore that kind problem, so we're not using any selector
+ * 
+ * @param {Element} element element to get position
+ * @returns {String} xPath string
+ */
+function tppGetAbsoluteXPath(element) {
+    // Selector
+    let selector = '';
+    // Loop handler
+    let foundRoot;
+    // Element handler
+    let currentElement = element;
+
+    // Do action until we reach html element
+    do {
+        // Get element tag name 
+        let tagName = tppSanitiseTagName(currentElement.tagName);
+        // Get parent element
+        const parentElement = currentElement.parentElement;
+
+        // Count children
+        if (parentElement.childElementCount > 1) {
+            // Get children of parent element
+            const parentsChildren = [...parentElement.children];
+            // Count current tag 
+            let tag = [];
+            parentsChildren.forEach(child => {
+                if (tppSanitiseTagName(child.tagName) === tagName) tag.push(child) // Append to tag
+            })
+
+            // Is only of type
+            if (tag.length === 1) {
+                // Append tag to selector
+                selector = `/${tagName}${selector}`;
+            } else {
+                // Get position of current element in tag
+                const position = tag.indexOf(currentElement) + 1;
+                // Append tag to selector
+                selector = `/${tagName}[${position}]${selector}`;
+            }
+
+        } else {
+            //* Current element has no siblings
+            // Append tag to selector
+            selector = `/${tagName}${selector}`;
+        }
+
+        // Set parent element to current element
+        currentElement = parentElement;
+        // Is root
+        foundRoot = parentElement.tagName.toLowerCase() === 'html';
+        // Finish selector if found root element
+        if(foundRoot) selector = `/html${selector}`;
+    }
+    while (foundRoot === false);
+
+    // Return selector
+    return selector;
+}
+
+function tppUniqueSelector(selector) {
+    if(selector.includes("\n")) {
+        return false;
+    }
+
+    let count;
+    try {
+        count = tppRootDocument.querySelectorAll(selector).length
+    } catch (_e) {
+        return false;
+    }
+    switch (count) {
+        case 0:
+            return false;
+        case 1:
+            return true;
+        default:
+            return false;
+    }
+}
+
+function tppUniqueXpath(xpath) {
+    if(xpath.includes("\n")) {
+        return false;
+    }
+
+    let count;
+    try {
+        count = tppRootDocument
+            .evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null)
+            .snapshotLength;
+    } catch (_e) {
+        return false;
+    }
+    switch (count) {
+        case 0:
+            return false;
+        case 1:
+            return true;
+        default:
+            return false;
+    }
+}
+
+/**
+ * Score order
+ * Id: 400
+ * Tag Name: 300
+ * Inner text: 200
+ * Attributes: 101-199
+ * CSS Regex: 1-99
+ */
+function tppLocatorScore(locator, preferredLocators) {
+    if(!preferredLocators || !locator) return 0;
+    if(preferredLocators.id && tppCheckRegexMatch(locator, ['#.*'])) {
+        return 400;
+    }
+    const attrMatch = preferredLocators.attributes?.findIndex(attr => tppCheckRegexMatch(locator, [`\\[${attr}*`]));
+    if(attrMatch >= 0) {
+        return 101 + attrMatch;
+    }
+    const cssMatch = preferredLocators.cssRegex?.findIndex(cssReg => tppCheckRegexMatch(locator, [cssReg]));
+    if(cssMatch != null && cssMatch >= 0) {
+        return 1 + cssMatch;
+    }
+    return 0;
+}
+
+function checkAndAddCss(locator, list, name, score, preferredLocators) {
+    if(locator && tppUniqueSelector(locator)) {
+        if(!list.find(loc => loc.locator === locator)) {
+            if(!score && preferredLocators) {
+                score = tppLocatorScore(locator, preferredLocators)
+            } 
+            list.push({locatorType: 'CSS', locator: locator, name: name, score: score || 0});
+        }
+    }
+}
+
+function tppCheckRegexMatch(locator, regexList) {
+    let match = regexList?.find(reg => {
+        try {
+            const regExp = new RegExp(reg);
+            return regExp.test(locator);
+        } catch (ex) {
+            return false;
+        }
+    });
+    return !!match;
+}
+
+function tppGetUniqueLocators(element, preferences) {
+    const ignoreLocators = preferences?.locatorPreference?.ignoreLocators;
+    const preferredLocators = preferences?.locatorPreference?.preferredLocators;
+    let uniqueLocators = [];
+
+    // Init
+    const defaults = {
+        root: document.body,
+        idName: (name) => true,
+        className: (name) => true,
+        tagName: (name) => true,
+        attr: (name, value) => false,
+        seedMinLength: 1,
+        optimizedMinLength: 2,
+        threshold: 1000,
+        maxNumberOfTries: 10000,
+    };
+    tppConfig = Object.assign(Object.assign({}, defaults));
+    tppRootDocument = tppFindRootDocument(tppConfig.root, defaults);
+
+    // ID
+    if(!ignoreLocators?.id) {
+        const eleId = element.getAttribute("id");
+        if(eleId) checkAndAddCss(`#${eleId}`, uniqueLocators, eleId, preferredLocators?.id ? 400 : 0, preferredLocators);
+    }
+
+    // Check if the element has any data attributes
+    const dataAttributes = element.dataset;
+    if (Object.keys(dataAttributes).length > 0) {
+        Object.keys(dataAttributes).forEach(attribute => {
+            if(ignoreLocators?.attributes?.includes(`data-${attribute}`)) {
+                return;
+            }
+            const loc = `[data-${attribute}='${dataAttributes[attribute]}']`;
+            checkAndAddCss(loc, uniqueLocators, dataAttributes[attribute], 0, preferredLocators);
+        });
+    }
+
+    // Attributes
+    const defaultAttrs = ['placeholder', 'label', 'name', 'title', 'aria-label', 'alt', 'type'];
+    const attributes = [...new Set(defaultAttrs.concat(preferredLocators?.attributes || []))]
+    attributes.forEach(attr => {
+        if(ignoreLocators?.attributes?.includes(attr)) {
+            return;
+        }
+        const attrValue = element.getAttribute(attr);
+        if(attrValue) checkAndAddCss(`[${attr}='${attrValue}']`, uniqueLocators, attrValue, 0, preferredLocators);
+    })
+
+    // Tag name locator
+    let tagName;
+    if(!ignoreLocators?.tagName) {
+        tagName = tppSanitiseTagName(element.tagName)
+        if(tagName && tppUniqueSelector(tagName)) {
+            uniqueLocators.push({locatorType: 'CSS', locator: tagName, score: preferredLocators?.tagName ? 300 : 0});
+        }
+    }
+
+    // Inner text xpath is used only if the node the is the leaf
+    if(!ignoreLocators?.innerText) {
+        let xpath;
+        let label;
+        const textContent = element.textContent;
+        if (textContent && textContent.length < 50 && !textContent.includes("\n")) {
+            xpath = tagName ? `//${tagName}[text()="${textContent}"]` : `//*[text()="${textContent}"]`;
+            label = textContent.trim();
+        } else {
+            const innerText = element.innerText;
+            if (innerText && innerText.length < 50) {
+                xpath = tagName ? `//${tagName}[normalize-space()="${innerText}"]` : `//*[normalize-space()="${innerText}"]`;
+                label = innerText.trim();
+            }
+        }
+        if(xpath && tppUniqueXpath(xpath)) uniqueLocators.push({locatorType: 'XPATH', locator: xpath, name: label, score: preferredLocators?.innerText ? 200 : 0});
+    }
+
+    const ignoreId = ignoreLocators?.id ? ["#*"] : [];
+    const ignoreAttrs = ignoreLocators?.attributes?.map(attr => `[${attr}]`) || [];
+    const ignoreAttrsWithValue = ignoreLocators?.attributes?.map(attr => `[${attr}=*]`) || [];
+    const defaultBlackList = ['style', 'src', 'value']
+        .filter(attr => !preferredLocators?.attributes?.includes(attr))
+        .map(attr => `[${attr}=*]`);
+    const cssSelector = CssSelectorGenerator.getCssSelector(
+        element,
+        {
+            maxCombinations: 10,
+            blacklist: [
+                ...defaultBlackList,
+                ...ignoreLocators?.cssRegex || [],
+                ...ignoreId,
+                ...ignoreAttrs, ...ignoreAttrsWithValue,
+            ],
+        },
+    );
+    if(cssSelector && cssSelector.split('>').length < 4) checkAndAddCss(cssSelector, uniqueLocators, undefined, 0, preferredLocators);
+
+    let finderCss = tppFinder(element, ignoreLocators)?.trim();
+    if(finderCss) checkAndAddCss(finderCss, uniqueLocators, undefined, 0, preferredLocators);
+
+    // Check if the element has a class
+    if (element.classList.length > 0) {
+      element.classList.forEach(className => {
+        const loc = `.${className}`;
+        if(!/\d/.test(loc)) checkAndAddCss(loc, uniqueLocators, undefined, 0, preferredLocators);
+      });
+    }
+
+    //Remove ignore regex
+    uniqueLocators = uniqueLocators.filter(loc => !tppCheckRegexMatch(loc.locator, ignoreLocators?.cssRegex || []))
+    //Sort by score
+    uniqueLocators = uniqueLocators.sort((a, b) => (b.score || 0) - (a.score || 0));
+
+    if(uniqueLocators.length === 0) {
+        uniqueLocators.push({locatorType: 'XPATH', locator: tppGetAbsoluteXPath(element)});
+    }
+
+    return uniqueLocators;
+}
+
+function tppGetImageName(srcValue) {
+    if(!srcValue) return srcValue;
+    const parts = srcValue.split('/');
+    const file = parts[parts.length -1];
+    return file.split('.')[0];
+}
+
+const tppElementNameRegex = /[^a-zA-Z0-9_]/g;
+function getTppEventElement(eventElement, eventType, preferences) {
+    const allLocators = tppGetUniqueLocators(eventElement, preferences);
+    const mainLocator = allLocators[0].locator;
+    const elementType = eventElement.getAttribute('role') || eventElement.nodeName;
+    const isTextInput = eventType === 'input' || elementType === 'input' || elementType === 'textarea' || elementType === 'textbox'
+    const name = (
+        allLocators.find(loc => loc?.name && !!loc.name.trim())?.name.replace(tppElementNameRegex, '')
+        || (!isTextInput && eventElement.innerText?.trim()?.replace(tppElementNameRegex, ''))
+        || eventElement.getAttribute('aria-label')?.replace(tppElementNameRegex, '')
+        || eventElement.getAttribute('alt')?.replace(tppElementNameRegex, '')
+        || tppGetImageName(eventElement.getAttribute('src'))?.replace(tppElementNameRegex, '')
+        || mainLocator?.replace(tppElementNameRegex, '')
+    );
+    console.log(document.title);
+    const tppEvent = {
+        target: mainLocator,
+        locatorType: allLocators[0].locatorType,
+        backupLocators: allLocators.length > 1 ? allLocators.slice(1) : [],
+        elementType: elementType,
+        inputType: eventElement.getAttribute('type') || '',
+        name: name,
+        value: eventElement.value,
+        page: (document.title || document.location?.pathname || document.href?.split("/")?.at(-1))?.replaceAll(' ', ''),
+        time: Date.now(),
+        innerText: eventElement.innerText?.replaceAll('\n', '\\n') || '',
+    };
+    return tppEvent;
+}
+
+function isTppFileInputEvent(eventElement, eventType) {
+    return eventType === 'input' 
+    && eventElement.nodeName.toLowerCase() === 'input' 
+    && eventElement.getAttribute('type') === 'file'
+}
+
+function isTppFileInputClickEvent(eventElement, eventType) {
+    return eventType === 'click' 
+    && eventElement.nodeName.toLowerCase() === 'input' 
+    && eventElement.getAttribute('type') === 'file'
+}
+
+function getTppEvent(event, eventType, preferences) {
+    const eventElement = event.target;
+    if(eventType === 'pointermove' 
+        && (
+            eventElement.tagName?.trim()?.toLowerCase() !== 'canvas'
+            || !event.pressure //pressure is not zero when clicked and moved
+        )
+    ) {
+        return undefined;
+    }
+    const tppEvent = {
+        ...getTppEventElement(eventElement, eventType, preferences),
+        action: eventType,
+        inputActionType: event.inputType,
+        inputData: event.data,
+        key: event.key,
+        keyCode: event.code,
+        ctrlKey: event.ctrlKey,
+        altKey: event.altKey,
+        metaKey: event.metaKey,
+        shiftKey: event.shiftKey,
+    };
+    if(isTppFileInputClickEvent(eventElement, eventType)) {
+        tppEvent.message = 'Click on file input might not be needed for uploading files. Please check and remove step after saving test!';
+    } else if(isTppFileInputEvent(eventElement, eventType)) {
+        tppEvent.action = 'file_input';
+        const files = Array.from(eventElement.files, file => file.name);
+        tppEvent.value = JSON.stringify(files);
+        tppEvent.message = 'Update to full file paths after saving test!';
+    }
+    if(eventType === 'pointermove') { //Pressure and element tag are filtered above
+        tppEvent.action = 'click_and_move_on_element';
+        const {x: elementX, y: elementY} = eventElement.getBoundingClientRect();
+        tppEvent.payload = {
+            x: Math.floor(event.x - elementX),
+            y: Math.floor(event.y - elementY),
+            diff: {x: event.movementX, y: event.movementY},
+        }
+    }
+    if((eventType === 'click' || eventType === 'contextmenu') && eventElement.tagName?.trim()?.toLowerCase() === 'canvas') {
+        tppEvent.action = eventType === 'contextmenu'
+        ? 'right_click_at_point_on_element'
+        : 'click_at_point_on_element';
+        const {x: elementX, y: elementY} = eventElement.getBoundingClientRect();
+        tppEvent.payload = {x: Math.floor(event.x - elementX), y: Math.floor(event.y - elementY)};
+    }
+    return tppEvent;
+}
+
+function tppOnPageLoad(tabId, windowId) {
+    const perfEntries = performance.getEntriesByType('navigation');
+    if (perfEntries.length > 0) {
+        const navigationEntry = perfEntries[0];
+        if (navigationEntry.type !== 'navigate' || !document.referrer) {
+            const newUrl = window.location.href;
+            if(newUrl.includes('chrome://newtab') || newUrl.includes('edge://newtab')) {
+                return;
+            }
+            const payload = {
+                action: 'open_url',
+                payload: {
+                    url: newUrl,
+                    navigationType: navigationEntry.type,
+                },
+                windowId: windowId,
+                tabId: tabId,
+            };
+            window.onTppEvent ? window.onTppEvent(`[[TPP Event]] ${JSON.stringify(payload)}`)
+            : console.error(`[[TPP Event]] ${JSON.stringify(payload)}`);
+        }
+    }
+}