unicorn-rpa

🦄 Unicorn RPA

强大的跨域iframe自动化控制工具

新功能：接口响应捕获

1. clickAndWaitForResponse - 点击并等待接口响应

这个动作会点击指定元素，然后等待并捕获可能触发的接口响应。

// 示例：点击提交按钮并等待接口响应
{
  "type": "clickAndWaitForResponse",
  "selector": ".submit-btn",
  "timeout": 10000, // 可选，默认10秒超时
  "delay": 1000     // 可选，动作完成后的延迟
}

2. waitForApiResponse - 等待接口响应

这个动作会等待并捕获接口响应，通常与 click 动作配合使用。

// 示例：先点击按钮，再等待接口响应
[
  {
    "type": "click",
    "selector": ".submit-btn"
  },
  {
    "type": "waitForApiResponse",
    "timeout": 10000, // 可选，默认10秒超时
    "delay": 1000     // 可选，动作完成后的延迟
  }
]

响应数据格式

当捕获到接口响应时，会在 results 数组中添加以下格式的数据：

// 成功响应
{
  "type": "apiResponse",
  "selector": ".submit-btn", // 仅 clickAndWaitForResponse 包含
  "data": {
    "type": "fetch", // 或 "xmlhttprequest"
    "url": "https://api.example.com/submit",
    "status": 200,
    "statusText": "OK",
    "responseText": "{\"success\": true, \"message\": \"提交成功\"}",
    "headers": {
      "content-type": "application/json",
      "cache-control": "no-cache"
    }
  }
}

// 请求失败
{
  "type": "apiError",
  "selector": ".submit-btn", // 仅 clickAndWaitForResponse 包含
  "error": "NetworkError: Failed to fetch"
}

// 等待超时
{
  "type": "apiTimeout",
  "selector": ".submit-btn", // 仅 clickAndWaitForResponse 包含
  "message": "等待接口响应超时"
}

使用场景

• 表单提交验证：点击提交按钮后验证接口返回结果
• 数据加载确认：点击加载按钮后确认数据是否正确返回
• 操作结果验证：执行操作后验证接口响应是否符合预期
• 错误处理：捕获接口错误并进行相应处理

注意事项

• 支持 fetch 和 XMLHttpRequest 两种请求方式
• 会自动恢复原始的请求方法，不会影响页面正常功能
• 响应文本会被完整记录，但日志中只显示前500个字符
• 超时时间可配置，默认10秒
• 可以捕获请求头信息

原有功能

简介

unicorn-rpa 是一个基于 postMessage 的跨域 iframe 自动化控制工具，支持多种 UI 自动化操作，适用于前端页面自动化测试、RPA 机器人、跨系统表单自动填充等场景。

• 支持多种常见 UI 操作（输入、点击、选择、滚动、批量勾选等）
• 支持跨域 iframe 自动化
• 内置安全校验（来源白名单、频率限制、动作类型校验、加密认证）
• 易于集成到 Vue/React/原生项目

安装

npm install unicorn-rpa
# 或
pnpm add unicorn-rpa
# 或
yarn add unicorn-rpa

主要特性

• 自动化动作丰富：支持 fill、select、click、doubleClick、rightClick、hover、scroll、screenshot、waitFor、wait、treeSelect、checkAllCheckboxes、getText、getValue 等
• 安全机制完善：
  • 来源域名白名单
  • 消息频率限制（每10秒同一来源只能发一次）
  • 动作类型白名单
  • AES+SHA256 加密认证（auth 字段）
• 高兼容性：兼容主流浏览器和 Node.js 注入场景
• 可扩展：支持自定义动作扩展

快速上手

1. 发送端（前端/Node）

import CryptoJS from 'crypto-js';

const AUTH_AES_KEY = 'unicorn-rpa-2024-very-secret-key-1234'; // 与接收端一致
const authPlain = '优霓空(重庆)科技有限公司';
const authEncrypted = CryptoJS.AES.encrypt(authPlain, AUTH_AES_KEY).toString();

const fillData = {
  auth: authEncrypted,
  iframeSelector: '#targetFrame',
  actions: [
    { type: 'fill', selector: '.input', value: 'hello', delay: 500 },
    { type: 'click', selector: '.btn', delay: 500 }
  ]
};

const iframe = document.getElementById('targetFrame');
iframe.contentWindow.postMessage(fillData, '*');

2. 接收端（iframe页面/目标页面）

在目标页面引入 unicorn-rpa 并初始化：

const injectRPA = require('unicorn-rpa');
injectRPA();

动作类型说明

type	说明
fill	文本输入
select	下拉选择
click	点击
doubleClick	双击
rightClick	右键点击
hover	悬停
scroll	滚动
screenshot	截图
waitFor	等待元素出现
wait	等待固定时长
treeSelect	树形选择
checkAllCheckboxes	批量勾选复选框
getText	获取文本
getValue	获取值

安全机制

• auth 加密认证
  • 发送方用 AES 密钥加密明文（如公司名），生成 auth 字段
  • 接收方用同样密钥解密后做 SHA256 hash，与本地 hash 匹配才通过
• 来源白名单
  • 只允许配置的域名来源的消息
• 频率限制
  • 同一来源每10秒只能发一次消息
• 动作类型白名单
  • 只允许预设的动作类型

配置说明

1. 安全配置（unicorn-rpa/src/utils/security.js）

const SECURITY_CONFIG = {
  ALLOWED_ORIGINS: [
    'http://localhost:5000',
    'http://localhost:5173',
    'http://localhost:8080',
    'http://127.0.0.1:5000',
    'http://127.0.0.1:5173',
    'http://127.0.0.1:8080'
  ],
  RATE_LIMIT: {
    INTERVAL: 10000 // 10秒
  }
};

2. AUTH 密钥和 hash

• 推荐用环境变量或外部配置文件隐藏密钥和 hash
• 例：

const AUTH_AES_KEY = process.env.AUTH_AES_KEY;
const AUTH_HASH = process.env.AUTH_HASH;

常见问题 FAQ

Q: 为什么我的消息被拒绝？

• 检查来源域名是否在白名单
• 检查发送频率是否过快
• 检查动作类型是否支持
• 检查 auth 字段是否加密且密钥一致

Q: 如何自定义动作？

• 可在 unicorn-rpa/src/actions/index.js 中扩展 actionHandlers

Q: 如何调试安全校验？

• 控制台会输出详细的安全警告和失败原因

贡献与反馈

如需定制功能、发现 bug 或有建议，欢迎 issue 或 PR。

License

MIT