页面字段分析器

使用浏览器自动化分析实时网页上的表单字段。

使用方法

当用户提供在线URL时，执行以下步骤：

步骤1：导航至URL

使用 mcpbrowser-usenew_page 打开提供的URL

步骤2：等待页面加载

等待页面完全加载（如需，使用 mcpbrowser-usewait_for）

步骤3：获取页面快照

使用 mcpbrowser-usetake_snapshot 获取页面的无障碍树

步骤4：分析表单字段

从快照中识别并统计以下表单字段类型：

输入字段

• - input[type=text] - 文本输入框
• input[type=number] - 数字输入框
• input[type=email] - 邮箱输入框
• input[type=password] - 密码输入框
• input[type=tel] - 电话输入框
• input[type=date] - 日期输入框
• input[type=file] - 文件上传
• input[type=checkbox] - 复选框
• input[type=radio] - 单选按钮

其他表单元素

• - select - 下拉选择框
• textarea - 文本域
• button[type=submit] - 提交按钮

UI组件库（常见模式）

• - role=textbox 元素 - 输入类组件
• role=combobox 元素 - 选择/自动完成组件
• role=listbox 元素 - 列表选择组件
• role=checkbox 元素 - 复选框组件
• role=radio 元素 - 单选组件
• role=spinbutton 元素 - 数字选择器组件
• role=switch 元素 - 开关组件

步骤5：使用JavaScript进行详细分析（可选）

如果快照提供的信息不够详细，使用 mcpbrowser-useevaluate_script 运行：

javascript
() => {
const fields = {
inputs: document.querySelectorAll(input).length,
textInputs: document.querySelectorAll(input[type=text], input:not([type])).length,
numberInputs: document.querySelectorAll(input[type=number]).length,
checkboxes: document.querySelectorAll(input[type=checkbox]).length,
radios: document.querySelectorAll(input[type=radio]).length,
selects: document.querySelectorAll(select).length,
textareas: document.querySelectorAll(textarea).length,
dateInputs: document.querySelectorAll(input[type=date], input[type=datetime-local]).length,
fileInputs: document.querySelectorAll(input[type=file]).length,
// Ant Design / CN-UI 特定
antInputs: document.querySelectorAll(.ant-input, .cn-input).length,
antSelects: document.querySelectorAll(.ant-select, .cn-select).length,
antDatePickers: document.querySelectorAll(.ant-picker, .cn-date-picker).length,
antCheckboxes: document.querySelectorAll(.ant-checkbox, .cn-checkbox).length,
antRadios: document.querySelectorAll(.ant-radio, .cn-radio).length,
antSwitches: document.querySelectorAll(.ant-switch, .cn-switch).length,
antUploads: document.querySelectorAll(.ant-upload, .cn-upload).length,
// 表单项（容器）
formItems: document.querySelectorAll(.ant-form-item, .cn-form-item, .next-form-item).length,
};

// 计算总唯一字段数
fields.totalFields = fields.formItems || (
fields.textInputs + fields.numberInputs + fields.checkboxes +
fields.radios + fields.selects + fields.textareas +
fields.dateInputs + fields.fileInputs
);

return fields;
}

步骤6：输出结果

将结果格式化为Markdown表格：

markdown

页面字段统计：[页面URL]

表单字段摘要

总计

• - 表单字段总数：X
• 表单项/组总数：X

备注

• - [关于表单结构的任何观察]

示例

用户输入：

https://example.com/form-page

输出：
markdown

页面字段统计：https://example.com/form-page

表单字段摘要

总计

• - 表单字段总数：29
• 表单项/组总数：29

提示

1. 1. 如果页面需要身份验证，请告知用户并让其先登录
2. 对于单页应用（SPA），等待动态内容加载完成
3. 某些表单字段可能隐藏或位于折叠区域中——考虑展开它们
4. 如果页面有多个标签页或区域，可根据需要分别分析每个部分