pw-core 1.2.0 → 1.3.0

package/dist/codegen/config/context-weights.d.ts

@@ -0,0 +1,8 @@
+export declare const CONTEXT_WEIGHTS: {
+    siblingText: number;
+    parentText: number;
+    heading: number;
+    label: number;
+    accessibleName: number;
+    semanticParent: number;
+};

package/dist/codegen/config/context-weights.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CONTEXT_WEIGHTS = void 0;
+exports.CONTEXT_WEIGHTS = {
+    siblingText: 15,
+    parentText: 15,
+    heading: 10,
+    label: 20,
+    accessibleName: 20,
+    semanticParent: 10
+};

package/dist/codegen/config/ignored-attributes.d.ts

@@ -0,0 +1 @@
+export declare const IGNORED_ATTRIBUTES: string[];

package/dist/codegen/config/ignored-attributes.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IGNORED_ATTRIBUTES = void 0;
+exports.IGNORED_ATTRIBUTES = ['style', 'onclick', 'onchange', 'tabindex', 'aria-hidden', 'disabled', 'checked'];

package/dist/codegen/config/ignored-classes.d.ts

@@ -0,0 +1 @@
+export declare const IGNORED_CLASS_PATTERNS: RegExp[];

package/dist/codegen/config/ignored-classes.js

@@ -0,0 +1,144 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IGNORED_CLASS_PATTERNS = void 0;
+exports.IGNORED_CLASS_PATTERNS = [
+    // ── Exact standalone utility classes ──
+    /^flex$/,
+    /^grid$/,
+    /^block$/,
+    /^inline$/,
+    /^inline-block$/,
+    /^inline-flex$/,
+    /^inline-grid$/,
+    /^hidden$/,
+    /^visible$/,
+    /^invisible$/,
+    /^relative$/,
+    /^absolute$/,
+    /^fixed$/,
+    /^sticky$/,
+    /^static$/,
+    /^overflow-/,
+    /^cursor-/,
+    /^pointer-events-/,
+    /^select-/,
+    /^resize$/,
+    /^table$/,
+    /^contents$/,
+    // ── Tailwind / utility spacing ──
+    /^m-/,
+    /^mt-/,
+    /^mr-/,
+    /^mb-/,
+    /^ml-/,
+    /^mx-/,
+    /^my-/,
+    /^-m/,
+    /^p-/,
+    /^pt-/,
+    /^pr-/,
+    /^pb-/,
+    /^pl-/,
+    /^px-/,
+    /^py-/,
+    /^gap-/,
+    /^space-/,
+    // ── Typography utilities ──
+    /^text-/,
+    /^font-/,
+    /^fw-/,
+    /^fst-/,
+    /^lh-/,
+    /^leading-/,
+    /^tracking-/,
+    /^whitespace-/,
+    /^break-/,
+    /^truncate$/,
+    // ── Colors / backgrounds ──
+    /^bg-/,
+    /^from-/,
+    /^via-/,
+    /^to-/,
+    /^text-opacity-/,
+    /^bg-opacity-/,
+    // ── Borders / rounded ──
+    /^border/,
+    /^rounded/,
+    /^ring-/,
+    /^outline-/,
+    /^divide-/,
+    // ── Layout utilities ──
+    /^d-/,
+    /^flex-/,
+    /^grid-/,
+    /^col-/,
+    /^row-/,
+    /^container/,
+    /^w-/,
+    /^h-/,
+    /^min-/,
+    /^max-/,
+    /^size-/,
+    /^aspect-/,
+    /^grow$/,
+    /^shrink$/,
+    /^basis-/,
+    /^order-/,
+    /^self-/,
+    // ── Flex / grid alignment ──
+    /^justify-/,
+    /^align-/,
+    /^items-/,
+    /^content-/,
+    /^place-/,
+    // ── Transforms / transitions / animations ──
+    /^transform/,
+    /^transition/,
+    /^duration-/,
+    /^ease-/,
+    /^delay-/,
+    /^animate-/,
+    /^translate-/,
+    /^rotate-/,
+    /^scale-/,
+    /^skew-/,
+    /^origin-/,
+    // ── Effects / filters ──
+    /^shadow/,
+    /^opacity-/,
+    /^blur-/,
+    /^brightness-/,
+    /^contrast-/,
+    /^drop-shadow-/,
+    /^grayscale/,
+    /^invert/,
+    /^saturate-/,
+    /^sepia/,
+    /^backdrop-/,
+    // ── Z-index / position ──
+    /^z-/,
+    /^inset-/,
+    /^top-/,
+    /^right-/,
+    /^bottom-/,
+    /^left-/,
+    // ── Bootstrap components ──
+    /^btn/,
+    /^alert-/,
+    /^card-/,
+    /^nav-/,
+    /^badge-/,
+    /^modal-/,
+    // ── Framework-generated class prefixes ──
+    /^Mui/,
+    /^css-/,
+    /^sc-/,
+    /^chakra-/,
+    /^emotion-/,
+    /^ant-/,
+    /^ng-/,
+    /^jsx-/,
+    /^svelte-/,
+    /^_/,
+    /^[a-z]{1,2}\d{3,}/ // e.g. "a1b2c3" auto-generated hashes
+];

package/dist/codegen/config/ignored-values.d.ts

@@ -0,0 +1 @@
+export declare const IGNORED_VALUES: string[];

package/dist/codegen/config/ignored-values.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IGNORED_VALUES = void 0;
+exports.IGNORED_VALUES = ['', 'true', 'false', 'yes', 'no', 'null', 'undefined', '0', '1'];

package/dist/codegen/config/index.d.ts

@@ -0,0 +1,29 @@
+export declare const codegenConfig: {
+    weights: {
+        testId: number;
+        id: number;
+        idAttribute: number;
+        dataAttribute: number;
+        className: number;
+        role: number;
+        label: number;
+        placeholder: number;
+        altText: number;
+        title: number;
+        text: number;
+        css: number;
+        xpath: number;
+    };
+    contextWeights: {
+        siblingText: number;
+        parentText: number;
+        heading: number;
+        label: number;
+        accessibleName: number;
+        semanticParent: number;
+    };
+    ignoredValues: string[];
+    ignoredAttributes: string[];
+    ignoredClasses: RegExp[];
+    strategyOrder: string[];
+};

package/dist/codegen/config/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.codegenConfig = void 0;
+const weights_1 = require("./weights");
+const context_weights_1 = require("./context-weights");
+const strategy_order_1 = require("./strategy-order");
+const ignored_values_1 = require("./ignored-values");
+const ignored_attributes_1 = require("./ignored-attributes");
+const ignored_classes_1 = require("./ignored-classes");
+exports.codegenConfig = {
+    weights: weights_1.LOCATOR_WEIGHTS,
+    contextWeights: context_weights_1.CONTEXT_WEIGHTS,
+    ignoredValues: ignored_values_1.IGNORED_VALUES,
+    ignoredAttributes: ignored_attributes_1.IGNORED_ATTRIBUTES,
+    ignoredClasses: ignored_classes_1.IGNORED_CLASS_PATTERNS,
+    strategyOrder: strategy_order_1.STRATEGY_ORDER
+};

package/dist/codegen/config/strategy-order.d.ts

@@ -0,0 +1 @@
+export declare const STRATEGY_ORDER: string[];

package/dist/codegen/config/strategy-order.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.STRATEGY_ORDER = void 0;
+exports.STRATEGY_ORDER = [
+    'testId',
+    'id',
+    'idAttribute',
+    'dataAttribute',
+    'className',
+    'role',
+    'label',
+    'placeholder',
+    'altText',
+    'title',
+    'text',
+    'css',
+    'xpath'
+];

package/dist/codegen/config/weights.d.ts

@@ -0,0 +1,15 @@
+export declare const LOCATOR_WEIGHTS: {
+    testId: number;
+    id: number;
+    idAttribute: number;
+    dataAttribute: number;
+    className: number;
+    role: number;
+    label: number;
+    placeholder: number;
+    altText: number;
+    title: number;
+    text: number;
+    css: number;
+    xpath: number;
+};

package/dist/codegen/config/weights.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LOCATOR_WEIGHTS = void 0;
+exports.LOCATOR_WEIGHTS = {
+    testId: 100,
+    id: 90,
+    idAttribute: 80,
+    dataAttribute: 75,
+    className: 60,
+    role: 50,
+    label: 40,
+    placeholder: 35,
+    altText: 33,
+    title: 32,
+    text: 20,
+    css: 10,
+    xpath: 1
+};

package/dist/codegen/floating-panel/client.d.ts

@@ -0,0 +1 @@
+export declare function clientInjectFloatingPanel(idx: string, fileName: string, hasSteps: boolean, cssStyle: string, htmlContent: string): void;

package/dist/codegen/floating-panel/client.js

@@ -0,0 +1,248 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clientInjectFloatingPanel = clientInjectFloatingPanel;
+function clientInjectFloatingPanel(idx, fileName, hasSteps, cssStyle, htmlContent) {
+    if (!document.body) {
+        setTimeout(() => clientInjectFloatingPanel(idx, fileName, hasSteps, cssStyle, htmlContent), 50);
+        return;
+    }
+    let sessionHasSteps = false;
+    try {
+        sessionHasSteps = sessionStorage.getItem('pw-core-has-steps') === 'true';
+    }
+    catch (e) { }
+    const effectiveHasSteps = hasSteps || sessionHasSteps;
+    if (effectiveHasSteps) {
+        try {
+            sessionStorage.setItem('pw-core-has-steps', 'true');
+        }
+        catch (e) { }
+    }
+    const numEl = document.getElementById('pw-core-test-num');
+    const existingNewTestBtn = document.getElementById('pw-core-new-test-btn');
+    const existingNewSerialBtn = document.getElementById('pw-core-new-serial-btn');
+    if (existingNewTestBtn) {
+        if (effectiveHasSteps) {
+            existingNewTestBtn.disabled = false;
+            existingNewTestBtn.removeAttribute('disabled');
+            existingNewTestBtn.style.opacity = '1';
+            existingNewTestBtn.style.cursor = 'pointer';
+            existingNewTestBtn.title = 'Start new test recording (new page/file)';
+        }
+        else {
+            existingNewTestBtn.disabled = true;
+            existingNewTestBtn.setAttribute('disabled', 'true');
+            existingNewTestBtn.style.opacity = '0.35';
+            existingNewTestBtn.style.cursor = 'not-allowed';
+            existingNewTestBtn.title = 'Disabled: Record at least one action/assertion to start a new test';
+        }
+    }
+    if (existingNewSerialBtn) {
+        if (effectiveHasSteps) {
+            existingNewSerialBtn.disabled = false;
+            existingNewSerialBtn.removeAttribute('disabled');
+            existingNewSerialBtn.style.opacity = '1';
+            existingNewSerialBtn.style.cursor = 'pointer';
+            existingNewSerialBtn.title = 'Add serial test (continues on same page)';
+        }
+        else {
+            existingNewSerialBtn.disabled = true;
+            existingNewSerialBtn.setAttribute('disabled', 'true');
+            existingNewSerialBtn.style.opacity = '0.35';
+            existingNewSerialBtn.style.cursor = 'not-allowed';
+            existingNewSerialBtn.title = 'Disabled: Record at least one action/assertion to add a serial test';
+        }
+    }
+    if (numEl) {
+        numEl.textContent = '#' + idx;
+        return;
+    }
+    // Remove existing panel to re-inject with updated index
+    const existing = document.getElementById('pw-core-codegen-panel');
+    if (existing)
+        existing.remove();
+    const div = document.createElement('div');
+    div.id = 'pw-core-codegen-panel';
+    div.setAttribute('data-pw-core-panel', 'true');
+    div.style.cssText = [
+        'position:fixed',
+        'top:0px',
+        'left:35%',
+        'z-index:2147483647',
+        'display:flex',
+        'align-items:center',
+        'gap:0',
+        'background:rgba(255,255,255,0.867)',
+        'box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px',
+        'backdrop-filter:blur(8px)',
+        '-webkit-backdrop-filter:blur(8px)',
+        'border:1px solid rgba(0,0,0,0.12)',
+        'border-radius:4px',
+        'font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif',
+        'color:#000',
+        'user-select:none',
+        'pointer-events:all',
+        'cursor:grab',
+        'overflow:hidden'
+    ].join(';');
+    const styleEl = document.createElement('style');
+    styleEl.textContent = cssStyle;
+    div.appendChild(styleEl);
+    // Create temporary container to parse htmlContent
+    const temp = document.createElement('div');
+    temp.innerHTML = htmlContent;
+    while (temp.firstChild) {
+        div.appendChild(temp.firstChild);
+    }
+    document.body.appendChild(div);
+    // Drag logic — constrained to top edge only
+    let dragging = false;
+    let dragStartX = 0;
+    let startLeft = 0;
+    const dragHandle = document.getElementById('pw-core-drag-handle');
+    const onMouseDown = (e) => {
+        dragging = true;
+        dragStartX = e.clientX;
+        const rect = div.getBoundingClientRect();
+        startLeft = rect.left;
+        div.style.cursor = 'grabbing';
+        if (dragHandle)
+            dragHandle.style.cursor = 'grabbing';
+        e.preventDefault();
+    };
+    const onMouseMove = (e) => {
+        if (!dragging)
+            return;
+        const dx = e.clientX - dragStartX;
+        const newLeft = Math.max(0, Math.min(window.innerWidth - div.offsetWidth, startLeft + dx));
+        div.style.left = newLeft + 'px';
+    };
+    const onMouseUp = () => {
+        dragging = false;
+        div.style.cursor = 'grab';
+        if (dragHandle)
+            dragHandle.style.cursor = 'grab';
+    };
+    if (dragHandle)
+        dragHandle.addEventListener('mousedown', onMouseDown);
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+    const enableButtons = () => {
+        try {
+            sessionStorage.setItem('pw-core-has-steps', 'true');
+        }
+        catch (e) { }
+        const newTestBtn = document.getElementById('pw-core-new-test-btn');
+        const newSerialBtn = document.getElementById('pw-core-new-serial-btn');
+        if (newTestBtn && newTestBtn.disabled) {
+            newTestBtn.disabled = false;
+            newTestBtn.removeAttribute('disabled');
+            newTestBtn.style.opacity = '1';
+            newTestBtn.style.cursor = 'pointer';
+            newTestBtn.title = 'Start new test recording (new page/file)';
+        }
+        if (newSerialBtn && newSerialBtn.disabled) {
+            newSerialBtn.disabled = false;
+            newSerialBtn.removeAttribute('disabled');
+            newSerialBtn.style.opacity = '1';
+            newSerialBtn.style.cursor = 'pointer';
+            newSerialBtn.title = 'Add serial test (continues on same page)';
+        }
+    };
+    // Auto-enable buttons instantly on any page interaction
+    document.addEventListener('click', (e) => {
+        if (e.target && e.target.closest('#pw-core-codegen-panel'))
+            return;
+        enableButtons();
+    }, { capture: true, passive: true });
+    document.addEventListener('keydown', (e) => {
+        if (e.target && e.target.closest('#pw-core-codegen-panel'))
+            return;
+        enableButtons();
+    }, { capture: true, passive: true });
+    document.addEventListener('input', (e) => {
+        if (e.target && e.target.closest('#pw-core-codegen-panel'))
+            return;
+        enableButtons();
+    }, { capture: true, passive: true });
+    const optimisticUpdate = (type) => {
+        const numEl = document.getElementById('pw-core-test-num');
+        if (numEl) {
+            const current = numEl.textContent || '';
+            const clean = current.replace('#', '');
+            if (type === 'test') {
+                const parts = clean.split('.');
+                const nextMajor = parseInt(parts[0], 10) + 1;
+                numEl.textContent = '#' + nextMajor;
+            }
+            else {
+                const parts = clean.split('.');
+                if (parts.length === 1) {
+                    numEl.textContent = '#' + parts[0] + '.2';
+                }
+                else {
+                    const nextMinor = (parseInt(parts[1], 10) || 1) + 1;
+                    numEl.textContent = '#' + parts[0] + '.' + nextMinor;
+                }
+            }
+        }
+        const newTestBtn = document.getElementById('pw-core-new-test-btn');
+        const newSerialBtn = document.getElementById('pw-core-new-serial-btn');
+        if (newTestBtn) {
+            newTestBtn.disabled = true;
+            newTestBtn.setAttribute('disabled', 'true');
+            newTestBtn.style.opacity = '0.35';
+            newTestBtn.style.cursor = 'not-allowed';
+        }
+        if (newSerialBtn) {
+            newSerialBtn.disabled = true;
+            newSerialBtn.setAttribute('disabled', 'true');
+            newSerialBtn.style.opacity = '0.35';
+            newSerialBtn.style.cursor = 'not-allowed';
+        }
+    };
+    div.addEventListener('click', (e) => {
+        const target = e.target;
+        if (!target)
+            return;
+        const btn = target.closest('.__pw-btn');
+        if (!btn || btn.disabled)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        if (btn.id === 'pw-core-new-test-btn') {
+            try {
+                sessionStorage.removeItem('pw-core-has-steps');
+            }
+            catch (err) { }
+            optimisticUpdate('test');
+            const trigger = () => {
+                if (window.__pwCoreStartNewTest) {
+                    ;
+                    window.__pwCoreStartNewTest();
+                }
+                else {
+                    setTimeout(trigger, 50);
+                }
+            };
+            trigger();
+        }
+        else if (btn.id === 'pw-core-new-serial-btn') {
+            try {
+                sessionStorage.removeItem('pw-core-has-steps');
+            }
+            catch (err) { }
+            optimisticUpdate('serial');
+            const trigger = () => {
+                if (window.__pwCoreStartNewSerialTest) {
+                    ;
+                    window.__pwCoreStartNewSerialTest();
+                }
+                else {
+                    setTimeout(trigger, 50);
+                }
+            };
+            trigger();
+        }
+    });
+}

package/dist/codegen/floating-panel/index.d.ts

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

package/dist/codegen/floating-panel/index.js

@@ -0,0 +1,20 @@
+"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("./template"), exports);
+__exportStar(require("./client"), exports);
+__exportStar(require("./manager"), exports);

package/dist/codegen/floating-panel/manager.d.ts

@@ -0,0 +1,19 @@
+import { BrowserContext, Page } from '@playwright/test';
+import { FloatingPanelOptions } from './types';
+export declare class FloatingPanelManager {
+    private context;
+    private options;
+    constructor(context: BrowserContext, options: FloatingPanelOptions);
+    /**
+     * Set up all required floating panel logic, including exposing callbacks and page event listeners.
+     */
+    initialize(): Promise<void>;
+    /**
+     * Inject or update the floating panel on a single page.
+     */
+    inject(page: Page): Promise<void>;
+    /**
+     * Helper to inject or update the panel on all active pages.
+     */
+    injectAll(): Promise<void>;
+}

package/dist/codegen/floating-panel/manager.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingPanelManager = void 0;
+const template_1 = require("./template");
+const client_1 = require("./client");
+class FloatingPanelManager {
+    context;
+    options;
+    constructor(context, options) {
+        this.context = context;
+        this.options = options;
+    }
+    /**
+     * Set up all required floating panel logic, including exposing callbacks and page event listeners.
+     */
+    async initialize() {
+        // 1. Expose functions to the browser context
+        await this.context.exposeFunction('__pwCoreGetTestIndex', () => {
+            return this.options.getDisplayTestIndex();
+        });
+        await this.context.exposeFunction('__pwCoreStartNewTest', () => {
+            console.log('DEBUG [cli]: __pwCoreStartNewTest exposed function called in browser context');
+            return this.options.onStartNewTest();
+        });
+        await this.context.exposeFunction('__pwCoreStartNewSerialTest', () => {
+            console.log('DEBUG [cli]: __pwCoreStartNewSerialTest exposed function called in browser context');
+            return this.options.onStartNewSerialTest();
+        });
+        // 2. Listen for page events to automatically inject the panel
+        this.context.on('page', (p) => {
+            p.on('load', () => this.inject(p).catch(() => { }));
+            p.on('domcontentloaded', () => this.inject(p).catch(() => { }));
+            p.on('framenavigated', (frame) => {
+                if (frame === p.mainFrame()) {
+                    // Wait briefly for SPA framework to mount before injecting/updating
+                    setTimeout(() => {
+                        this.inject(p).catch(() => { });
+                    }, 200);
+                }
+            });
+        });
+    }
+    /**
+     * Inject or update the floating panel on a single page.
+     */
+    async inject(page) {
+        try {
+            const idx = this.options.getDisplayTestIndex();
+            const fileName = this.options.getOutputFileName();
+            const hasSteps = this.options.hasSteps();
+            const newTestTitle = hasSteps
+                ? 'Start new test recording (new page/file)'
+                : 'Disabled: Record at least one action/assertion to start a new test';
+            const newSerialTitle = hasSteps
+                ? 'Add serial test (continues on same page)'
+                : 'Disabled: Record at least one action/assertion to add a serial test';
+            const disabledAttr = hasSteps ? '' : ' disabled style="opacity:0.35; cursor:not-allowed;"';
+            const htmlContent = (0, template_1.getFloatingPanelHtml)(idx, fileName, newTestTitle, newSerialTitle, disabledAttr);
+            const fnStr = client_1.clientInjectFloatingPanel.toString();
+            // Evaluate the client injection function in the page context
+            await page
+                .evaluate(({ idx, fileName, hasSteps, cssStyle, htmlContent, fnStr }) => {
+                const fn = new Function(`return ${fnStr}`)();
+                fn(idx, fileName, hasSteps, cssStyle, htmlContent);
+            }, {
+                idx,
+                fileName,
+                hasSteps,
+                cssStyle: template_1.FLOATING_PANEL_STYLE,
+                htmlContent,
+                fnStr
+            })
+                .catch((err) => {
+                console.error(`DEBUG [cli]: Failed to inject/update floating panel on page ${page.url()}:`, err);
+            });
+        }
+        catch (err) {
+            console.error(`DEBUG [cli]: Exception in injectFloatingPanel wrapper:`, err);
+        }
+    }
+    /**
+     * Helper to inject or update the panel on all active pages.
+     */
+    async injectAll() {
+        for (const p of this.context.pages()) {
+            await this.inject(p).catch(() => { });
+        }
+    }
+}
+exports.FloatingPanelManager = FloatingPanelManager;