VS Code Extension Guide
Complete guide to using Element Insight in Visual Studio Code
Getting Started
Quick Start
Get up and running with Element Insight in minutes. Follow our step-by-step guide to install, configure, and run your first scan.
Start HereInstallation
Detailed installation instructions for VS Code, including dependency setup and configuration options.
Installation GuideFeatures & Usage
Element Scanning
Learn how to scan web pages and extract elements using the VS Code interface. Configure scanning options and understand the results.
- URL Configuration
- Framework Selection (Playwright/Selenium)
- Tag Filtering
Export Options
Export your scanned elements in various formats including JSON, CSV, and framework-specific test automation code for Playwright and Selenium.
- JSON Export
- CSV Export
- Playwright Code (Python, JS, TS, Java, C#)
- Selenium Code (Python, Java, C#)
Tag Selection
Configure which HTML elements to extract during scanning. Choose from form elements, interactive elements, media elements, or all elements.
- Form Elements
- Interactive Elements
- Media Elements
Troubleshooting
Common Issues & Solutions
Find solutions to common problems you might encounter while using Element Insight in VS Code.
- Installation Problems
Extension activation and dependency issues
- Playwright Setup
Browser installation and configuration
- Dependency Issues
Playwright installation and configuration
- Extension Activation
VS Code integration and binary execution
Commands Reference
Available Commands
Complete reference of all Element Insight commands available in VS Code, including keyboard shortcuts and usage examples.
- Core Commands
Open panel, scan elements, export results
- Installation Commands
Install Playwright, browsers, Python dependencies
- Diagnostic Commands
Run diagnostics, check system status
- Keyboard Shortcuts
Customize shortcuts for quick access
Next Steps
IntelliJ Plugin
Explore Element Insight for IntelliJ IDEA with similar features and capabilities.
IntelliJ Plugin Guide