page-filed-analyzer

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

#### Other Form Elements

#### UI Component Libraries (common patterns)

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

User input:

https://example.com/form-page

Output: ```markdown

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