@arcadialdev/arcality 2.2.0

package/tests/_helpers/discover-view.spec.ts

@@ -0,0 +1,238 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import 'dotenv/config';
+import { test, expect } from '@playwright/test';
+
+test('discover visible components on view', async ({ page }) => {
+  const target = process.env.TARGET_PATH || '/';
+  const base = process.env.BASE_URL || '';
+
+  // Perform canonical login if credentials available
+  const user = process.env.LOGIN_USER || '';
+  const pass = process.env.LOGIN_PASSWORD || '';
+  if (user && pass) {
+    const loginUrl = base + '/login';
+    console.log('Logging in via', loginUrl);
+    await page.goto(loginUrl);
+
+    // Generic selector strategies
+    const userSelectors = [
+      'input[type="email"]', 'input[name="email"]', 'input[name="username"]',
+      'input[name="user"]', 'input[name="login"]', 'input[id="email"]',
+      'input[id="username"]', 'input[placeholder*="user" i]',
+      'input[placeholder*="usuario" i]', 'input[placeholder*="mail" i]'
+    ];
+    const passSelectors = [
+      'input[type="password"]', 'input[name="password"]',
+      'input[name="pass"]', 'input[id="password"]',
+      'input[placeholder*="pass" i]', 'input[placeholder*="contra" i]'
+    ];
+    const submitSelectors = [
+      'button[type="submit"]', 'input[type="submit"]',
+      'button:has-text("Login")', 'button:has-text("Sign in")',
+      'button:has-text("Entrar")', 'button:has-text("Ingresar")',
+      'button:has-text("Iniciar")', 'button:has-text("Acceder")',
+      '[role="button"]:has-text("Login")', '[role="button"]:has-text("Entrar")'
+    ];
+
+    let email = null;
+    for (const s of userSelectors) {
+      const loc = page.locator(s).first();
+      if (await loc.isVisible().catch(() => false)) {
+        email = loc;
+        console.log('Found user field:', s);
+        break;
+      }
+    }
+
+    let password = null;
+    for (const s of passSelectors) {
+      const loc = page.locator(s).first();
+      if (await loc.isVisible().catch(() => false)) {
+        password = loc;
+        console.log('Found password field:', s);
+        break;
+      }
+    }
+
+    let submit = null;
+    for (const s of submitSelectors) {
+      const loc = page.locator(s).first();
+      if (await loc.isVisible().catch(() => false)) {
+        submit = loc;
+        console.log('Found submit button:', s);
+        break;
+      }
+    }
+
+    if (email && password && submit) {
+      await email.fill(user);
+      await password.fill(pass);
+      await submit.click();
+      await expect(page).not.toHaveURL(/\/login(\b|$)/i, { timeout: 15000 }).catch(e => console.warn('Login URL check timeout/fail, continuing...'));
+      try {
+        await page.locator('nav, aside, [role="navigation"], [data-testid="sidebar"]').first().waitFor({ state: 'visible', timeout: 5000 });
+      } catch { }
+    } else {
+      console.warn('Could not detect all login fields (user, password, submit) - skipping auto-login step.');
+    }
+  }
+
+  const url = base + target;
+  console.log('Navigating to', url);
+  await page.goto(url);
+  await page.waitForLoadState('networkidle');
+
+  // Optionally wait for main container if present
+  try {
+    await page.locator('main, [role="main"]').first().waitFor({ state: 'visible', timeout: 3000 });
+  } catch { }
+
+  // Gather visible interactive elements and some metadata
+  const components = await page.evaluate(() => {
+    function isVisible(el: any) {
+      if (!el) return false;
+      const style = window.getComputedStyle(el);
+      if (style && (style.visibility === 'hidden' || style.display === 'none' || +style.opacity === 0)) return false;
+      const rect = el.getBoundingClientRect();
+      return rect.width > 0 && rect.height > 0;
+    }
+
+    function cssPath(el: any) {
+      if (!(el instanceof Element)) return '';
+      const path = [];
+      while (el && el.nodeType === Node.ELEMENT_NODE && el.tagName.toLowerCase() !== 'html') {
+        let selector = el.tagName.toLowerCase();
+        if (el.id) selector += `#${el.id}`;
+        else {
+          const cls = Array.from(el.classList || []).slice(0, 3).map((c: any) => c.replace(/[^a-z0-9_-]/gi, '')).join('.');
+          if (cls) selector += `.${cls}`;
+        }
+        const siblingIndex = Array.from(el.parentNode ? el.parentNode.children : []).filter((x: any) => x.tagName === el.tagName).indexOf(el) + 1;
+        if (siblingIndex > 1) selector += `:nth-of-type(${siblingIndex})`;
+        path.unshift(selector);
+        el = el.parentElement;
+      }
+      return path.join(' > ');
+    }
+
+    function nearestHeading(el: any) {
+      let cur = el;
+      while (cur) {
+        const headings = Array.from(cur.querySelectorAll('h1,h2,h3,h4,h5,h6')) as any[];
+        const h = headings.find((x) => x && x.textContent && x.textContent.trim());
+        if (h) return (h.textContent as string).trim().slice(0, 200);
+        cur = cur.parentElement;
+      }
+      return '';
+    }
+
+    function nearestLabelForInput(el: any) {
+      if (!el) return '';
+      if (el.id) {
+        const lbl = document.querySelector(`label[for="${el.id}"]`) as any;
+        if (lbl && lbl.textContent) return (lbl.textContent as string).trim().slice(0, 200);
+      }
+      // find closest preceding label sibling
+      let cur = el.previousElementSibling as any;
+      while (cur) {
+        if (cur.tagName?.toLowerCase() === 'label' && cur.textContent) return (cur.textContent as string).trim().slice(0, 200);
+        cur = cur.previousElementSibling;
+      }
+      // try parent label
+      const parentLabel = el.closest('label') as any;
+      if (parentLabel && parentLabel.textContent) return (parentLabel.textContent as string).trim().slice(0, 200);
+      return '';
+    }
+
+    function attributesMap(el: any) {
+      const out: Record<string, string> = {};
+      if (!(el instanceof Element)) return out;
+      for (const a of Array.from(el.attributes || [])) {
+        out[a.name] = a.value;
+      }
+      return out;
+    }
+
+    const nodes = Array.from(document.querySelectorAll('a, button, input, textarea, select, [role], label, h1,h2,h3,h4,h5,h6'))
+      .filter(isVisible);
+
+    const list = nodes.map((el: any) => {
+      const tag = el.tagName.toLowerCase();
+      const attrs = attributesMap(el);
+      const text = (el.textContent || '').trim().replace(/\s+/g, ' ').slice(0, 400);
+      const aria = attrs['aria-label'] || attrs['aria-labelledby'] || '';
+      const placeholder = attrs['placeholder'] || '';
+      const id = el.id || '';
+      const name = attrs['name'] || '';
+      const rect = el.getBoundingClientRect();
+      const parentText = (el.parentElement && el.parentElement.textContent)
+        ? (el.parentElement.textContent as string).trim().replace(/\s+/g, ' ').slice(0, 200)
+        : '';
+
+      return {
+        tag,
+        id,
+        name,
+        type: attrs['type'] || '',
+        text,
+        aria,
+        placeholder,
+        attributes: attrs,
+        data: Object.keys(attrs).filter(k => k.startsWith('data-')).reduce((acc, k) => { acc[k] = attrs[k]; return acc; }, {} as Record<string, string>),
+        boundingRect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+        nearestHeading: nearestHeading(el),
+        parentText,
+        label: (tag === 'input' || tag === 'textarea' || tag === 'select') ? nearestLabelForInput(el) : '',
+        selector: cssPath(el),
+      };
+    });
+
+    return { timestamp: Date.now(), url: location.href, components: list };
+  });
+
+  const outDir = process.env.DOMAIN_DIR || path.join(process.cwd(), 'out');
+  if (!fs.existsSync(outDir)) fs.mkdirSync(outDir, { recursive: true });
+  const filePath = path.join(outDir, `components-${Date.now()}.json`);
+  fs.writeFileSync(filePath, JSON.stringify({ url, timestamp: new Date().toISOString(), components }, null, 2), 'utf8');
+
+  console.log('Wrote components list to', filePath, 'found', components.components.length, 'items');
+
+  // Optional: autofill fields based on discovered components
+  if (process.env.AUTOFILL === 'true') {
+    console.log('AUTOFILL enabled — filling detected fields (skipping login fields)');
+    for (const c of (components as any).components) {
+      try {
+        // Skip login fields
+        if (c.selector && /input\[type="email"\]|input\[type="password"\]/i.test(c.selector)) continue;
+
+        const locator = page.locator(c.selector);
+        if ((await locator.count()) === 0) continue;
+
+        if (c.tag === 'input') {
+          const t = (c.type || '').toLowerCase();
+          if (t === 'email') await locator.fill(`test+${Date.now()}@example.com`).catch(() => { });
+          else if (t === 'password') await locator.fill(`P@ssw0rd!${Math.floor(Math.random() * 90000)}`).catch(() => { });
+          else if (t === 'tel') await locator.fill('5551234567').catch(() => { });
+          else if (t === 'number') await locator.fill('1').catch(() => { });
+          else await locator.fill('sample text').catch(() => { });
+        } else if (c.tag === 'textarea') {
+          await locator.fill('sample text').catch(() => { });
+        } else if (c.tag === 'select') {
+          // try to select a non-empty option
+          await locator.selectOption({ index: 1 }).catch(() => { });
+        }
+      } catch (e) {
+        // ignore individual fill errors
+      }
+    }
+
+    if (process.env.AUTOSUBMIT === 'true') {
+      console.log('AUTOSUBMIT enabled — attempting to submit form');
+      try {
+        const submit = page.locator('button[type="submit"], input[type="submit"]').first();
+        if (await submit.count()) await submit.click().catch(() => { });
+      } catch { }
+    }
+  }
+});

package/tests/_helpers/extract-view.spec.ts

@@ -0,0 +1,118 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import 'dotenv/config';
+import { test, expect } from '@playwright/test';
+
+test('extract view DOM and accessibility snapshot', async ({ page }) => {
+  const target = process.env.TARGET_PATH || '/';
+  const base = process.env.BASE_URL || '';
+
+  // Perform canonical login if credentials available
+  const user = process.env.LOGIN_USER || '';
+  const pass = process.env.LOGIN_PASSWORD || '';
+  if (user && pass) {
+    const loginUrl = base + '/login';
+    console.log('Logging in via', loginUrl);
+    await page.goto(loginUrl);
+
+    // Generic selector strategies
+    const userSelectors = [
+      'input[type="email"]', 'input[name="email"]', 'input[name="username"]',
+      'input[name="user"]', 'input[name="login"]', 'input[id="email"]',
+      'input[id="username"]', 'input[placeholder*="user" i]',
+      'input[placeholder*="usuario" i]', 'input[placeholder*="mail" i]'
+    ];
+    const passSelectors = [
+      'input[type="password"]', 'input[name="password"]',
+      'input[name="pass"]', 'input[id="password"]',
+      'input[placeholder*="pass" i]', 'input[placeholder*="contra" i]'
+    ];
+    const submitSelectors = [
+      'button[type="submit"]', 'input[type="submit"]',
+      'button:has-text("Login")', 'button:has-text("Sign in")',
+      'button:has-text("Entrar")', 'button:has-text("Ingresar")',
+      'button:has-text("Iniciar")', 'button:has-text("Acceder")',
+      '[role="button"]:has-text("Login")', '[role="button"]:has-text("Entrar")'
+    ];
+
+    let email = null;
+    for (const s of userSelectors) {
+      const loc = page.locator(s).first();
+      if (await loc.isVisible().catch(() => false)) {
+        email = loc;
+        console.log('Found user field:', s);
+        break;
+      }
+    }
+
+    let password = null;
+    for (const s of passSelectors) {
+      const loc = page.locator(s).first();
+      if (await loc.isVisible().catch(() => false)) {
+        password = loc;
+        console.log('Found password field:', s);
+        break;
+      }
+    }
+
+    let submit = null;
+    for (const s of submitSelectors) {
+      const loc = page.locator(s).first();
+      if (await loc.isVisible().catch(() => false)) {
+        submit = loc;
+        console.log('Found submit button:', s);
+        break;
+      }
+    }
+
+    if (email && password && submit) {
+      await email.fill(user);
+      await password.fill(pass);
+      await submit.click();
+      await expect(page).not.toHaveURL(/\/login(\b|$)/i, { timeout: 15000 }).catch(e => console.warn('Login URL check timeout/fail, continuing...'));
+      try {
+        await page.locator('nav, aside, [role="navigation"], [data-testid="sidebar"]').first().waitFor({ state: 'visible', timeout: 5000 });
+      } catch { }
+    } else {
+      console.warn('Could not detect all login fields (user, password, submit) - skipping auto-login step.');
+    }
+  }
+
+  const url = base + target;
+  console.log('Navigating to', url);
+  await page.goto(url);
+  await page.waitForLoadState('networkidle');
+
+  // Capture full HTML
+  const html = await page.content();
+
+  // Capture accessibility tree (helps detect components/roles/labels)
+  // Note: page.accessibility was deprecated/removed in Playwright 1.38+
+  let accessibility = null;
+  try {
+    accessibility = await (page as any).accessibility?.snapshot({ interestingOnly: false });
+  } catch (e: any) {
+    console.warn('Accessibility snapshot failed:', e?.message ?? e);
+  }
+
+  const outDir = process.env.DOMAIN_DIR || path.join(process.cwd(), 'out');
+  if (!fs.existsSync(outDir)) fs.mkdirSync(outDir, { recursive: true });
+
+  const filePath = path.join(outDir, `view-snapshot-${Date.now()}.json`);
+  fs.writeFileSync(
+    filePath,
+    JSON.stringify(
+      {
+        url,
+        timestamp: new Date().toISOString(),
+        html,
+        accessibility,
+      },
+      null,
+      2
+    ),
+    'utf8'
+  );
+
+  console.log('Wrote view snapshot to', filePath);
+});