pw-core 1.2.0 → 1.3.0

package/dist/codegen/generator/locator.restricted.d.ts

@@ -0,0 +1,36 @@
+export declare const exactUtilities: string[];
+export declare const tailwindPrefixes: string[];
+export declare const stateClasses: string[];
+export declare const decorativeList: string[];
+export declare const PATTERNS: {
+    stylePatterns: {
+        marginPadding: string;
+        displayLayout: string;
+        positioning: string;
+        dimensions: string;
+        colorsAndBorders: string;
+        typography: string;
+        flexboxGridAlign: string;
+        spacing: string;
+        transitionsAnimations: string;
+        miscStyles: string;
+        interactivity: string;
+        easeCurves: string;
+        flexGridGrowShrink: string;
+        layoutOverflow: string;
+    };
+    restrictedTexts: {
+        welcome: string;
+        ago: string;
+        dollar: string;
+        colon: string;
+    };
+    unstableIdentifiers: {
+        uuidPattern: string;
+        numericPattern: string;
+        hexHashPattern: string;
+        longAlphaNumPattern: string;
+    };
+};
+export declare const stylePatterns: string[];
+export declare function isRestrictedClass(cName: string): boolean;

package/dist/codegen/generator/locator.restricted.js

@@ -0,0 +1,127 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stylePatterns = exports.PATTERNS = exports.decorativeList = exports.stateClasses = exports.tailwindPrefixes = exports.exactUtilities = void 0;
+exports.isRestrictedClass = isRestrictedClass;
+exports.exactUtilities = [
+    'flex',
+    'grid',
+    'relative',
+    'absolute',
+    'sticky',
+    'group',
+    'dark',
+    'light',
+    'transition',
+    'transition-all',
+    'duration',
+    'rounded',
+    'shadow'
+];
+exports.tailwindPrefixes = [
+    'm-',
+    'mt-',
+    'mb-',
+    'ml-',
+    'mx-',
+    'my-',
+    'p-',
+    'px-',
+    'py-',
+    'text-',
+    'bg-',
+    'flex-',
+    'grid-',
+    'justify-',
+    'items-',
+    'gap-',
+    'space-',
+    'w-',
+    'h-',
+    'min-',
+    'max-',
+    'translate-',
+    'scale-',
+    'rotate-',
+    'duration-',
+    'transition-',
+    'opacity-',
+    'border-',
+    'rounded-',
+    'shadow-',
+    'cursor-',
+    'delay-',
+    'ease-',
+    'overflow-'
+];
+exports.stateClasses = [
+    'active',
+    'selected',
+    'open',
+    'expanded',
+    'collapsed',
+    'hover',
+    'focused',
+    'scale-105',
+    'opacity-100'
+];
+exports.decorativeList = [
+    'dot',
+    'icon',
+    'circle',
+    'line',
+    'separator',
+    'bullet',
+    'caret',
+    'arrow',
+    'chevron',
+    'svg',
+    'polygon',
+    'polyline',
+    'path',
+    'marker',
+    'logo'
+];
+exports.PATTERNS = {
+    stylePatterns: {
+        marginPadding: '^[mp][trblxy]?-?\\d+$',
+        displayLayout: '^(flex|grid|block|inline|hidden|table)$',
+        positioning: '^(relative|absolute|fixed|sticky)$',
+        dimensions: '^(w|h|min-w|min-h|max-w|max-h)-\\d+$',
+        colorsAndBorders: '^(text|bg|border|ring|divide|from|to|via)-[a-z]+',
+        typography: '^(font|leading|tracking|whitespace|break|align|list|underline|line-through)-',
+        flexboxGridAlign: '^(items|justify|content|self|place)-',
+        spacing: '^(gap|space)-',
+        transitionsAnimations: '^(duration|delay|ease|animate|transition|origin|scale|opacity|rotate|skew)-',
+        miscStyles: '^(border|rounded|shadow|opacity|z|top|bottom|left|right|inset)-',
+        interactivity: '^(select|cursor|pointer-events|resize)-',
+        easeCurves: '^ease-',
+        flexGridGrowShrink: '^(grow|shrink|order|col|row)-',
+        layoutOverflow: '^overflow-'
+    },
+    restrictedTexts: {
+        welcome: 'welcome',
+        ago: 'ago',
+        dollar: '$',
+        colon: ':'
+    },
+    unstableIdentifiers: {
+        uuidPattern: 'uuid|guid|hash',
+        numericPattern: '^\\d+$',
+        hexHashPattern: '^[a-f0-9]{8,}$',
+        longAlphaNumPattern: '^[a-z0-9]{20,}$'
+    }
+};
+exports.stylePatterns = Object.values(exports.PATTERNS.stylePatterns);
+function isRestrictedClass(cName) {
+    if (cName.includes('[') && cName.includes(']'))
+        return true;
+    if (cName.includes(':'))
+        return true;
+    if (exports.exactUtilities.includes(cName))
+        return true;
+    if (exports.stateClasses.includes(cName.toLowerCase()))
+        return true;
+    if (exports.tailwindPrefixes.some((prefix) => cName.startsWith(prefix)))
+        return true;
+    return exports.stylePatterns.some((pat) => new RegExp(pat).test(cName));
+}

package/dist/codegen/generator/locator.validator.d.ts

@@ -0,0 +1,8 @@
+import { LocatorCandidate } from '../types';
+/**
+ * Validates if the selected candidate has a partial of the target element's text.
+ * If target element has text, splits the text into words/partials.
+ * Checks if candidate.locator or candidate.selector contains any of these words (case-insensitive).
+ * If it doesn't, we should choose the text strategy instead.
+ */
+export declare function validateAndSelectLocator(candidate: LocatorCandidate, candidates: LocatorCandidate[], targetText: string): LocatorCandidate;

package/dist/codegen/generator/locator.validator.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateAndSelectLocator = validateAndSelectLocator;
+/**
+ * Validates if the selected candidate has a partial of the target element's text.
+ * If target element has text, splits the text into words/partials.
+ * Checks if candidate.locator or candidate.selector contains any of these words (case-insensitive).
+ * If it doesn't, we should choose the text strategy instead.
+ */
+function validateAndSelectLocator(candidate, candidates, targetText) {
+    if (!targetText) {
+        return candidate;
+    }
+    // Parse words/partials from the target element's text
+    // Lowercase, split by whitespace, and remove non-alphanumeric characters
+    const words = targetText
+        .toLowerCase()
+        .split(/\s+/)
+        .map(w => w.replace(/[^\w]/g, ''))
+        .filter(Boolean);
+    if (words.length === 0) {
+        return candidate;
+    }
+    // Check if candidate locator or selector contains any of these words
+    const locatorLower = (candidate.locator || '').toLowerCase();
+    const selectorLower = (candidate.selector || '').toLowerCase();
+    const matches = words.some(word => locatorLower.includes(word) || selectorLower.includes(word));
+    if (matches) {
+        return candidate;
+    }
+    // Else you have to choose the text as your locator strategy
+    // Find the text candidate that targets the element directly (source === 'target')
+    const textCandidate = candidates.find(c => c.strategy === 'text' && c.source === 'target');
+    if (textCandidate) {
+        return textCandidate;
+    }
+    return candidate;
+}

package/dist/codegen/hover-tracker/client.d.ts

@@ -0,0 +1 @@
+export declare function clientHoverTracker(): void;

package/dist/codegen/hover-tracker/client.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clientHoverTracker = clientHoverTracker;
+function clientHoverTracker() {
+    let lastHoveredElement = null;
+    let hoverEntryTime = 0;
+    let lastRecordedHover = null;
+    let lastMutationTime = 0;
+    const getUniqueCssSelector = (el) => {
+        if (el.getAttribute('data-testid')) {
+            return `[data-testid="${el.getAttribute('data-testid')}"]`;
+        }
+        if (el.getAttribute('data-parent-id')) {
+            return `[data-parent-id="${el.getAttribute('data-parent-id')}"]`;
+        }
+        if (el.id) {
+            return `#${el.id}`;
+        }
+        if (el.tagName === 'BODY')
+            return 'body';
+        let path = el.tagName.toLowerCase();
+        if (el.className) {
+            const firstClass = el.className.split(/\s+/)[0];
+            if (firstClass && !firstClass.includes('[') && !firstClass.includes(':')) {
+                path += `.${firstClass}`;
+            }
+        }
+        return path;
+    };
+    const observer = new MutationObserver(() => {
+        lastMutationTime = Date.now();
+        // Case 2: Delayed mutation happens after 150ms of hover
+        if (lastHoveredElement && lastRecordedHover !== lastHoveredElement) {
+            const elapsed = Date.now() - hoverEntryTime;
+            if (elapsed >= 150) {
+                lastRecordedHover = lastHoveredElement;
+                const selector = getUniqueCssSelector(lastHoveredElement);
+                if (selector && window.__pwCoreRecordHover) {
+                    ;
+                    window.__pwCoreRecordHover(selector);
+                }
+            }
+        }
+    });
+    observer.observe(document.documentElement, {
+        childList: true,
+        subtree: true,
+        attributes: true
+    });
+    document.addEventListener('mouseover', (e) => {
+        const target = e.target;
+        if (!target || target.closest('#pw-core-codegen-panel'))
+            return;
+        const hoverTarget = target.closest('button, a, [role="menuitem"], [role="option"], .menu-item, [data-testid], svg, path, [data-parent-id]') || target;
+        if (hoverTarget !== lastHoveredElement) {
+            lastHoveredElement = hoverTarget;
+            hoverEntryTime = Date.now();
+            const currentTarget = hoverTarget;
+            // Case 1: Fast mutation happens during the first 150ms of hover
+            setTimeout(() => {
+                if (lastHoveredElement === currentTarget && lastRecordedHover !== currentTarget) {
+                    const sinceMutation = Date.now() - lastMutationTime;
+                    if (sinceMutation < 400) {
+                        lastRecordedHover = currentTarget;
+                        const selector = getUniqueCssSelector(currentTarget);
+                        if (selector && window.__pwCoreRecordHover) {
+                            ;
+                            window.__pwCoreRecordHover(selector);
+                        }
+                    }
+                }
+            }, 150);
+        }
+    });
+}

package/dist/codegen/hover-tracker/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './client';
+export * from './manager';

package/dist/codegen/hover-tracker/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./types"), exports);
+__exportStar(require("./client"), exports);
+__exportStar(require("./manager"), exports);

package/dist/codegen/hover-tracker/manager.d.ts

@@ -0,0 +1,11 @@
+import { BrowserContext } from '@playwright/test';
+import { HoverTrackerOptions } from './types';
+export declare class HoverTrackerManager {
+    private context;
+    private options;
+    constructor(context: BrowserContext, options: HoverTrackerOptions);
+    /**
+     * Initialize the hover tracking hooks on the browser context.
+     */
+    initialize(): Promise<void>;
+}

package/dist/codegen/hover-tracker/manager.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HoverTrackerManager = void 0;
+const client_1 = require("./client");
+class HoverTrackerManager {
+    context;
+    options;
+    constructor(context, options) {
+        this.context = context;
+        this.options = options;
+    }
+    /**
+     * Initialize the hover tracking hooks on the browser context.
+     */
+    async initialize() {
+        // 1. Expose function to browser context
+        await this.context.exposeFunction('__pwCoreRecordHover', (selector) => {
+            return this.options.onRecordHover(selector);
+        });
+        const fnStr = client_1.clientHoverTracker.toString();
+        // 2. Add client script as init script
+        await this.context.addInitScript((scriptStr) => {
+            const fn = new Function(`return ${scriptStr}`)();
+            fn();
+        }, fnStr);
+    }
+}
+exports.HoverTrackerManager = HoverTrackerManager;

package/dist/codegen/hover-tracker/types.d.ts

@@ -0,0 +1,3 @@
+export interface HoverTrackerOptions {
+    onRecordHover: (selector: string) => Promise<void> | void;
+}

package/dist/codegen/hover-tracker/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/codegen/index.d.ts

@@ -0,0 +1,35 @@
+export interface SelectorMatch {
+    type: string;
+    val: string;
+}
+export interface MatchResult {
+    pageKey: string;
+    elementKey: string;
+    val: string;
+    type: string;
+    isNew: boolean;
+}
+export declare function getSelectorValue(selector: string): SelectorMatch;
+export declare function findRegistryFile(dir: string): string | null;
+export declare function findPlaywrightConfig(dir: string): string | null;
+export declare function parseRegistry(filePath: string): any;
+export declare function matchDynamicEntry(val: string, entry: any, isTestId: boolean): {
+    matches: boolean;
+    matchedValue?: string;
+    placeholderName?: string;
+};
+export declare function writeRegistry(filePath: string, registryObj: any, overrideMode?: boolean, usedPageKeys?: Set<string> | string[]): Record<string, string>;
+export declare function findPageKey(url: string, title: string, registryObj: any, overrideMode?: boolean): string;
+export declare function toCamelCase(str: string): string;
+export declare function findMatchInDict(val: string, strategyType: string, pageKey: string, registryObj: any, overrideMode?: boolean): MatchResult | null;
+export declare function findElementKey(selector: string, pageKey: string, registryObj: any, overrideMode?: boolean, extra?: {
+    targetTestId?: string;
+    targetId?: string;
+    targetParentId?: string;
+    overrideType?: string;
+}): MatchResult;
+export declare function formatActionCall(pageKey: string, elementKey: string, action: any, isTextSelector?: boolean, textValue?: string): string;
+export * from './config';
+export * from './generator/index';
+export * from './types';
+export * from './scorer';