@web-auto/webauto 0.1.1 → 0.1.2

package/tests/integration/12-test-simple-visual-loop.mjs

@@ -1,242 +0,0 @@
-#!/usr/bin/env node
-/**
- * 简化视觉回环测试 - 验证坐标定位反查 DOM 的可靠性
- * 
- * 测试流程：
- * 1. 获取页面上的 body 元素边界框（滚动到顶部后）
- * 2. 通过坐标反查 DOM
- * 3. 验证反查结果
- */
-
-import assert from 'node:assert/strict';
-import http from 'node:http';
-
-const UNIFIED_API = 'http://127.0.0.1:7701';
-const PROFILE = 'weibo_fresh';
-
-function log(msg) {
-  console.log(`[simple-visual-test] ${msg}`);
-}
-
-async function httpPost(path, data) {
-  return new Promise((resolve, reject) => {
-    const payload = JSON.stringify(data);
-    const req = http.request(
-      `${UNIFIED_API}${path}`,
-      {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Content-Length': Buffer.byteLength(payload)
-        }
-      },
-      (res) => {
-        let body = '';
-        res.on('data', (chunk) => body += chunk);
-        res.on('end', () => {
-          try {
-            resolve(JSON.parse(body));
-          } catch (err) {
-            resolve({ body, statusCode: res.statusCode });
-          }
-        });
-      }
-    );
-    req.on('error', reject);
-    req.write(payload);
-    req.end();
-  });
-}
-
-async function httpGet(path) {
-  return new Promise((resolve, reject) => {
-    http.get(`${UNIFIED_API}${path}`, (res) => {
-      let body = '';
-      res.on('data', (chunk) => body += chunk);
-      res.on('end', () => {
-        try {
-          resolve(JSON.parse(body));
-        } catch (err) {
-          resolve({ body, statusCode: res.statusCode });
-        }
-      });
-    }).on('error', reject);
-  });
-}
-
-async function main() {
-  try {
-    log('========================================');
-    log('简化视觉回环测试');
-    log('========================================\n');
-    
-    // 检查服务健康
-    log('检查服务健康...');
-    const health = await httpGet('/health');
-    if (!health.ok) {
-      throw new Error('服务不健康，请先启动: node scripts/start-headful.mjs');
-    }
-    log('  ✓ 服务正常\n');
-    
-    // 获取 body 元素的边界框（确保页面滚动到顶部）
-    log('获取 body 元素的边界框...');
-    const boundsResult = await httpPost('/v1/controller/action', {
-      action: 'browser:execute',
-      payload: {
-        profile: PROFILE,
-        script: `
-          (function() {
-            // 滚动到页面顶部
-            window.scrollTo(0, 0);
-            
-            const body = document.body;
-            if (!body) return null;
-            
-            const rect = body.getBoundingClientRect();
-            return {
-              tagName: body.tagName.toLowerCase(),
-              bounds: {
-                x: Math.round(rect.x),
-                y: Math.round(rect.y),
-                width: Math.round(rect.width),
-                height: Math.round(rect.height)
-              },
-              center: {
-                x: Math.round(rect.x + rect.width / 2),
-                y: Math.round(rect.y + rect.height / 2)
-              }
-            };
-          })()
-        `
-      }
-    });
-    
-    if (!boundsResult.success) {
-      throw new Error('无法获取 body 元素边界框');
-    }
-    
-    // 检查返回数据结构
-    let bounds = boundsResult.data;
-    if (bounds && bounds.result) {
-      bounds = bounds.result; // 提取实际的数据
-    }
-    
-    if (!bounds || !bounds.center) {
-      log('  ✗ 返回数据结构异常');
-      log(`    原始数据: ${JSON.stringify(boundsResult.data)}`);
-      throw new Error('返回数据结构异常');
-    }
-    
-    log(`  ✓ body 元素: ${bounds.tagName} @ (${bounds.center.x}, ${bounds.center.y})`);
-    log(`    bounds: ${bounds.bounds.width}x${bounds.bounds.height}`);
-    
-    // 通过坐标反查 DOM（使用视口内坐标）
-    log('\n通过坐标反查 DOM...');
-    const reverseResult = await httpPost('/v1/controller/action', {
-      action: 'browser:execute',
-      payload: {
-        profile: PROFILE,
-        script: `
-          (function() {
-            const x = ${bounds.center.x};
-            const y = ${bounds.center.y};
-            
-            const element = document.elementFromPoint(x, y);
-            if (!element) {
-              return {
-                tagName: 'NOT_FOUND',
-                selector: 'NOT_FOUND',
-                className: 'NOT_FOUND',
-                id: 'NOT_FOUND',
-                textContent: 'Element not found at coordinates (' + x + ', ' + y + ')'
-              };
-            }
-            
-            // 生成选择器
-            function getSelector(el) {
-              if (el.id) return '#' + el.id;
-              
-              let selector = el.tagName.toLowerCase();
-              
-              if (el.className && typeof el.className === 'string') {
-                const classes = el.className.split(' ').filter(c => c && c.length > 0);
-                if (classes.length > 0) {
-                  const stableClass = classes.find(c => !(/[A-Z0-9]{5,}/.test(c)));
-                  if (stableClass) {
-                    selector += '.' + stableClass;
-                  } else {
-                    const prefix = classes[0].replace(/[_-][A-Z0-9]+$/, '');
-                    selector += '[class*="' + prefix + '"]';
-                  }
-                }
-              }
-              
-              return selector;
-            }
-            
-            return {
-              tagName: element.tagName.toLowerCase(),
-              selector: getSelector(element),
-              className: element.className || '',
-              id: element.id || '',
-              textContent: (element.textContent || '').substring(0, 100)
-            };
-          })()
-        `
-      }
-    });
-    
-    if (!reverseResult.success || !reverseResult.data) {
-      throw new Error('坐标反查 DOM 失败');
-    }
-    
-    const found = reverseResult.data;
-    
-    if (found.tagName === 'NOT_FOUND') {
-      log('  ✗ 坐标反查失败，未找到元素');
-      log(`    位置: (${bounds.center.x}, ${bounds.center.y})`);
-      log('❌ 坐标定位反查 DOM 的方式不可靠');
-      log('\n========================================');
-      log('结论');
-      log('========================================');
-      log('❌ 测试失败: 坐标定位反查 DOM 方式不可靠');
-      process.exit(1);
-    }
-    
-    log(`  ✓ 反查结果: ${found.tagName}`);
-    log(`    选择器: ${found.selector}`);
-    log(`    类名: ${found.className}`);
-    
-    // 验证结果
-    const matched = found.tagName && bounds.tagName && 
-                   found.tagName.toLowerCase() === bounds.tagName.toLowerCase();
-    log(`\n匹配结果: ${matched ? '✓' : '✗'}`);
-    
-    if (matched) {
-      log('✅ 坐标定位反查 DOM 的方式可靠');
-      log('   可以用于视觉分析器的 DOM 元素识别');
-    } else {
-      log('❌ 坐标定位反查 DOM 的方式不可靠');
-      log(`   期望: ${bounds.tagName}, 实际: ${found.tagName}`);
-    }
-    
-    log('\n========================================');
-    log('结论');
-    log('========================================');
-    
-    if (matched) {
-      log('✅ 测试通过: 坐标定位反查 DOM 方式可靠');
-    } else {
-      log('❌ 测试失败: 坐标定位反查 DOM 方式不可靠');
-    }
-    
-    process.exit(matched ? 0 : 1);
-    
-  } catch (error) {
-    console.error('\n❌ 测试失败:', error.message);
-    if (error.stack) console.error(error.stack);
-    process.exit(1);
-  }
-}
-
-main();

package/tests/integration/13-test-visual-robust.mjs

@@ -1,185 +0,0 @@
-#!/usr/bin/env node
-/**
- * 视觉定位可靠性测试 - 调试版本
- */
-
-import assert from 'node:assert/strict';
-import http from 'node:http';
-
-const UNIFIED_API = 'http://127.0.0.1:7701';
-const PROFILE = 'weibo_fresh';
-
-function log(msg) {
-  console.log(`[visual-robust] ${msg}`);
-}
-
-async function httpPost(path, data) {
-  return new Promise((resolve, reject) => {
-    const payload = JSON.stringify(data);
-    const req = http.request(
-      `${UNIFIED_API}${path}`,
-      {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Content-Length': Buffer.byteLength(payload)
-        }
-      },
-      (res) => {
-        let body = '';
-        res.on('data', (chunk) => body += chunk);
-        res.on('end', () => {
-          try {
-            resolve(JSON.parse(body));
-          } catch (err) {
-            resolve({ body, statusCode: res.statusCode });
-          }
-        });
-      }
-    );
-    req.on('error', reject);
-    req.write(payload);
-    req.end();
-  });
-}
-
-async function httpGet(path) {
-  return new Promise((resolve, reject) => {
-    http.get(`${UNIFIED_API}${path}`, (res) => {
-      let body = '';
-      res.on('data', (chunk) => body += chunk);
-      res.on('end', () => {
-        try {
-          resolve(JSON.parse(body));
-        } catch (err) {
-          resolve({ body, statusCode: res.statusCode });
-        }
-      });
-    }).on('error', reject);
-  });
-}
-
-async function main() {
-  try {
-    log('========================================');
-    log('视觉定位可靠性测试');
-    log('========================================\n');
-    
-    const health = await httpGet('/health');
-    if (!health.ok) {
-      throw new Error('服务不健康，请先启动: node scripts/start-headful.mjs');
-    }
-    log('✓ 服务正常\n');
-    
-    // 一体化测试
-    log('执行一体化测试...');
-    const result = await httpPost('/v1/controller/action', {
-      action: 'browser:execute',
-      payload: {
-        profile: PROFILE,
-        script: `
-          (function() {
-            window.scrollTo(0, 0);
-            const body = document.body;
-            if (!body) return { success: false, error: 'body not found' };
-            
-            const rect = body.getBoundingClientRect();
-            const x = Math.round(rect.x);
-            const y = Math.round(rect.y);
-            const width = Math.round(rect.width);
-            const height = Math.round(rect.height);
-            const centerX = Math.round(x + width / 2);
-            const centerY = Math.round(y + height / 2);
-            
-            const element = document.elementFromPoint(centerX, centerY);
-            if (!element) {
-              return {
-                success: false,
-                error: 'elementFromPoint returned null',
-                original: {
-                  tagName: body.tagName.toLowerCase(),
-                  x: centerX,
-                  y: centerY,
-                  rect: { x, y, width, height }
-                }
-              };
-            }
-            
-            let selector = element.tagName.toLowerCase();
-            if (element.id) {
-              selector = '#' + element.id;
-            } else if (element.className) {
-              const classes = element.className.split(' ').filter(c => c);
-              if (classes.length > 0) {
-                selector = selector + '.' + classes[0];
-              }
-            }
-            
-            return {
-              success: true,
-              original: {
-                tagName: body.tagName.toLowerCase(),
-                x: centerX,
-                y: centerY,
-                rect: { x, y, width, height }
-              },
-              found: {
-                tagName: element.tagName.toLowerCase(),
-                selector,
-                id: element.id || '',
-                className: element.className || ''
-              },
-              matched: element.tagName.toLowerCase() === body.tagName.toLowerCase()
-            };
-          })()
-        `
-      }
-    });
-    
-    log(`  success: ${result.success}`);
-    log(`  data: ${JSON.stringify(result.data).substring(0, 500)}`);
-    
-    if (!result.success) {
-      log('✗ 测试失败');
-      process.exit(1);
-    }
-    
-    let data = result.data;
-    if (data && data.result) {
-      data = data.result;
-    }
-    
-    if (!data || !data.original) {
-      log('✗ 数据结构异常');
-      log(`  完整响应: ${JSON.stringify(result.data)}`);
-      process.exit(1);
-    }
-    
-    log('✓ 测试成功');
-    log(`  原始元素: ${data.original.tagName} @ (${data.original.x}, ${data.original.y})`);
-    log(`  反查元素: ${data.found.tagName}`);
-    log(`  生成选择器: ${data.found.selector}`);
-    log(`  匹配结果: ${data.matched ? '✓' : '✗'}`);
-    
-    log('\n========================================');
-    log('结论');
-    log('========================================');
-    
-    if (data.matched) {
-      log('✅ 坐标定位反查 DOM 的方式可靠');
-      log('   可以用于视觉分析器的 DOM 元素识别');
-      process.exit(0);
-    } else {
-      log('❌ 坐标定位反查 DOM 的方式不可靠');
-      log(`   期望: ${data.original.tagName}, 实际: ${data.found.tagName}`);
-      process.exit(1);
-    }
-    
-  } catch (error) {
-    console.error('\n❌ 测试失败:', error.message);
-    if (error.stack) console.error(error.stack);
-    process.exit(1);
-  }
-}
-
-main();

package/tests/integration/14-test-visual-highlight-loop.mjs

@@ -1,271 +0,0 @@
-#!/usr/bin/env node
-/**
- * 视觉高亮回环测试
- * 真正的回环：高亮目标 → 获取坐标 → 反查DOM → 高亮反查结果 → 对比
- */
-
-import http from 'node:http';
-
-const UNIFIED_API = 'http://127.0.0.1:7701';
-const PROFILE = 'weibo_fresh';
-
-function log(msg) {
-  console.log(`[highlight-loop] ${msg}`);
-}
-
-async function httpPost(path, data) {
-  return new Promise((resolve, reject) => {
-    const payload = JSON.stringify(data);
-    const req = http.request(
-      `${UNIFIED_API}${path}`,
-      { method: 'POST', headers: { 'Content-Type': 'application/json', 'Content-Length': Buffer.byteLength(payload) } },
-      (res) => {
-        let body = '';
-        res.on('data', (chunk) => body += chunk);
-        res.on('end', () => { try { resolve(JSON.parse(body)); } catch (err) { resolve({ body, statusCode: res.statusCode }); } });
-      }
-    );
-    req.on('error', reject);
-    req.write(payload);
-    req.end();
-  });
-}
-
-async function httpGet(path) {
-  return new Promise((resolve, reject) => {
-    http.get(`${UNIFIED_API}${path}`, (res) => {
-      let body = '';
-      res.on('data', (chunk) => body += chunk);
-      res.on('end', () => { try { resolve(JSON.parse(body)); } catch (err) { resolve({ body, statusCode: res.statusCode }); } });
-    }).on('error', reject);
-  });
-}
-
-async function main() {
-  try {
-    log('========================================');
-    log('视觉高亮回环测试');
-    log('========================================\n');
-
-    const health = await httpGet('/health');
-    if (!health.ok) throw new Error('服务不健康');
-    log('✓ 服务正常\n');
-
-    // Step 1: 找到目标元素并高亮（黄色）
-    log('Step 1: 找到目标元素并高亮（黄色）');
-    const targetResult = await httpPost('/v1/controller/action', {
-      action: 'browser:execute',
-      payload: {
-        profile: PROFILE,
-        script: `
-          (function() {
-            const links = Array.from(document.querySelectorAll('a'));
-            const target = links.find(a => {
-              const r = a.getBoundingClientRect();
-              return r.width > 10 && r.height > 10 && r.top >= 0 && r.left >= 0 && r.top < window.innerHeight;
-            });
-            
-            if (!target) return { success: false, error: 'no visible element found' };
-            
-            const highlight = document.createElement('div');
-            highlight.id = 'wa-target-highlight';
-            highlight.style.cssText = 
-              'position: fixed;' +
-              'border: 4px solid #FF6B35;' +
-              'background: rgba(255,107,53,0.2);' +
-              'pointer-events: none;' +
-              'z-index: 999999;';
-            
-            const rect = target.getBoundingClientRect();
-            highlight.style.left = rect.left + 'px';
-            highlight.style.top = rect.top + 'px';
-            highlight.style.width = rect.width + 'px';
-            highlight.style.height = rect.height + 'px';
-            
-            const label = document.createElement('div');
-            label.textContent = 'TARGET (黄色)';
-            label.style.cssText =
-              'position: absolute;' +
-              'top: -28px;' +
-              'left: 0;' +
-              'background: #FF6B35;' +
-              'color: white;' +
-              'padding: 4px 8px;' +
-              'font-size: 14px;' +
-              'font-family: monospace;' +
-              'font-weight: bold;';
-            highlight.appendChild(label);
-            
-            document.body.appendChild(highlight);
-            
-            return {
-              success: true,
-              tagName: target.tagName.toLowerCase(),
-              className: target.className,
-              text: target.textContent.substring(0, 30),
-              center: {
-                x: Math.round(rect.left + rect.width / 2),
-                y: Math.round(rect.top + rect.height / 2)
-              }
-            };
-          })()
-        `
-      }
-    });
-
-    let target = targetResult.data;
-    if (target && target.result) target = target.result;
-    
-    if (!target || !target.success) {
-      throw new Error('无法找到目标元素');
-    }
-
-    log(`  ✓ 目标元素: ${target.tagName} (${target.className})`);
-    log(`    中心坐标: (${target.center.x}, ${target.center.y})`);
-    log('    黄色高亮框已添加\n');
-
-    // Step 2: 通过坐标反查 DOM 并高亮（绿色）
-    log('Step 2: 通过坐标反查 DOM 并高亮（绿色）');
-    const reverseResult = await httpPost('/v1/controller/action', {
-      action: 'browser:execute',
-      payload: {
-        profile: PROFILE,
-        script: `
-          (function() {
-            const x = ${target.center.x};
-            const y = ${target.center.y};
-            
-            const element = document.elementFromPoint(x, y);
-            if (!element) {
-              return {
-                success: false,
-                error: 'element not found at coordinates',
-                x: x,
-                y: y
-              };
-            }
-            
-            const reverseHighlight = document.createElement('div');
-            reverseHighlight.id = 'wa-reverse-highlight';
-            reverseHighlight.style.cssText =
-              'position: fixed;' +
-              'border: 4px solid #00C853;' +
-              'background: rgba(0,200,83,0.2);' +
-              'pointer-events: none;' +
-              'z-index: 999999;';
-            
-            const rect = element.getBoundingClientRect();
-            reverseHighlight.style.left = rect.left + 'px';
-            reverseHighlight.style.top = rect.top + 'px';
-            reverseHighlight.style.width = rect.width + 'px';
-            reverseHighlight.style.height = rect.height + 'px';
-            
-            const label = document.createElement('div');
-            label.textContent = 'REVERSE (绿色)';
-            label.style.cssText =
-              'position: absolute;' +
-              'top: -28px;' +
-              'left: 0;' +
-              'background: #00C853;' +
-              'color: white;' +
-              'padding: 4px 8px;' +
-              'font-size: 14px;' +
-              'font-family: monospace;' +
-              'font-weight: bold;';
-            reverseHighlight.appendChild(label);
-            
-            document.body.appendChild(reverseHighlight);
-            
-            let selector = element.tagName.toLowerCase();
-            if (element.id) {
-              selector = '#' + element.id;
-            } else if (element.className) {
-              const classes = element.className.split(' ').filter(c => c);
-              if (classes.length > 0) {
-                selector += '.' + classes[0];
-              }
-            }
-            
-            return {
-              success: true,
-              tagName: element.tagName.toLowerCase(),
-              className: element.className,
-              selector,
-              text: element.textContent.substring(0, 30)
-            };
-          })()
-        `
-      }
-    });
-
-    let reverse = reverseResult.data;
-    if (reverse && reverse.result) reverse = reverse.result;
-    
-    if (!reverse || !reverse.success) {
-      log(`  ✗ 反查失败: ${reverse.error || 'unknown'}`);
-      log(`    坐标: (${reverse.x}, ${reverse.y})`);
-      throw new Error('坐标反查 DOM 失败');
-    }
-
-    log(`  ✓ 反查元素: ${reverse.tagName} (${reverse.className})`);
-    log(`    生成选择器: ${reverse.selector}\n`);
-
-    // Step 3: 清理高亮并验证
-    log('Step 3: 清理高亮框');
-    await httpPost('/v1/controller/action', {
-      action: 'browser:execute',
-      payload: {
-        profile: PROFILE,
-        script: `
-          (function() {
-            const target = document.getElementById('wa-target-highlight');
-            const reverse = document.getElementById('wa-reverse-highlight');
-            if (target) target.remove();
-            if (reverse) reverse.remove();
-            return { cleaned: true };
-          })()
-        `
-      }
-    });
-
-    log('  ✓ 高亮框已清理\n');
-
-    const matched = target.tagName === reverse.tagName;
-    const sameClass = target.className === reverse.className;
-
-    log('========================================');
-    log('测试结果');
-    log('========================================');
-    log(`目标元素: ${target.tagName}`);
-    log(`反查元素: ${reverse.tagName}`);
-    log(`标签匹配: ${matched ? '✓' : '✗'}`);
-    log(`类名匹配: ${sameClass ? '✓' : '✗'}`);
-
-    if (matched && sameClass) {
-      log('\n✅ 坐标定位反查 DOM 的方式可靠');
-      log('   可以用于视觉分析器的 DOM 元素识别');
-    } else {
-      log('\n⚠️  标签或类名不匹配');
-      log('   但可以改进选择器生成逻辑（使用 target.closest() 或其他方法）');
-    }
-
-    log('\n========================================');
-    log('结论');
-    log('========================================');
-
-    if (matched) {
-      log('✅ 测试通过：坐标定位反查 DOM 方式可靠');
-    } else {
-      log('⚠️  测试部分通过：需要优化选择器生成逻辑');
-    }
-
-    process.exit(matched ? 0 : 1);
-
-  } catch (error) {
-    console.error('\n❌ 测试失败:', error.message);
-    if (error.stack) console.error(error.stack);
-    process.exit(1);
-  }
-}
-
-main();