Page Field Analyzer

Analyzes form fields on live webpages using browser automation.

Usage

When the user provides an online URL, perform the following steps:

Step 1: Navigate to the URL

Use mcp__browser-use__new_page to open the provided URL

Step 2: Wait for Page Load

Wait for the page to fully load (use mcp__browser-use__wait_for if needed)

Step 3: Take a Snapshot

Use mcp__browser-use__take_snapshot to get the page's accessibility tree

Step 4: Analyze Form Fields

From the snapshot, identify and count these form field types:

Input Fields

• input[type="text"] - Text inputs
• input[type="number"] - Number inputs
• input[type="email"] - Email inputs
• input[type="password"] - Password inputs
• input[type="tel"] - Phone inputs
• input[type="date"] - Date inputs
• input[type="file"] - File uploads
• input[type="checkbox"] - Checkboxes
• input[type="radio"] - Radio buttons

Other Form Elements

• select - Dropdown selects
• textarea - Text areas
• button[type="submit"] - Submit buttons

UI Component Libraries (common patterns)

• Elements with role="textbox" - Input-like components
• Elements with role="combobox" - Select/autocomplete components
• Elements with role="listbox" - List selection components
• Elements with role="checkbox" - Checkbox components
• Elements with role="radio" - Radio components
• Elements with role="spinbutton" - Number picker components
• Elements with role="switch" - Toggle switches

Step 5: Use JavaScript for Detailed Analysis (Optional)

If the snapshot doesn't provide enough detail, use mcp__browser-use__evaluate_script to run:

() => {
  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 specific
    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,
    // Form items (containers)
    formItems: document.querySelectorAll('.ant-form-item, .cn-form-item, .next-form-item').length,
  };
  
  // Calculate total unique fields
  fields.totalFields = fields.formItems || (
    fields.textInputs + fields.numberInputs + fields.checkboxes + 
    fields.radios + fields.selects + fields.textareas + 
    fields.dateInputs + fields.fileInputs
  );
  
  return fields;
}

Step 6: Output Results

Format the results as a markdown table:

## Page Field Statistics: [Page URL]

### Form Fields Summary

| Field Type | Count |
|------------|-------|
| Text Inputs | X |
| Number Inputs | X |
| Selects/Dropdowns | X |
| Checkboxes | X |
| Radio Buttons | X |
| Date Pickers | X |
| File Uploads | X |
| Text Areas | X |
| Switches | X |

### Total
- **Total Form Fields**: X
- **Total Form Items/Groups**: X

### Notes
- [Any observations about the form structure]

Example

User input:

https://example.com/form-page

Output:

## Page Field Statistics: https://example.com/form-page

### Form Fields Summary

| Field Type | Count |
|------------|-------|
| Text Inputs | 12 |
| Number Inputs | 3 |
| Selects/Dropdowns | 8 |
| Checkboxes | 2 |
| Date Pickers | 4 |

### Total
- **Total Form Fields**: 29
- **Total Form Items/Groups**: 29

Tips

1. If the page requires authentication, inform the user and ask them to log in first
2. For single-page applications (SPAs), wait for dynamic content to load
3. Some form fields may be hidden or in collapsed sections - consider expanding them
4. If the page has multiple tabs or sections, analyze each one separately if requested