案例 4：表单自动填写工具

场景描述

自动填写并提交各类表单（如注册、问卷调查等）

工具配置

插件信息

• 插件名称：表单助手
• 插件备注：自动填写和提交表单

工具配置

• 工具名称：auto_form
• 工具介绍：自动填写并提交指定表单
• 工具参数：
  • form_url (字符串): 表单页面URL
  • form_data (字符串): 表单数据JSON字符串

完整代码

/**
 * 表单自动填写工具
 *
 * 使用方式：
 * 1. 此工具用于动态填写并提交表单，需要手动打开页面
 * 2. 在工具配置中可设置表单URL，也可以通过参数动态指定
 * 3. 参数：form_url（表单页面URL）、form_data（表单数据JSON）
 */
class Tool extends OPENUGC_API_V2 {
  constructor(args) {
    super(args);  // 必须调用 super(args) 才能使用 this.args
    this.formUrl = args.form_url;
    this.formData = JSON.parse(args.form_data || '{}');
  }

  async run() {
    // 此工具需要手动打开页面进行操作
    // 使用 OpenUrl 打开表单页面
    const page = await this.OpenUrl({
      url: this.formUrl,
      runAt: 'document-end',
      showLog: true
    });

    try {
      const result = await page.execute(`
        // 自动填写表单
        const fillField = (selector, value) => {
          const field = document.querySelector(selector);
          if (!field) return false;

          // 根据字段类型填写
          if (field.tagName === 'INPUT') {
            const type = field.type;
            if (type === 'checkbox' || type === 'radio') {
              field.checked = value === 'true';
            } else {
              field.value = value;
            }
          } else if (field.tagName === 'SELECT') {
            field.value = value;
          } else if (field.tagName === 'TEXTAREA') {
            field.value = value;
          }

          // 触发 change 事件
          field.dispatchEvent(new Event('change', { bubbles: true }));
          field.dispatchEvent(new Event('input', { bubbles: true }));

          return true;
        };

        const results = [];
        for (const [key, value] of Object.entries(formData)) {
          const selector = \`[name="\${key}"], #\${key}, .\${key}\`;
          const filled = fillField(selector, String(value));
          results.push({ field: key, value, filled });
        }

        // 提交表单
        const submitButton = document.querySelector('input[type="submit"], button[type="submit"], .submit, .btn-submit');
        if (submitButton) {
          submitButton.click();
        }

        // 等待提交结果
        await new Promise(resolve => setTimeout(resolve, 2000));

        // 获取结果消息
        const message = document.querySelector('.success, .message, .result')?.innerText
          || '表单已提交';

        return {
          filled_fields: results.filter(r => r.filled).length,
          total_fields: results.length,
          message
        };
      `);

      return {
        success: true,
        result,
        timestamp: new Date().toISOString()
      };
    } finally {
      page.close();
    }
  }
}

📌 使用说明

此工具需要动态打开表单页面，因此在代码中使用 OpenUrl() 是合理的。适合场景：

• 动态指定表单页面（不在工具配置中固定URL）
• 需要多页面操作的复杂表单
• 需要根据参数动态选择目标页面

使用示例

用户：请帮我填写这个表单 https://example.com/register
AI：需要提供表单数据，请以JSON格式提供，例如：
{
  "username": "test123",
  "email": "[email protected]",
  "password": "123456",
  "age": "25",
  "agree": "true"
}

用户：好的
{
  "username": "zhangsan",
  "email": "[email protected]",
  "password": "abc123",
  "age": "30",
  "agree": "true"
}

AI：正在调用"表单助手"工具...

✅ 表单填写完成
📝 填写字段：5/5
📬 提交状态：成功
📄 结果消息：注册成功！请查收验证邮件

相关链接

• 案例 3：新闻聚合工具 - 学习数据聚合
• 案例 5：网页截图工具 - 学习截图功能
• 基础使用 - 了解插件开发基础