Skip to main content

Web Inspector

The Web Inspector is an essential tool in PostQode's Web Agent that allows you to inspect web elements, analyze their properties, and identify optimal selectors for automation. It provides a developer-friendly interface to understand the structure of web pages and build robust automation scripts.

What is Web Inspector?​

Web Inspector helps you:

  • Identify web elements on any webpage
  • Extract element properties (ID, class, attributes, text)
  • Generate optimal selectors (CSS, XPath, data attributes)
  • Analyze element hierarchy and DOM structure
  • Test selectors in real-time
  • Debug automation issues with element visibility and state

Think of it as your browser's DevTools, but integrated directly into PostQode with AI-powered insights.

Video Tutorial​

Watch the video below for a step-by-step walkthrough of the Web Inspector in action:

Prerequisites​

Before using Web Inspector, ensure you have:

How to Use Web Inspector​

Step 1: Activate Web Agent Mode​

  1. Open the PostQode chat interface in VS Code
  2. Click on the mode dropdown at the top of the chat panel
  3. Select "Web Agent" from the available modes
  4. Verify that your browser connection is active (green indicator)

Step 2: Navigate to Your Target Page​

First, navigate to the webpage you want to inspect:

Go to https://example.com

or

Navigate to the login page at https://app.example.com/login

Step 3: Activate the Inspector​

There are multiple ways to activate the inspector:

Method 1: Using the Inspector Button​

  1. Look for the Inspector button in the Web Agent toolbar
  2. Click the "Inspect" button (usually an icon with a cursor/pointer)
  3. The inspector will activate, indicated by a visual highlight mode

Method 2: Using Natural Language Command​

Inspect the page elements

or

Enable inspector mode

or

Show me the element inspector

Step 4: Inspect Elements​

Once the inspector is active, you can inspect elements in several ways:

Interactive Inspection​

Inspect the "Sign In" button

or

Show me the properties of the email input field

Hover-Based Inspection​

When inspector mode is active:

  1. Hover over elements in the browser
  2. Elements will be highlighted with a colored overlay
  3. Element information appears in a tooltip or panel

Click to Inspect​

  1. Click on any element while inspector is active
  2. Detailed information about the element will be displayed
  3. Suggested selectors will be generated automatically

Inspector Features​

Element Information Display​

When you inspect an element, Web Inspector shows:

Basic Properties​

  • Tag Name: <button>, <input>, <div>, etc.
  • ID: Unique identifier (if present)
  • Classes: CSS class names
  • Text Content: Visible text within the element
  • Value: Current value (for input fields)

Attributes​

  • name: Form field name
  • type: Input type (text, password, email, etc.)
  • placeholder: Placeholder text
  • data- attributes*: Custom data attributes
  • aria- attributes*: Accessibility attributes
  • href: Link destination (for anchors)
  • src: Source URL (for images, scripts)

Computed Properties​

  • Visibility: Whether element is visible
  • Position: Element coordinates (x, y)
  • Size: Width and height
  • Display State: block, inline, flex, etc.
  • Z-Index: Stacking order

Selector Suggestions​

  • CSS Selector: Recommended CSS selector
  • XPath: XPath expression
  • Text-based: Selector using visible text
  • Attribute-based: Selector using data attributes

Selector Generation​

Web Inspector automatically generates multiple selector options, ranked by reliability:

Priority 1: ID Selector (Most Reliable)​

#login-button

Priority 2: Data Attribute Selector​

[data-testid="login-btn"]

Priority 3: Unique Class Combination​

.btn.btn-primary.login-action

Priority 4: Structural Selector​

form.login-form > button[type="submit"]

Priority 5: XPath​

//button[@type='submit' and contains(text(), 'Sign In')]

Priority 6: Text-based Selector​

button:has-text("Sign In")

Element Hierarchy View​

See the DOM structure around your inspected element:

<body>
  └── <div class="container">
      └── <form id="login-form">
          └── <div class="form-group">
              └── <input type="email" name="email"> ← Inspected Element

Advanced Inspector Usage​

Inspect Multiple Elements​

Inspect several related elements at once:

Inspect all buttons on this page

or

Show me all input fields in the login form

Compare Elements​

Compare properties of similar elements:

Compare the "Login" button and "Sign Up" button selectors

Test Selectors​

Verify if a selector works correctly:

Test if the selector 'button.submit-btn' finds the correct element

or

Check if this XPath works: //input[@name='email']

Find Elements by Criteria​

Search for elements matching specific criteria:

Find all clickable elements with the text "Submit"

or

Show me all input fields that are required

Inspect Dynamic Elements​

For elements that appear/disappear dynamically:

Wait for the modal to appear and then inspect the close button

or

Inspect the dropdown options after clicking the select menu

Hands-On Test Cases​

Try these guided test cases to practice using the Web Inspector with real websites.

Test Case 1: Inspect Form Elements​

Website: https://demoqa.com/text-box

Objective: Practice identifying form elements using snapshot inspection

Steps:

  1. Tell the Web Agent: Go to https://demoqa.com/text-box
  2. Tell the Web Agent: Take a snapshot
  3. Look at the accessibility tree and identify:
    • How many textboxes are there?
    • What is the accessible name of each textbox?
    • What role does the submit button have?
    • What is the main heading?
  4. Tell the Web Agent: Fill the Full Name field with 'Test User'
  5. Tell the Web Agent: Take a snapshot
  6. Verify: Do you see the filled value in the snapshot?

Expected Results:

  • Snapshot shows multiple textboxes: Full Name, Email, Current Address, Permanent Address
  • Snapshot shows: button "Submit" [ref=eX]
  • Snapshot shows the main heading "Text Box"
  • After filling: Value appears in the textbox

What You Learn:

  • How to identify form fields by role
  • How to find element references
  • How to verify input values

Test Case 2: Inspect Dynamic Content Changes​

Website: https://demoqa.com/dynamic-properties

Objective: Practice tracking DOM changes with snapshots

Steps:

  1. Tell the Web Agent: Go to https://demoqa.com/dynamic-properties
  2. Tell the Web Agent: Take a snapshot
  3. Identify: What buttons are visible initially?
  4. Wait 5 seconds
  5. Tell the Web Agent: Take a snapshot
  6. Verify: Do you see a "Visible After 5 Seconds" button now?
  7. Identify: Has the "Color Change" button changed?
  8. Note the refs of all buttons

Expected Results:

  • Initial snapshot: Some buttons visible, "Visible After 5 Seconds" not present
  • After 5 seconds: button "Visible After 5 Seconds" [ref=eX] appears
  • Color Change button may show different styling

What You Learn:

  • How snapshots show dynamic content
  • How to track element appearance
  • How element properties change over time

Practical Use Cases​

1. Building Automation Scripts​

Scenario: You need to automate a login form

Inspect the email input field
Inspect the password input field
Inspect the submit button

Result: Get optimal selectors for each element to use in your automation script.

2. Debugging Failed Automation​

Scenario: Your automation script can't find an element

Inspect the element that should be clicked
Show me why the selector 'button#submit' is not working

Result: Discover if the element ID changed or if the element is hidden.

3. Understanding Page Structure​

Scenario: You need to understand how a complex form is structured

Inspect the entire registration form and show me its structure

Result: Get a hierarchical view of all form elements and their relationships.

4. Finding Stable Selectors​

Scenario: You need selectors that won't break when the page updates

Inspect this button and suggest the most stable selector

Result: Get recommendations for selectors using data attributes or IDs instead of fragile class names.

5. Accessibility Testing​

Scenario: Verify that elements have proper accessibility attributes

Inspect all buttons and show their ARIA labels
Check if the form inputs have proper labels

Result: Identify accessibility issues in your web application.

Inspector Commands Reference​

Basic Inspection​

Inspect [element description]
Show me the [element] properties
What is the selector for [element]?
Analyze the [element] on this page

Selector Operations​

Generate a CSS selector for [element]
Give me the XPath for [element]
What's the best selector for [element]?
Test this selector: [selector]
Find all [element type] on this page
Show me all elements with class [classname]
List all clickable elements
Find elements containing text "[text]"

Hierarchy and Structure​

Show me the parent elements of [element]
What are the child elements of [element]?
Display the DOM structure around [element]

Property Queries​

Is [element] visible?
What is the text content of [element]?
Show me all attributes of [element]
What is the current value of [input field]?

Best Practices​

1. Start with Inspector Before Recording​

Before using the Web Recorder:

  • ✅ Use Inspector to identify key elements
  • ✅ Verify elements have stable selectors
  • ✅ Check for unique identifiers (IDs, data attributes)
  • ✅ Understand the page structure

2. Prefer Stable Selectors​

When choosing selectors:

  • ✅ Best: ID attributes (#unique-id)
  • ✅ Good: Data attributes ([data-testid="element"])
  • ✅ Okay: Semantic structure (form > button[type="submit"])
  • ❌ Avoid: Generated class names (.css-1x2y3z4)
  • ❌ Avoid: Position-based selectors (:nth-child(5))

3. Verify Element State​

Always check:

  • ✅ Is the element visible?
  • ✅ Is the element enabled/disabled?
  • ✅ Is the element in the viewport?
  • ✅ Does the element have the expected text/value?

4. Handle Dynamic Content​

For dynamic elements:

  • ✅ Wait for elements to load before inspecting
  • ✅ Check if elements are in iframes
  • ✅ Verify elements aren't hidden by CSS
  • ✅ Consider timing and animation effects

5. Document Your Findings​

Keep track of:

  • ✅ Reliable selectors for key elements
  • ✅ Elements that change frequently
  • ✅ Special handling requirements (waits, scrolling)
  • ✅ Known issues or quirks

Troubleshooting​

Inspector Not Activating​

Symptoms:

  • Inspector button doesn't respond
  • No highlight mode appears

Solutions:

  1. Verify browser connection is active (green indicator)
  2. Refresh the page and try again
  3. Check that Web Agent mode is properly activated
  4. Restart the browser connection in settings

Element Not Found​

Symptoms:

  • "Element not found" error
  • Inspector can't locate the described element

Solutions:

  1. Be more specific in your element description
  2. Check if the element is in an iframe
  3. Verify the element is visible on the page
  4. Wait for the page to fully load
  5. Scroll the element into view

Selector Not Working​

Symptoms:

  • Generated selector doesn't find the element
  • Selector finds wrong element

Solutions:

  1. Try alternative selector suggestions
  2. Make the selector more specific
  3. Check if the page structure changed
  4. Verify there are no duplicate elements
  5. Use a combination of attributes for uniqueness

Inspection Shows Wrong Element​

Symptoms:

  • Inspector highlights different element than intended
  • Multiple elements match the description

Solutions:

  1. Provide more specific element description
  2. Include context (e.g., "the submit button in the login form")
  3. Use unique attributes or text content
  4. Specify position if needed (e.g., "the first button")

Integration with Other Features​

Use with Web Recorder​

Perfect workflow:

  1. Inspect elements to find stable selectors
  2. Record your workflow using those elements
  3. Verify generated script uses optimal selectors
  4. Refine selectors if needed

Use with Script Generation​

When generating automation scripts:

Inspect the login form elements and generate a Playwright script for login

This ensures the generated script uses the best selectors identified by the inspector.

Use with Debugging​

When automation fails:

Inspect the element that failed and compare it with the selector in my script

This helps identify why selectors stopped working.

Inspector Tips and Tricks​

Quick Element Identification​

What's the quickest way to click the submit button?

Get the most direct selector for immediate use.

Batch Inspection​

Inspect all form fields and generate a data structure with their selectors

Useful for complex forms with many fields.

Visual Feedback​

Highlight all buttons on this page

Get visual confirmation of element locations.

Selector Validation​

Validate that my selector 'input[name="email"]' is unique on this page

Ensure your selector won't match multiple elements.

Copy Selectors​

Give me the CSS selector for the login button in a format I can copy

Get ready-to-use selectors for your code.

Advanced Features​

Shadow DOM Inspection​

For web components with Shadow DOM:

Inspect elements inside the shadow root of [component]

iframe Handling​

For elements inside iframes:

Inspect the button inside the payment iframe

Pseudo-element Inspection​

For CSS pseudo-elements:

Show me the ::before and ::after content of [element]

Computed Styles​

Get detailed style information:

Show me the computed styles of [element]

Next Steps​

Additional Resources​

Need Help? If you encounter issues with Web Inspector, visit our troubleshooting guide or reach out on Discord.

Is this documentation incorrect or incomplete? Report an issue on GitHub