Inspect Mode

Inspect mode allows you to examine any element on a page and view its DOM fingerprint.

Using Inspect Mode

When the Inpera overlay is active:

1. Click the inspect icon in the toolbar
2. Hover over any element to highlight it
3. Click to select the element
4. View the element's DOM fingerprint

DOM Fingerprint

For each element, Inpera captures:

Property	Description
CSS Selector	Unique path to the element
XPath	Alternative element path
Tag Name	HTML tag (div, button, etc.)
ID	Element ID if present
Classes	CSS class list
Text Content	Inner text (trimmed to 100 chars)
Computed Styles	Key style properties
Position	X, Y coordinates
Dimensions	Width and height

Example Fingerprint

{
  "selector": "#hero button.cta-primary",
  "xpath": "/html/body/div[1]/section/button[2]",
  "tagName": "button",
  "id": null,
  "classes": ["cta-primary", "btn-lg"],
  "text": "Get Started",
  "styles": {
    "backgroundColor": "#3b82f6",
    "color": "#ffffff",
    "fontSize": "16px",
    "fontFamily": "Inter, sans-serif"
  },
  "position": { "x": 540, "y": 380 },
  "dimensions": { "width": 140, "height": 48 }
}

Use Cases

For Designers

• Check if implemented styles match design specs
• Verify font sizes, colors, and spacing
• Compare actual vs expected appearance

For Developers

• Get exact CSS selectors for automation
• Debug element positioning issues
• Understand DOM structure

For QA

• Document element locations for test cases
• Verify element properties match requirements
• Create reproducible bug reports

Copying Element Data

Click any property to copy it to clipboard:

• Copy selector for CSS/testing
• Copy XPath for automation
• Copy styles for documentation

Integration with Annotations

When you create an annotation:

1. Inspect mode captures the fingerprint
2. Fingerprint is stored with the annotation
3. Used for rebinding when DOM changes