Element Scanning

Learn how to scan web pages and extract elements using the VS Code interface


Overview

Element scanning allows you to extract DOM elements from any web page. The extension launches a browser, navigates to your specified URL, and analyzes the page structure to identify interactive elements, forms, and other components.

Web Page Analysis

Automatically analyzes the DOM structure and identifies interactive elements

Fast Processing

Optimized algorithms for quick element extraction and analysis

Configurable Options

Customize scanning parameters and element selection criteria

Scanning Process

Step 1: Configuration

Configure your scanning parameters before starting the scan.

  • Select Framework

    Choose between Playwright or Selenium

  • Enter Target URL

    Provide the website URL you want to analyze

  • Configure Tag Selection

    Choose which elements to extract (optional)

Step 2: Element Extraction

The extension automatically extracts and analyzes page elements.

  • Browser Launch

    Automatically launches a browser instance

  • Page Navigation

    Navigates to your specified URL

  • Element Analysis

    Analyzes DOM structure and extracts elements

Configuration Options

Framework Selection

Choose the testing framework that best suits your project needs.

Modern web testing framework with excellent browser automation capabilities.

  • Multiple Browsers

    Supports Chromium, Firefox, and WebKit

  • Auto-Waiting

    Built-in smart waiting mechanisms

  • Network Control

    Advanced network interception capabilities

Traditional web testing framework with broad browser support.

  • Wide Browser Support

    Works with all major browsers

  • Mature Ecosystem

    Extensive community and resources

  • Language Support

    Multiple programming languages

Tag Selection

Configure which HTML elements to extract during scanning.

  • Form Elements

    Input fields, buttons, selects, checkboxes

  • Interactive Elements

    Links, clickable buttons, dropdowns

  • Media Elements

    Images, videos, audio elements

  • All Elements

    Extract all available elements

Results and Output

Scan Results

After scanning, the extension displays detailed information about each extracted element.

Element Information
  • Tag Name

    HTML tag (input, button, link, etc.)

  • Attributes

    ID, class, name, and other attributes

  • Text Content

    Visible text and placeholder values

  • Location

    XPath and CSS selector paths

Export Options
  • JSON Export

    Raw element data in JSON format

  • CSV Export

    Tabular data for spreadsheet analysis

  • Framework Code

    Generate test automation code

Best Practices

URL Selection

Choose the right URL for your scanning needs.

  • Use Specific Pages

    Scan individual pages rather than entire sites

  • Ensure Accessibility

    Make sure the page is publicly accessible

  • Consider Dynamic Content

    Some elements may load after page load

Tag Selection Strategy

Optimize your scanning by selecting the right elements.

  • Start Specific

    Begin with form or interactive elements

  • Avoid Over-Scanning

    Don't scan everything unless necessary

  • Focus on Functionality

    Prioritize elements you'll interact with


Next Steps

Export Options

Learn how to export your scanned elements in various formats including JSON, CSV, and framework-specific test automation code.

Learn Export Options
Tag Selection

Explore advanced tag selection options to fine-tune your element extraction and improve scanning results.

Learn Tag Selection