appium-session-recorder 0.0.1 → 0.0.3

package/src/ui/src/components/Inspector.tsx

@@ -1,265 +0,0 @@
-import { type Component, createSignal, Show, For } from 'solid-js';
-import { Dialog } from '@kobalte/core/dialog';
-import type { Interaction } from '../types';
-import { parseXmlSource } from '../utils/xml-parser';
-import { generateLocators } from '../utils/locators';
-import type { ParsedElement, Locator } from '../types';
-import './Inspector.css';
-
-type InspectorProps = {
-    interaction: Interaction | null;
-    open: boolean;
-    onClose: () => void;
-};
-
-export const Inspector: Component<InspectorProps> = (props) => {
-    const [selectedElement, setSelectedElement] = createSignal<ParsedElement | null>(null);
-    const [queryStrategy, setQueryStrategy] = createSignal('accessibility id');
-    const [queryValue, setQueryValue] = createSignal('');
-    const [foundElements, setFoundElements] = createSignal<ParsedElement[]>([]);
-    const [showSource, setShowSource] = createSignal(false);
-
-    const parsedElements = () => {
-        if (!props.interaction?.source) return [];
-        return parseXmlSource(props.interaction.source);
-    };
-
-    const runQuery = () => {
-        const strategy = queryStrategy();
-        const value = queryValue().trim();
-
-        if (!value) return;
-
-        const elements = parsedElements();
-        let found: ParsedElement[] = [];
-
-        switch (strategy) {
-            case 'accessibility id':
-                found = elements.filter(el => el.name === value || el.label === value);
-                break;
-            case 'class name':
-                found = elements.filter(el => el.type === value);
-                break;
-            case 'xpath':
-                // Properly evaluate XPath against the XML source
-                if (props.interaction?.source) {
-                    try {
-                        const parser = new DOMParser();
-                        const doc = parser.parseFromString(props.interaction.source, 'text/xml');
-                        const result = doc.evaluate(value, doc, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
-                        const matchedNodes: Element[] = [];
-                        for (let i = 0; i < result.snapshotLength; i++) {
-                            const node = result.snapshotItem(i);
-                            if (node && node.nodeType === 1) {
-                                matchedNodes.push(node as Element);
-                            }
-                        }
-                        // Match found nodes back to parsed elements
-                        found = elements.filter(el => matchedNodes.some(node => el.node.isEqualNode(node)));
-                    } catch (e) {
-                        console.error('Invalid XPath expression:', e);
-                    }
-                }
-                break;
-            case '-ios predicate string':
-                // iOS predicate string matching (simplified attribute matching)
-                found = elements.filter(el => {
-                    // Parse simple predicates like "name == 'value'" or "label CONTAINS 'text'"
-                    const predicateLower = value.toLowerCase();
-                    if (predicateLower.includes('name')) {
-                        const match = value.match(/name\s*(==|CONTAINS)\s*['"](.*)['"]/i);
-                        if (match) {
-                            return match[1] === '=='
-                                ? el.name === match[2]
-                                : el.name.includes(match[2]);
-                        }
-                    }
-                    if (predicateLower.includes('label')) {
-                        const match = value.match(/label\s*(==|CONTAINS)\s*['"](.*)['"]/i);
-                        if (match) {
-                            return match[1] === '=='
-                                ? el.label === match[2]
-                                : el.label.includes(match[2]);
-                        }
-                    }
-                    if (predicateLower.includes('type')) {
-                        const match = value.match(/type\s*(==|CONTAINS)\s*['"](.*)['"]/i);
-                        if (match) {
-                            return match[1] === '=='
-                                ? el.type === match[2]
-                                : el.type.includes(match[2]);
-                        }
-                    }
-                    return false;
-                });
-                break;
-            case '-ios class chain':
-                // iOS class chain matching (simplified type/index matching)
-                // Format: **/XCUIElementTypeButton[`name == "buttonName"`]
-                const classChainMatch = value.match(/\*\*\/(\w+)(?:\[`(.+?)`\])?/);
-                if (classChainMatch) {
-                    const targetType = classChainMatch[1];
-                    const predicate = classChainMatch[2];
-                    found = elements.filter(el => {
-                        if (el.type !== targetType) return false;
-                        if (!predicate) return true;
-                        // Simple predicate matching within class chain
-                        const nameMatch = predicate.match(/name\s*==\s*['"](.*)['"]/i);
-                        if (nameMatch) return el.name === nameMatch[1];
-                        const labelMatch = predicate.match(/label\s*==\s*['"](.*)['"]/i);
-                        if (labelMatch) return el.label === labelMatch[1];
-                        return true;
-                    });
-                }
-                break;
-        }
-
-        setFoundElements(found);
-        if (found.length > 0) {
-            setSelectedElement(found[0]);
-        }
-    };
-
-    const copyText = (text: string) => {
-        navigator.clipboard.writeText(text);
-    };
-
-    const locators = (): Locator[] => {
-        const el = selectedElement();
-        return el ? generateLocators(el) : [];
-    };
-
-    const resetState = () => {
-        setSelectedElement(null);
-        setQueryStrategy('accessibility id');
-        setQueryValue('');
-        setFoundElements([]);
-        setShowSource(false);
-    };
-
-    const handleClose = () => {
-        resetState();
-        props.onClose();
-    };
-
-    return (
-        <Dialog open={props.open} onOpenChange={(open) => !open && handleClose()}>
-            <Dialog.Portal>
-                <Dialog.Overlay class="inspector-overlay" />
-                <Dialog.Content class="inspector-modal">
-                    <Dialog.CloseButton class="inspector-close">✕</Dialog.CloseButton>
-
-                    <div class="inspector-panel">
-                        <div class="inspector-left">
-                            <Show when={props.interaction?.screenshot}>
-                                <img
-                                    src={`data:image/png;base64,${props.interaction!.screenshot}`}
-                                    alt="Screenshot"
-                                    class="inspector-screenshot"
-                                />
-                            </Show>
-                        </div>
-
-                        <div class="inspector-right">
-                            <div class="inspector-section">
-                                <h3>Query Tester</h3>
-                                <div class="query-tester">
-                                    <div class="query-row">
-                                        <select
-                                            value={queryStrategy()}
-                                            onChange={(e) => setQueryStrategy(e.currentTarget.value)}
-                                            class="query-select"
-                                        >
-                                            <option value="accessibility id">accessibility id</option>
-                                            <option value="xpath">xpath</option>
-                                            <option value="class name">class name</option>
-                                            <option value="-ios predicate string">-ios predicate string</option>
-                                            <option value="-ios class chain">-ios class chain</option>
-                                        </select>
-                                        <input
-                                            type="text"
-                                            value={queryValue()}
-                                            onInput={(e) => setQueryValue(e.currentTarget.value)}
-                                            onKeyPress={(e) => e.key === 'Enter' && runQuery()}
-                                            placeholder="Enter locator value..."
-                                            class="query-input"
-                                        />
-                                        <button onClick={runQuery} class="query-btn">
-                                            Find
-                                        </button>
-                                    </div>
-
-                                    <Show when={foundElements().length > 0}>
-                                        <div class="query-result success">
-                                            Found {foundElements().length} element(s)
-                                        </div>
-                                    </Show>
-                                </div>
-                            </div>
-                            <Show when={selectedElement()}>
-                                <div class="inspector-section">
-                                    <h3>Element Details</h3>
-                                    <div class="element-details">
-                                        <div class="element-attr">
-                                            <span class="attr-name">Type:</span>
-                                            <span class="attr-value">{selectedElement()!.type}</span>
-                                        </div>
-                                        <Show when={selectedElement()!.name}>
-                                            <div class="element-attr">
-                                                <span class="attr-name">Name:</span>
-                                                <span class="attr-value">{selectedElement()!.name}</span>
-                                            </div>
-                                        </Show>
-                                        <Show when={selectedElement()!.label}>
-                                            <div class="element-attr">
-                                                <span class="attr-name">Label:</span>
-                                                <span class="attr-value">{selectedElement()!.label}</span>
-                                            </div>
-                                        </Show>
-                                        <div class="element-attr">
-                                            <span class="attr-name">Bounds:</span>
-                                            <span class="attr-value">
-                                                x={selectedElement()!.x}, y={selectedElement()!.y},
-                                                w={selectedElement()!.width}, h={selectedElement()!.height}
-                                            </span>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div class="inspector-section">
-                                    <h3>Locators (click to copy)</h3>
-                                    <div class="locators-list">
-                                        <For each={locators()}>
-                                            {(locator) => (
-                                                <div class="locator-row" onClick={() => copyText(locator.value)}>
-                                                    <span class="locator-strategy">{locator.strategy}</span>
-                                                    <span class="locator-value">{locator.value}</span>
-                                                </div>
-                                            )}
-                                        </For>
-                                    </div>
-                                </div>
-                            </Show>
-
-                            {/* XML Source Toggle */}
-                            <Show when={props.interaction?.source}>
-                                <div class="inspector-section">
-                                    <button
-                                        class="source-toggle-btn"
-                                        onClick={() => setShowSource(!showSource())}
-                                    >
-                                        {showSource() ? 'Hide' : 'Show'} XML Source
-                                    </button>
-                                    <Show when={showSource()}>
-                                        <pre class="xml-source">{props.interaction!.source}</pre>
-                                    </Show>
-                                </div>
-                            </Show>
-                        </div>
-                    </div>
-                </Dialog.Content>
-            </Dialog.Portal>
-        </Dialog>
-    );
-};
-

package/src/ui/src/components/InteractionCard.css

@@ -1,159 +0,0 @@
-.interaction-card {
-    background: var(--color-bg-secondary);
-    border-radius: var(--radius-xl);
-    padding: var(--spacing-5);
-    border-left: 3px solid var(--color-accent-primary);
-    transition: all var(--transition-base);
-    box-shadow: var(--shadow-xs);
-    border-top: 1px solid var(--color-border);
-    border-right: 1px solid var(--color-border);
-    border-bottom: 1px solid var(--color-border);
-}
-
-.interaction-card.action {
-    border-left-color: var(--color-accent-warning);
-}
-
-.interaction-card:hover {
-    box-shadow: var(--shadow-md);
-    transform: translateY(-1px);
-}
-
-.interaction-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: var(--spacing-3);
-    flex-wrap: wrap;
-    gap: var(--spacing-2);
-}
-
-.interaction-header-left {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-2);
-    flex-wrap: wrap;
-}
-
-.interaction-id {
-    background: var(--color-bg-tertiary);
-    color: var(--color-text-secondary);
-    padding: 2px var(--spacing-2);
-    border-radius: var(--radius-full);
-    font-size: var(--font-size-xs);
-    font-weight: var(--font-weight-semibold);
-}
-
-.interaction-card.action .interaction-id {
-    background: #FFF3E0;
-    color: var(--color-accent-warning);
-}
-
-.interaction-method {
-    font-weight: var(--font-weight-semibold);
-    padding: 2px var(--spacing-2);
-    border-radius: var(--radius-sm);
-    font-size: var(--font-size-xs);
-    text-transform: uppercase;
-    letter-spacing: 0.03em;
-}
-
-.interaction-method.POST {
-    background: #E8F5EE;
-    color: var(--color-accent-success);
-}
-
-.interaction-method.GET {
-    background: #E8F0FE;
-    color: #3B7DD8;
-}
-
-.interaction-method.DELETE {
-    background: #FDECEB;
-    color: var(--color-accent-error);
-}
-
-.interaction-path {
-    color: var(--color-text-secondary);
-    font-size: var(--font-size-sm);
-    word-break: break-all;
-    overflow-wrap: break-word;
-    max-width: 100%;
-}
-
-.interaction-time {
-    color: var(--color-text-tertiary);
-    font-size: var(--font-size-xs);
-}
-
-.element-info {
-    background: var(--color-bg-tertiary);
-    padding: var(--spacing-2) var(--spacing-3);
-    border-radius: var(--radius-md);
-    margin-top: var(--spacing-3);
-    font-size: var(--font-size-sm);
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-}
-
-.element-info-using {
-    color: var(--color-accent-primary);
-    font-weight: var(--font-weight-medium);
-}
-
-.element-info-value {
-    color: var(--color-text-primary);
-    word-break: break-all;
-}
-
-.interaction-body {
-    background: var(--color-bg-primary);
-    padding: var(--spacing-3);
-    border-radius: var(--radius-md);
-    margin-top: var(--spacing-3);
-    font-size: var(--font-size-xs);
-    font-family: var(--font-mono);
-    overflow: auto;
-    max-height: 200px;
-    border: 1px solid var(--color-border);
-    white-space: pre-wrap;
-    word-break: break-all;
-    color: var(--color-text-secondary);
-}
-
-.screenshot-container {
-    margin-top: var(--spacing-4);
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-3);
-    align-items: flex-start;
-}
-
-.screenshot {
-    max-width: 300px;
-    border-radius: var(--radius-xl);
-    cursor: pointer;
-    border: 1px solid var(--color-border);
-    transition: all var(--transition-base);
-}
-
-.screenshot:hover {
-    border-color: var(--color-accent-primary);
-    box-shadow: var(--shadow-md);
-}
-
-.inspect-btn {
-    background: var(--color-accent-primary);
-    color: white;
-    border: none;
-    padding: var(--spacing-2) var(--spacing-5);
-    border-radius: var(--radius-lg);
-    cursor: pointer;
-    font-weight: var(--font-weight-medium);
-    font-size: var(--font-size-sm);
-    transition: all var(--transition-fast);
-}
-
-.inspect-btn:hover {
-    background: var(--color-accent-secondary);
-}

package/src/ui/src/components/InteractionCard.tsx

@@ -1,60 +0,0 @@
-import { type Component, Show } from 'solid-js';
-import type { Interaction } from '../types';
-import './InteractionCard.css';
-
-type InteractionCardProps = {
-    interaction: Interaction;
-    onInspect?: () => void;
-};
-
-export const InteractionCard: Component<InteractionCardProps> = (props) => {
-    const formattedTime = () => new Date(props.interaction.timestamp).toLocaleTimeString();
-    const isAction = () => !!props.interaction.screenshot;
-
-    return (
-        <div classList={{ 'interaction-card': true, 'action': isAction() }}>
-            <div class="interaction-header">
-                <div class="interaction-header-left">
-                    <span class="interaction-id">#{props.interaction.id}</span>
-                    <span classList={{
-                        'interaction-method': true,
-                        [props.interaction.method]: true,
-                    }}>
-                        {props.interaction.method}
-                    </span>
-                    <span class="interaction-path">{props.interaction.path}</span>
-                </div>
-                <span class="interaction-time">{formattedTime()}</span>
-            </div>
-
-            <Show when={props.interaction.elementInfo}>
-                <div class="element-info">
-                    <span class="element-info-using">{props.interaction.elementInfo!.using}:</span>
-                    {' "'}
-                    <span class="element-info-value">{props.interaction.elementInfo!.value}</span>
-                    {'"'}
-                </div>
-            </Show>
-
-            <Show when={props.interaction.body}>
-                <pre class="interaction-body">
-                    {JSON.stringify(props.interaction.body, null, 2)}
-                </pre>
-            </Show>
-
-            <Show when={props.interaction.screenshot}>
-                <div class="screenshot-container">
-                    <img
-                        src={`data:image/png;base64,${props.interaction.screenshot}`}
-                        alt="Screenshot"
-                        class="screenshot"
-                        onClick={props.onInspect}
-                    />
-                    <button class="inspect-btn" onClick={props.onInspect}>
-                        Inspect Elements
-                    </button>
-                </div>
-            </Show>
-        </div>
-    );
-};