qa360 2.3.0 → 2.3.2

package/dist/core/crawler/form-handler.js

@@ -0,0 +1,465 @@
+/**
+ * Form Handler
+ *
+ * P1 - Advanced form interactions
+ *
+ * Supports:
+ * - Auto-detect form fields
+ * - Smart field type detection (input, select, textarea, checkbox, radio)
+ * - Fill forms with data
+ * - Form validation detection
+ * - Submit handling
+ *
+ * @see https://playwright.dev/docs/input
+ */
+/**
+ * Form Handler class
+ */
+export class FormHandler {
+    /**
+     * Detect form fields on a page
+     */
+    async detectFormFields(page, config = {}) {
+        const formSelector = config.formSelector || 'form';
+        const timeout = config.timeout || 5000;
+        const fields = await page.evaluate((selector) => {
+            const form = selector ? document.querySelector(selector) : document.querySelector('form');
+            if (!form) {
+                // If no form found, look for form-like containers
+                const container = document.querySelector(selector || 'body');
+                if (!container)
+                    return [];
+                const detectedFields = [];
+                const inputs = container.querySelectorAll('input, select, textarea, [contenteditable="true"]');
+                inputs.forEach((input) => {
+                    const el = input;
+                    if (el.closest('fieldset[disabled]') || el.disabled)
+                        return;
+                    const typeAttr = el.getAttribute('type')?.toLowerCase() || 'text';
+                    let type = 'input';
+                    if (el.tagName === 'SELECT') {
+                        type = 'select';
+                    }
+                    else if (el.tagName === 'TEXTAREA') {
+                        type = 'textarea';
+                    }
+                    else if (typeAttr === 'checkbox') {
+                        type = 'checkbox';
+                    }
+                    else if (typeAttr === 'radio') {
+                        type = 'radio';
+                    }
+                    else if (typeAttr === 'file') {
+                        type = 'file';
+                    }
+                    else if (typeAttr === 'date') {
+                        type = 'date';
+                    }
+                    else if (typeAttr === 'email') {
+                        type = 'email';
+                    }
+                    else if (typeAttr === 'tel') {
+                        type = 'tel';
+                    }
+                    else if (typeAttr === 'number') {
+                        type = 'number';
+                    }
+                    // Generate selector
+                    let selector = '';
+                    if (el.id) {
+                        selector = `#${el.id}`;
+                    }
+                    else if (el.name) {
+                        selector = `[name="${el.name}"]`;
+                    }
+                    else {
+                        // Use CSS path
+                        const path = [];
+                        let current = el;
+                        while (current && current !== document.body) {
+                            let tag = current.tagName.toLowerCase();
+                            if (current.id) {
+                                path.unshift(`#${current.id}`);
+                                break;
+                            }
+                            else if (current.className) {
+                                const classes = current.className.split(' ').filter((c) => c);
+                                if (classes.length > 0) {
+                                    path.unshift(`${tag}.${classes[0]}`);
+                                }
+                            }
+                            else {
+                                path.unshift(tag);
+                            }
+                            current = current.parentElement;
+                        }
+                        selector = path.join(' > ');
+                    }
+                    // Find name/label
+                    let name = '';
+                    if (el.id) {
+                        const label = document.querySelector(`label[for="${el.id}"]`);
+                        if (label) {
+                            name = label.textContent?.trim() || '';
+                        }
+                    }
+                    if (!name && el.closest('label')) {
+                        name = el.closest('label')?.textContent?.trim() || '';
+                    }
+                    if (!name) {
+                        const placeholder = el.placeholder;
+                        name = placeholder || el.name || '';
+                    }
+                    const field = {
+                        selector,
+                        type,
+                        name,
+                        value: el.value,
+                        required: el.required,
+                        disabled: el.disabled,
+                    };
+                    if (type === 'select') {
+                        const select = el;
+                        field.options = Array.from(select.options).map(o => o.value || o.text);
+                    }
+                    detectedFields.push(field);
+                });
+                return detectedFields;
+            }
+            // Form found - detect fields within form
+            const detectedFields = [];
+            const inputs = form.querySelectorAll('input, select, textarea');
+            inputs.forEach((input) => {
+                const el = input;
+                const typeAttr = el.getAttribute('type')?.toLowerCase() || 'text';
+                let type = 'input';
+                if (el.tagName === 'SELECT') {
+                    type = 'select';
+                }
+                else if (el.tagName === 'TEXTAREA') {
+                    type = 'textarea';
+                }
+                else if (typeAttr === 'checkbox') {
+                    type = 'checkbox';
+                }
+                else if (typeAttr === 'radio') {
+                    type = 'radio';
+                }
+                else if (typeAttr === 'file') {
+                    type = 'file';
+                }
+                else if (typeAttr === 'date') {
+                    type = 'date';
+                }
+                else if (typeAttr === 'email') {
+                    type = 'email';
+                }
+                else if (typeAttr === 'tel') {
+                    type = 'tel';
+                }
+                else if (typeAttr === 'number') {
+                    type = 'number';
+                }
+                let selector = '';
+                if (el.id) {
+                    selector = `#${el.id}`;
+                }
+                else if (el.name) {
+                    selector = `[name="${el.name}"]`;
+                }
+                else {
+                    const index = Array.from(form.querySelectorAll(el.tagName)).indexOf(el);
+                    selector = `${el.tagName}:nth-of-type(${index + 1})`;
+                }
+                let name = '';
+                if (el.id) {
+                    const label = form.querySelector(`label[for="${el.id}"]`);
+                    if (label)
+                        name = label.textContent?.trim() || '';
+                }
+                if (!name) {
+                    const label = el.closest('label');
+                    if (label)
+                        name = label.textContent?.trim() || '';
+                }
+                if (!name) {
+                    const ariaLabel = el.getAttribute('aria-label');
+                    if (ariaLabel)
+                        name = ariaLabel;
+                }
+                if (!name) {
+                    name = el.placeholder || el.name || '';
+                }
+                const field = {
+                    selector: `${form.tagName}${form.id ? '#' + form.id : ''} ${selector}`,
+                    type,
+                    name,
+                    value: el.value,
+                    required: el.required,
+                    disabled: el.disabled,
+                };
+                if (type === 'select') {
+                    const select = el;
+                    field.options = Array.from(select.options).map(o => o.value || o.text);
+                }
+                detectedFields.push(field);
+            });
+            return detectedFields;
+        }, formSelector);
+        // Find submit button
+        let submitButton = '';
+        if (formSelector) {
+            const submitSelectors = [
+                `${formSelector} button[type="submit"]`,
+                `${formSelector} input[type="submit"]`,
+                `${formSelector} button:not([type])`,
+                `${formSelector} button:has-text("Submit")`,
+                `${formSelector} button:has-text("Send")`,
+                `${formSelector} button:has-text("Save")`,
+                `${formSelector} button:has-text("Login")`,
+                `${formSelector} button:has-text("Sign")`,
+            ];
+            for (const selector of submitSelectors) {
+                try {
+                    const element = await page.locator(selector).first();
+                    if (await element.count() > 0) {
+                        submitButton = selector;
+                        break;
+                    }
+                }
+                catch {
+                    // Continue
+                }
+            }
+        }
+        return { fields, submitButton };
+    }
+    /**
+     * Fill a form with data
+     */
+    async fillForm(page, data, config = {}) {
+        const formData = await this.detectFormFields(page, config);
+        const errors = [];
+        let filled = 0;
+        for (const field of formData.fields) {
+            if (field.disabled)
+                continue;
+            // Find matching data
+            let value = undefined;
+            // Try by name
+            if (field.name && data[field.name] !== undefined) {
+                value = data[field.name];
+            }
+            // Try by selector
+            if (value === undefined && data[field.selector] !== undefined) {
+                value = data[field.selector];
+            }
+            // Try by index (fallback)
+            if (value === undefined) {
+                const keys = Object.keys(data);
+                for (const key of keys) {
+                    if (key.toLowerCase().includes(field.name?.toLowerCase() || '')) {
+                        value = data[key];
+                        break;
+                    }
+                }
+            }
+            if (value === undefined || value === null) {
+                if (field.required) {
+                    errors.push(`Required field "${field.name}" not provided`);
+                }
+                continue;
+            }
+            try {
+                await this.fillField(page, field, value, config);
+                filled++;
+            }
+            catch (e) {
+                errors.push(`Failed to fill "${field.name}": ${e instanceof Error ? e.message : String(e)}`);
+            }
+        }
+        return {
+            success: errors.length === 0,
+            filled,
+            errors: errors.length > 0 ? errors : undefined,
+        };
+    }
+    /**
+     * Fill a single field
+     */
+    async fillField(page, field, value, config = {}) {
+        const timeout = config.timeout || 5000;
+        const clearBeforeFill = config.clearBeforeFill !== false;
+        await page.locator(field.selector).first().waitFor({ state: 'visible', timeout });
+        switch (field.type) {
+            case 'input':
+            case 'email':
+            case 'tel':
+            case 'number':
+            case 'date':
+                if (clearBeforeFill) {
+                    await page.locator(field.selector).first().fill('');
+                }
+                await page.locator(field.selector).first().fill(String(value));
+                break;
+            case 'textarea':
+                if (clearBeforeFill) {
+                    await page.locator(field.selector).first().fill('');
+                }
+                await page.locator(field.selector).first().fill(String(value));
+                break;
+            case 'select':
+                await page.locator(field.selector).first().selectOption(String(value));
+                break;
+            case 'checkbox':
+                if (value) {
+                    await page.locator(field.selector).first().check();
+                }
+                else {
+                    await page.locator(field.selector).first().uncheck();
+                }
+                break;
+            case 'radio':
+                // For radio buttons, only check if the field's value matches the desired value
+                // First, get the actual value of this radio button
+                const radioValue = await page.locator(field.selector).first().getAttribute('value');
+                const targetValue = String(value);
+                if (radioValue === targetValue) {
+                    await page.locator(field.selector).first().check();
+                }
+                // If values don't match, do nothing (don't check this radio button)
+                break;
+            case 'file':
+                await page.locator(field.selector).first().setInputFiles(String(value));
+                break;
+        }
+    }
+    /**
+     * Submit a form
+     */
+    async submitForm(page, config = {}) {
+        const formData = await this.detectFormFields(page, config);
+        if (formData.submitButton) {
+            await page.locator(formData.submitButton).first().click();
+        }
+        else {
+            // Try pressing Enter on a form field
+            const firstInput = formData.fields.find(f => f.type === 'input' || f.type === 'email' || f.type === 'tel' || f.type === 'number');
+            if (firstInput) {
+                await page.locator(firstInput.selector).first().press('Enter');
+            }
+        }
+    }
+    /**
+     * Detect form validation errors
+     */
+    async detectValidationErrors(page, config = {}) {
+        const formData = await this.detectFormFields(page, config);
+        const errors = [];
+        const validationErrors = await page.evaluate((formSelector) => {
+            const form = formSelector ? document.querySelector(formSelector) : document.querySelector('form');
+            if (!form)
+                return [];
+            const errors = [];
+            // Check for validation-message elements
+            const validationSelectors = [
+                '[role="alert"]',
+                '.error',
+                '.validation-error',
+                '.field-error',
+                '.invalid-feedback',
+                '[aria-invalid="true"]',
+                '[aria-describedby*="error"]',
+                '[data-error="true"]',
+            ];
+            validationSelectors.forEach((selector) => {
+                const elements = form.querySelectorAll(selector);
+                elements.forEach((el) => {
+                    const text = el.textContent?.trim();
+                    if (text)
+                        errors.push(text);
+                });
+            });
+            // Check input validity
+            const inputs = form.querySelectorAll('input, select, textarea');
+            inputs.forEach((input) => {
+                const el = input;
+                if (!el.checkValidity()) {
+                    const message = el.validationMessage;
+                    if (message && message !== '') {
+                        const name = el.name || el.id || el.placeholder || 'Field';
+                        errors.push(`${name}: ${message}`);
+                    }
+                }
+            });
+            return errors;
+        }, config.formSelector || '');
+        return [...validationErrors];
+    }
+    /**
+     * Fill and submit a form in one action
+     */
+    async fillAndSubmit(page, data, config = {}) {
+        const fillResult = await this.fillForm(page, data, config);
+        if (!fillResult.success) {
+            return fillResult;
+        }
+        await this.submitForm(page, config);
+        // Check for validation errors
+        const validationErrors = await this.detectValidationErrors(page, config);
+        return {
+            success: validationErrors.length === 0,
+            filled: fillResult.filled,
+            validationErrors: validationErrors.length > 0 ? validationErrors : undefined,
+        };
+    }
+    /**
+     * Get form data as object (extract current values)
+     */
+    async getFormData(page, config = {}) {
+        const formData = await this.detectFormFields(page, config);
+        const data = {};
+        for (const field of formData.fields) {
+            const value = await page.locator(field.selector).first().inputValue();
+            const name = field.name || field.selector;
+            data[name] = value;
+        }
+        return data;
+    }
+    /**
+     * Clear all form fields
+     */
+    async clearForm(page, config = {}) {
+        const formData = await this.detectFormFields(page, config);
+        for (const field of formData.fields) {
+            try {
+                switch (field.type) {
+                    case 'input':
+                    case 'email':
+                    case 'tel':
+                    case 'number':
+                    case 'date':
+                    case 'textarea':
+                        await page.locator(field.selector).first().fill('');
+                        break;
+                    case 'select':
+                        await page.locator(field.selector).first().selectOption({ index: 0 });
+                        break;
+                    case 'checkbox':
+                        await page.locator(field.selector).first().uncheck();
+                        break;
+                }
+            }
+            catch {
+                // Field might not be interactive
+            }
+        }
+    }
+}
+/**
+ * Factory function to create Form Handler
+ */
+export function createFormHandler() {
+    return new FormHandler();
+}
+export default FormHandler;

package/dist/core/crawler/framework-wait-handler.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Framework Wait Handler
+ *
+ * P1 - Framework-aware waiting for SPA applications
+ *
+ * Supports:
+ * - React hydration waiting
+ * - React Suspense lazy loading
+ * - Vue nextTick / reactive updates
+ * - Angular zone.js stability
+ * - Svelte tick waiting
+ * - SolidJS fine-grained reactivity
+ *
+ * @see https://playwright.dev/docs/pom
+ */
+export interface FrameworkWaitConfig {
+    /** Timeout in milliseconds */
+    timeout?: number;
+    /** Poll interval in milliseconds */
+    interval?: number;
+}
+export interface FrameworkDetectionResult {
+    /** Framework name */
+    framework: 'react' | 'vue' | 'angular' | 'svelte' | 'solid' | 'unknown' | null;
+    /** Framework version (if detectable) */
+    version?: string;
+    /** Confidence score (0-1) */
+    confidence: number;
+}
+export interface FrameworkWaitResult {
+    success: boolean;
+    duration?: number;
+    framework?: string;
+    error?: string;
+}
+/**
+ * Framework Wait Handler class
+ */
+export declare class FrameworkWaitHandler {
+    private defaultTimeout;
+    private defaultInterval;
+    constructor(config?: FrameworkWaitConfig);
+    /**
+     * Detect which framework is running on the page
+     */
+    detectFramework(page: any): Promise<FrameworkDetectionResult>;
+    /**
+     * Wait for React hydration to complete
+     */
+    waitForReactHydration(page: any, config?: FrameworkWaitConfig): Promise<FrameworkWaitResult>;
+    /**
+     * Wait for React Suspense lazy components to load
+     */
+    waitForReactSuspense(page: any, config?: FrameworkWaitConfig): Promise<FrameworkWaitResult>;
+    /**
+     * Wait for Vue nextTick and reactive updates to flush
+     */
+    waitForVueStable(page: any, config?: FrameworkWaitConfig): Promise<FrameworkWaitResult>;
+    /**
+     * Wait for Angular zone.js to stabilize
+     */
+    waitForAngularStable(page: any, config?: FrameworkWaitConfig): Promise<FrameworkWaitResult>;
+    /**
+     * Wait for Svelte tick to complete
+     */
+    waitForSvelteStable(page: any, config?: FrameworkWaitConfig): Promise<FrameworkWaitResult>;
+    /**
+     * Wait for SolidJS reactive updates to complete
+     */
+    waitForSolidStable(page: any, config?: FrameworkWaitConfig): Promise<FrameworkWaitResult>;
+    /**
+     * Auto-detect framework and wait for it to be stable
+     */
+    waitForFramework(page: any, config?: FrameworkWaitConfig): Promise<FrameworkWaitResult>;
+    /**
+     * Wait for all frameworks to be stable (for micro-frontends)
+     */
+    waitForAllFrameworks(page: any, config?: FrameworkWaitConfig): Promise<FrameworkWaitResult>;
+    /**
+     * Get framework info from the page
+     */
+    getFrameworkInfo(page: any): Promise<{
+        framework: string | null;
+        version?: string;
+        confidence: number;
+    }>;
+}
+/**
+ * Factory function to create Framework Wait Handler
+ */
+export declare function createFrameworkWaitHandler(config?: FrameworkWaitConfig): FrameworkWaitHandler;
+/**
+ * Auto-detect and wait for framework stability (convenience function)
+ */
+export declare function waitForFramework(page: any, config?: FrameworkWaitConfig): Promise<FrameworkWaitResult>;
+export default FrameworkWaitHandler;