KrisuAI Logo
KrisuAI
PricingDownloadBlog

VS Code Extension Installation

Complete installation guide for Element Insight in Visual Studio Code

Installation Methods

VS Code Marketplace
Recommended

Install directly from the official VS Code marketplace for automatic updates and easy management.

  • Automatic Updates

    Extension updates automatically

  • Easy Management

    Manage through VS Code Extensions panel

  • Official Source

    Verified and secure installation

Extension Management
Built-in

Manage the extension directly through VS Code's built-in extension system for seamless updates and maintenance.

  • Automatic Updates

    Extension updates automatically through VS Code

  • Easy Management

    Enable/disable through Extensions panel

  • Version Control

    VS Code manages extension versions

Step-by-Step Installation

Marketplace Installation Steps
  • 1. Open VS Code Extensions View

    Press Ctrl+Shift+X (Cmd+Shift+X on Mac) or go to View → Extensions

  • 2. Search for Element Insight

    Type 'Element Insight' in the search box

  • 3. Install the Extension

    Click the Install button on the Element Insight extension card

  • 4. Verify Installation

    Look for the Element Insight icon in the Activity Bar (left sidebar)

  • 5. Reload VS Code (if prompted)

    Some extensions require a reload to activate properly

Dependencies & Setup

Playwright (Required)
Auto-Install

Playwright is required for web page scanning and element extraction.

The extension will automatically detect if Playwright is installed and guide you through the installation process.

  • Global Installation

    Installed in ~/elementinsight-playwright for all workspaces

  • Browser Support

    Automatically installs Chromium, Firefox, and WebKit

  • Command Available

    Use 'Element Insight: Install Playwright'

Python & lxml (Optional)
Enhanced

Python with lxml provides enhanced XPath evaluation accuracy for better locator generation.

While optional, Python with lxml significantly improves the accuracy of generated XPath selectors.

  • Python 3.7+

    Required for lxml installation

  • lxml Package

    Install via: pip install lxml

  • Graceful Fallback

    Extension works without Python

Configuration

Extension Settings

Element Insight can be configured through VS Code settings. Access settings via File → Preferences → Settings or Ctrl+, (Cmd+, on Mac).

Available Settings
  • element-insight.defaultFramework

    Default framework (playwright/selenium)

  • element-insight.autoInstallDependencies

    Automatically install dependencies

  • element-insight.exportPath

    Default export directory

Workspace Settings

Create a `.vscode/settings.json` file in your workspace to configure Element Insight for your project.

Installation Troubleshooting

Common Issues

If the Element Insight icon doesn't appear in the Activity Bar, try reloading VS Code (Ctrl+Shift+P → "Developer: Reload Window").

Check your internet connection and VS Code version. Ensure you have sufficient disk space and permissions.

If Playwright installation fails, try running the command manually: "Element Insight: Install Playwright".

Security & Permissions

Element Insight requires certain permissions to function properly:

  • File System Access

    To save exported files and install dependencies

  • Network Access

    For web page scanning and dependency installation

  • Process Execution

    To run Playwright and binary components

Next Steps

Quick Start Guide

Ready to get started? Follow our step-by-step quick start guide to scan your first web page.

Start Using Element Insight
Troubleshooting Guide

Having issues? Check our comprehensive troubleshooting guide for solutions to common problems.

Troubleshooting Guide