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.
Playwright
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
Selenium
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 OptionsTag Selection
Explore advanced tag selection options to fine-tune your element extraction and improve scanning results.
Learn Tag Selection