create-appraisejs 0.3.1-alpha.0 → 0.4.0-alpha.0

package/templates/blank/packages/locator-picker-companion/dist/selector-generator.js

@@ -1,257 +1,261 @@
 function normalizeText(value) {
-    return (value !== null && value !== void 0 ? value : '').replace(/\s+/g, ' ').trim();
+  return (value !== null && value !== void 0 ? value : '').replace(/\s+/g, ' ').trim()
 }
 function normalizeRoute(value) {
-    if (!value) {
-        return '/';
-    }
-    try {
-        return new URL(value).pathname || '/';
-    }
-    catch (_a) {
-        return value.startsWith('/') ? value : `/${value}`;
-    }
+  if (!value) {
+    return '/'
+  }
+  try {
+    return new URL(value).pathname || '/'
+  } catch (_a) {
+    return value.startsWith('/') ? value : `/${value}`
+  }
 }
 function escapeForCss(value) {
-    return value.replace(/[^a-zA-Z0-9_-]/g, match => `\\${match}`);
+  return value.replace(/[^a-zA-Z0-9_-]/g, match => `\\${match}`)
 }
 function escapeForSelectorText(value) {
-    return value.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+  return value.replace(/\\/g, '\\\\').replace(/"/g, '\\"')
 }
 function isLikelyStableIdentifier(value) {
-    if (!value) {
-        return false;
-    }
-    const normalized = value.trim();
-    if (!normalized || normalized.length > 120) {
-        return false;
-    }
-    return !/\d{4,}/.test(normalized) && !/[A-Fa-f0-9]{8,}/.test(normalized);
+  if (!value) {
+    return false
+  }
+  const normalized = value.trim()
+  if (!normalized || normalized.length > 120) {
+    return false
+  }
+  return !/\d{4,}/.test(normalized) && !/[A-Fa-f0-9]{8,}/.test(normalized)
 }
 function buildCssSelector(snapshot) {
-    const parts = [snapshot.tagName];
-    if (isLikelyStableIdentifier(snapshot.nameAttribute)) {
-        parts.push(`[name="${escapeForSelectorText(snapshot.nameAttribute)}"]`);
-    }
-    if (isLikelyStableIdentifier(snapshot.typeAttribute)) {
-        parts.push(`[type="${escapeForSelectorText(snapshot.typeAttribute)}"]`);
-    }
-    if (isLikelyStableIdentifier(snapshot.ariaLabel)) {
-        parts.push(`[aria-label="${escapeForSelectorText(snapshot.ariaLabel)}"]`);
-    }
-    if (parts.length === 1 && snapshot.stableClasses.length > 0) {
-        parts.push(...snapshot.stableClasses.slice(0, 2).map(className => `.${escapeForCss(className)}`));
-    }
-    return parts.length > 1 ? `css=${parts.join('')}` : '';
+  const parts = [snapshot.tagName]
+  if (isLikelyStableIdentifier(snapshot.nameAttribute)) {
+    parts.push(`[name="${escapeForSelectorText(snapshot.nameAttribute)}"]`)
+  }
+  if (isLikelyStableIdentifier(snapshot.typeAttribute)) {
+    parts.push(`[type="${escapeForSelectorText(snapshot.typeAttribute)}"]`)
+  }
+  if (isLikelyStableIdentifier(snapshot.ariaLabel)) {
+    parts.push(`[aria-label="${escapeForSelectorText(snapshot.ariaLabel)}"]`)
+  }
+  if (parts.length === 1 && snapshot.stableClasses.length > 0) {
+    parts.push(...snapshot.stableClasses.slice(0, 2).map(className => `.${escapeForCss(className)}`))
+  }
+  return parts.length > 1 ? `css=${parts.join('')}` : ''
 }
 function buildXPathSelector(snapshot) {
-    if (snapshot.id) {
-        return `xpath=//*[@id="${snapshot.id.replace(/"/g, '\\"')}"]`;
-    }
-    if (snapshot.text) {
-        return `xpath=//${snapshot.tagName}[normalize-space()="${snapshot.text.replace(/"/g, '\\"')}"]`;
-    }
-    return `xpath=//${snapshot.tagName}`;
+  if (snapshot.id) {
+    return `xpath=//*[@id="${snapshot.id.replace(/"/g, '\\"')}"]`
+  }
+  if (snapshot.text) {
+    return `xpath=//${snapshot.tagName}[normalize-space()="${snapshot.text.replace(/"/g, '\\"')}"]`
+  }
+  return `xpath=//${snapshot.tagName}`
 }
 function buildPrimarySelector(snapshot) {
-    if (isLikelyStableIdentifier(snapshot.testAttributeValue)) {
-        return {
-            selector: `css=[${snapshot.testAttributeName}="${escapeForSelectorText(snapshot.testAttributeValue)}"]`,
-            strategy: 'test-id',
-        };
-    }
-    if (snapshot.role && snapshot.accessibleName && snapshot.roleNameMatchCount === 1) {
-        return {
-            selector: `role=${snapshot.role}[name="${escapeForSelectorText(snapshot.accessibleName)}"]`,
-            strategy: 'role',
-        };
+  if (isLikelyStableIdentifier(snapshot.testAttributeValue)) {
+    return {
+      selector: `css=[${snapshot.testAttributeName}="${escapeForSelectorText(snapshot.testAttributeValue)}"]`,
+      strategy: 'test-id',
     }
-    if (snapshot.labelText) {
-        return {
-            selector: `label="${escapeForSelectorText(snapshot.labelText)}"`,
-            strategy: 'label',
-        };
+  }
+  if (snapshot.role && snapshot.accessibleName && snapshot.roleNameMatchCount === 1) {
+    return {
+      selector: `role=${snapshot.role}[name="${escapeForSelectorText(snapshot.accessibleName)}"]`,
+      strategy: 'role',
     }
-    if (snapshot.placeholder) {
-        return {
-            selector: `placeholder="${escapeForSelectorText(snapshot.placeholder)}"`,
-            strategy: 'placeholder',
-        };
+  }
+  if (snapshot.labelText) {
+    return {
+      selector: `label="${escapeForSelectorText(snapshot.labelText)}"`,
+      strategy: 'label',
     }
-    if (isLikelyStableIdentifier(snapshot.id)) {
-        return {
-            selector: `css=#${escapeForCss(snapshot.id)}`,
-            strategy: 'id',
-        };
+  }
+  if (snapshot.placeholder) {
+    return {
+      selector: `placeholder="${escapeForSelectorText(snapshot.placeholder)}"`,
+      strategy: 'placeholder',
     }
-    const cssSelector = buildCssSelector(snapshot);
-    if (cssSelector) {
-        return {
-            selector: cssSelector,
-            strategy: 'css',
-        };
+  }
+  if (isLikelyStableIdentifier(snapshot.id)) {
+    return {
+      selector: `css=#${escapeForCss(snapshot.id)}`,
+      strategy: 'id',
     }
+  }
+  const cssSelector = buildCssSelector(snapshot)
+  if (cssSelector) {
     return {
-        selector: buildXPathSelector(snapshot),
-        strategy: 'xpath',
-    };
+      selector: cssSelector,
+      strategy: 'css',
+    }
+  }
+  return {
+    selector: buildXPathSelector(snapshot),
+    strategy: 'xpath',
+  }
 }
 async function getElementSnapshot(elementHandle) {
-    return elementHandle.evaluate(node => {
-        const element = node;
-        const normalizeText = (value) => (value !== null && value !== void 0 ? value : '').replace(/\s+/g, ' ').trim();
-        const isLikelyStableIdentifier = (value) => {
-            if (!value) {
-                return false;
-            }
-            const normalized = value.trim();
-            if (!normalized || normalized.length > 120) {
-                return false;
-            }
-            return !/\d{4,}/.test(normalized) && !/[A-Fa-f0-9]{8,}/.test(normalized);
-        };
-        const getLabelText = (candidate) => {
-            if (!['input', 'textarea', 'select'].includes(candidate.tagName.toLowerCase())) {
-                return '';
-            }
-            const input = candidate;
-            if (input.labels && input.labels.length > 0) {
-                return normalizeText(Array.from(input.labels)
-                    .map(label => label.textContent || '')
-                    .join(' '));
-            }
-            return '';
-        };
-        const getAccessibleName = (candidate) => {
-            const ariaLabel = normalizeText(candidate.getAttribute('aria-label'));
-            if (ariaLabel) {
-                return ariaLabel;
-            }
-            const labelledBy = normalizeText(candidate.getAttribute('aria-labelledby'));
-            if (labelledBy) {
-                const text = labelledBy
-                    .split(/\s+/)
-                    .map(id => { var _a; return ((_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.textContent) || ''; })
-                    .join(' ');
-                const normalized = normalizeText(text);
-                if (normalized) {
-                    return normalized;
-                }
-            }
-            const labelText = getLabelText(candidate);
-            if (labelText) {
-                return labelText;
-            }
-            const alt = normalizeText(candidate.getAttribute('alt'));
-            if (alt) {
-                return alt;
-            }
-            const title = normalizeText(candidate.getAttribute('title'));
-            if (title) {
-                return title;
-            }
-            const placeholder = normalizeText(candidate.getAttribute('placeholder'));
-            if (placeholder) {
-                return placeholder;
-            }
-            return normalizeText(candidate.textContent).slice(0, 240);
-        };
-        const getRole = (candidate) => {
-            const explicitRole = normalizeText(candidate.getAttribute('role'));
-            if (explicitRole) {
-                return explicitRole;
-            }
-            const tagName = candidate.tagName.toLowerCase();
-            if (tagName === 'button') {
-                return 'button';
-            }
-            if (tagName === 'a' && candidate.hasAttribute('href')) {
-                return 'link';
-            }
-            if (tagName === 'textarea') {
-                return 'textbox';
-            }
-            if (tagName === 'select') {
-                return 'combobox';
-            }
-            if (tagName === 'img') {
-                return 'img';
-            }
-            if (tagName === 'input') {
-                const type = (candidate.getAttribute('type') || 'text').toLowerCase();
-                if (['button', 'submit', 'reset'].includes(type)) {
-                    return 'button';
-                }
-                if (type === 'checkbox') {
-                    return 'checkbox';
-                }
-                if (type === 'radio') {
-                    return 'radio';
-                }
-                return 'textbox';
-            }
-            return '';
-        };
-        const role = getRole(element);
-        const accessibleName = getAccessibleName(element);
-        let roleNameMatchCount = 0;
-        if (role && accessibleName) {
-            for (const candidate of Array.from(document.querySelectorAll('*'))) {
-                if (getRole(candidate) !== role) {
-                    continue;
-                }
-                if (getAccessibleName(candidate) !== accessibleName) {
-                    continue;
-                }
-                roleNameMatchCount += 1;
-                if (roleNameMatchCount > 1) {
-                    break;
-                }
-            }
+  return elementHandle.evaluate(node => {
+    const element = node
+    const normalizeText = value => (value !== null && value !== void 0 ? value : '').replace(/\s+/g, ' ').trim()
+    const isLikelyStableIdentifier = value => {
+      if (!value) {
+        return false
+      }
+      const normalized = value.trim()
+      if (!normalized || normalized.length > 120) {
+        return false
+      }
+      return !/\d{4,}/.test(normalized) && !/[A-Fa-f0-9]{8,}/.test(normalized)
+    }
+    const getLabelText = candidate => {
+      if (!['input', 'textarea', 'select'].includes(candidate.tagName.toLowerCase())) {
+        return ''
+      }
+      const input = candidate
+      if (input.labels && input.labels.length > 0) {
+        return normalizeText(
+          Array.from(input.labels)
+            .map(label => label.textContent || '')
+            .join(' '),
+        )
+      }
+      return ''
+    }
+    const getAccessibleName = candidate => {
+      const ariaLabel = normalizeText(candidate.getAttribute('aria-label'))
+      if (ariaLabel) {
+        return ariaLabel
+      }
+      const labelledBy = normalizeText(candidate.getAttribute('aria-labelledby'))
+      if (labelledBy) {
+        const text = labelledBy
+          .split(/\s+/)
+          .map(id => {
+            var _a
+            return ((_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.textContent) || ''
+          })
+          .join(' ')
+        const normalized = normalizeText(text)
+        if (normalized) {
+          return normalized
+        }
+      }
+      const labelText = getLabelText(candidate)
+      if (labelText) {
+        return labelText
+      }
+      const alt = normalizeText(candidate.getAttribute('alt'))
+      if (alt) {
+        return alt
+      }
+      const title = normalizeText(candidate.getAttribute('title'))
+      if (title) {
+        return title
+      }
+      const placeholder = normalizeText(candidate.getAttribute('placeholder'))
+      if (placeholder) {
+        return placeholder
+      }
+      return normalizeText(candidate.textContent).slice(0, 240)
+    }
+    const getRole = candidate => {
+      const explicitRole = normalizeText(candidate.getAttribute('role'))
+      if (explicitRole) {
+        return explicitRole
+      }
+      const tagName = candidate.tagName.toLowerCase()
+      if (tagName === 'button') {
+        return 'button'
+      }
+      if (tagName === 'a' && candidate.hasAttribute('href')) {
+        return 'link'
+      }
+      if (tagName === 'textarea') {
+        return 'textbox'
+      }
+      if (tagName === 'select') {
+        return 'combobox'
+      }
+      if (tagName === 'img') {
+        return 'img'
+      }
+      if (tagName === 'input') {
+        const type = (candidate.getAttribute('type') || 'text').toLowerCase()
+        if (['button', 'submit', 'reset'].includes(type)) {
+          return 'button'
+        }
+        if (type === 'checkbox') {
+          return 'checkbox'
+        }
+        if (type === 'radio') {
+          return 'radio'
         }
-        let testAttributeName = '';
-        let testAttributeValue = '';
-        for (const attributeName of ['data-testid', 'data-test', 'data-qa']) {
-            const value = element.getAttribute(attributeName);
-            if (isLikelyStableIdentifier(value)) {
-                testAttributeName = attributeName;
-                testAttributeValue = value;
-                break;
-            }
+        return 'textbox'
+      }
+      return ''
+    }
+    const role = getRole(element)
+    const accessibleName = getAccessibleName(element)
+    let roleNameMatchCount = 0
+    if (role && accessibleName) {
+      for (const candidate of Array.from(document.querySelectorAll('*'))) {
+        if (getRole(candidate) !== role) {
+          continue
+        }
+        if (getAccessibleName(candidate) !== accessibleName) {
+          continue
         }
-        return {
-            tagName: element.tagName.toLowerCase(),
-            text: normalizeText(element.textContent).slice(0, 240),
-            accessibleName,
-            labelText: getLabelText(element),
-            placeholder: normalizeText(element.getAttribute('placeholder')),
-            id: normalizeText(element.getAttribute('id')),
-            role,
-            roleNameMatchCount,
-            stableClasses: Array.from(element.classList || [])
-                .filter((className) => isLikelyStableIdentifier(className))
-                .slice(0, 2),
-            nameAttribute: normalizeText(element.getAttribute('name')),
-            typeAttribute: normalizeText(element.getAttribute('type')),
-            ariaLabel: normalizeText(element.getAttribute('aria-label')),
-            testAttributeName,
-            testAttributeValue,
-        };
-    });
+        roleNameMatchCount += 1
+        if (roleNameMatchCount > 1) {
+          break
+        }
+      }
+    }
+    let testAttributeName = ''
+    let testAttributeValue = ''
+    for (const attributeName of ['data-testid', 'data-test', 'data-qa']) {
+      const value = element.getAttribute(attributeName)
+      if (isLikelyStableIdentifier(value)) {
+        testAttributeName = attributeName
+        testAttributeValue = value
+        break
+      }
+    }
+    return {
+      tagName: element.tagName.toLowerCase(),
+      text: normalizeText(element.textContent).slice(0, 240),
+      accessibleName,
+      labelText: getLabelText(element),
+      placeholder: normalizeText(element.getAttribute('placeholder')),
+      id: normalizeText(element.getAttribute('id')),
+      role,
+      roleNameMatchCount,
+      stableClasses: Array.from(element.classList || [])
+        .filter(className => isLikelyStableIdentifier(className))
+        .slice(0, 2),
+      nameAttribute: normalizeText(element.getAttribute('name')),
+      typeAttribute: normalizeText(element.getAttribute('type')),
+      ariaLabel: normalizeText(element.getAttribute('aria-label')),
+      testAttributeName,
+      testAttributeValue,
+    }
+  })
 }
 export async function generatePickedLocatorPayload(page, elementHandle) {
-    const snapshot = await getElementSnapshot(elementHandle);
-    const selection = buildPrimarySelector(snapshot);
-    const currentUrl = page.url();
-    const pageTitle = normalizeText(await page.title().catch(() => ''));
-    return {
-        selector: selection.selector,
-        strategy: selection.strategy,
-        currentUrl,
-        pathname: normalizeRoute(currentUrl),
-        pageTitle,
-        tagName: snapshot.tagName,
-        text: snapshot.text || undefined,
-        accessibleName: snapshot.accessibleName || undefined,
-    };
+  const snapshot = await getElementSnapshot(elementHandle)
+  const selection = buildPrimarySelector(snapshot)
+  const currentUrl = page.url()
+  const pageTitle = normalizeText(await page.title().catch(() => ''))
+  return {
+    selector: selection.selector,
+    strategy: selection.strategy,
+    currentUrl,
+    pathname: normalizeRoute(currentUrl),
+    pageTitle,
+    tagName: snapshot.tagName,
+    text: snapshot.text || undefined,
+    accessibleName: snapshot.accessibleName || undefined,
+  }
 }

package/templates/blank/packages/locator-picker-companion/package.json

@@ -13,5 +13,6 @@
   "scripts": {
     "build": "tsc -p tsconfig.json",
     "dev": "node --import tsx ./src/cli.ts"
-  }
+  },
+  "version": "0.4.0"
 }

package/templates/blank/packages/locator-picker-companion/src/cli.ts

@@ -1,10 +1,4 @@
-import {
-  type Browser,
-  chromium,
-  type BrowserContext,
-  type ElementHandle,
-  type Page,
-} from 'playwright'
+import { type Browser, chromium, type BrowserContext, type ElementHandle, type Page } from 'playwright'
 import {
   appendLocatorPickerCrashLog,
   createLocatorPickerCrashLog,

package/templates/blank/packages/locator-picker-companion/src/injected-picker-script.ts

@@ -237,7 +237,9 @@ export function installLocatorPickerOverlay(): void {
     }
 
     if (parts.length === 1) {
-      const stableClasses = Array.from(element.classList || []).filter(isLikelyStableIdentifier).slice(0, 2)
+      const stableClasses = Array.from(element.classList || [])
+        .filter(isLikelyStableIdentifier)
+        .slice(0, 2)
       if (stableClasses.length > 0) {
         parts.push(...stableClasses.map(className => `.${escapeForCss(className)}`))
       }
@@ -650,10 +652,29 @@ export function installLocatorPickerOverlay(): void {
       state.hoveredElement = null
     }
 
-    const { helperText, statusText, selectorValue, metadataValue, errorValue, startButton, useButton, pickAgainButton, cancelButton } =
-      state.elements
-
-    if (!helperText || !statusText || !selectorValue || !metadataValue || !errorValue || !startButton || !useButton || !pickAgainButton || !cancelButton) {
+    const {
+      helperText,
+      statusText,
+      selectorValue,
+      metadataValue,
+      errorValue,
+      startButton,
+      useButton,
+      pickAgainButton,
+      cancelButton,
+    } = state.elements
+
+    if (
+      !helperText ||
+      !statusText ||
+      !selectorValue ||
+      !metadataValue ||
+      !errorValue ||
+      !startButton ||
+      !useButton ||
+      !pickAgainButton ||
+      !cancelButton
+    ) {
       return
     }
 

package/templates/blank/packages/locator-picker-companion/src/launcher.ts

@@ -18,9 +18,7 @@ async function getLatestModifiedTime(targetPath: string): Promise<number> {
   }
 
   const entries = await readdir(targetPath, { withFileTypes: true })
-  const times = await Promise.all(
-    entries.map(entry => getLatestModifiedTime(path.join(targetPath, entry.name))),
-  )
+  const times = await Promise.all(entries.map(entry => getLatestModifiedTime(path.join(targetPath, entry.name))))
 
   return Math.max(stats.mtimeMs, ...times)
 }

package/templates/blank/packages/locator-picker-companion/src/session-file.ts

@@ -76,20 +76,14 @@ export function getLocatorPickerCrashLogPath(sessionId: string, repoRoot = proce
   return path.join(getLocatorPickerLogsDir(repoRoot), `${sessionId}.log`)
 }
 
-export async function removeLocatorPickerProfileDir(
-  sessionId: string,
-  repoRoot = process.cwd(),
-): Promise<void> {
+export async function removeLocatorPickerProfileDir(sessionId: string, repoRoot = process.cwd()): Promise<void> {
   await rm(getLocatorPickerProfileDir(sessionId, repoRoot), {
     force: true,
     recursive: true,
   }).catch(() => undefined)
 }
 
-export async function removeLocatorPickerSessionFile(
-  sessionId: string,
-  repoRoot = process.cwd(),
-): Promise<void> {
+export async function removeLocatorPickerSessionFile(sessionId: string, repoRoot = process.cwd()): Promise<void> {
   await unlink(getLocatorPickerSessionFilePath(sessionId, repoRoot)).catch(() => undefined)
 }
 
@@ -137,9 +131,7 @@ export async function ensureLocatorPickerDirectories(repoRoot = process.cwd()):
   await mkdir(localAppDataDir, { recursive: true })
 }
 
-export async function readLocatorPickerSessionFile(
-  sessionFilePath: string,
-): Promise<CompanionSessionFile | null> {
+export async function readLocatorPickerSessionFile(sessionFilePath: string): Promise<CompanionSessionFile | null> {
   try {
     const raw = await readFile(sessionFilePath, 'utf8')
     return JSON.parse(raw) as CompanionSessionFile
@@ -148,10 +140,7 @@ export async function readLocatorPickerSessionFile(
   }
 }
 
-async function enqueueSessionFileOperation<T>(
-  sessionFilePath: string,
-  operation: () => Promise<T>,
-): Promise<T> {
+async function enqueueSessionFileOperation<T>(sessionFilePath: string, operation: () => Promise<T>): Promise<T> {
   const previousOperation = sessionFileOperationQueue.get(sessionFilePath) ?? Promise.resolve()
   const nextOperation = previousOperation.catch(() => undefined).then(operation)
 

package/templates/blank/packages/locator-picker-companion/src/types.ts

@@ -1,13 +1,6 @@
 export type CompanionSessionStatus = 'starting' | 'ready' | 'picked' | 'saving' | 'closed' | 'error'
 
-export type CompanionPickedLocatorStrategy =
-  | 'test-id'
-  | 'role'
-  | 'label'
-  | 'placeholder'
-  | 'id'
-  | 'css'
-  | 'xpath'
+export type CompanionPickedLocatorStrategy = 'test-id' | 'role' | 'label' | 'placeholder' | 'id' | 'css' | 'xpath'
 
 export interface CompanionLaunchSource {
   environmentId?: string