Interactive Tool
DOM Locator Generator
XPath & CSS Selectors
Generate CSS selectors and XPath expressions from HTML. Perfect for Selenium and Cypress automation learning.
📝 HTML Input
🌳 DOM Tree (Tap to Select)
Paste HTML to see the DOM tree here
🚀 Quick Start Guide:
Option 1: Test with Demo
1. Click "📋 Load Demo" button
2. Demo HTML loads automatically
Option 2: Analyze Your HTML
1. Paste your HTML code in the input field
2. Click "✨ Generate DOM Tree" button
3. DOM tree appears below
Option 3: Select & Copy
1. Tap any element in the DOM tree
2. View all generated locators (XPath, CSS, ID, etc.)
3. Click "📋 Copy" to copy any locator
4. Paste in your Selenium/Cypress tests
Option 1: Test with Demo
1. Click "📋 Load Demo" button
2. Demo HTML loads automatically
Option 2: Analyze Your HTML
1. Paste your HTML code in the input field
2. Click "✨ Generate DOM Tree" button
3. DOM tree appears below
Option 3: Select & Copy
1. Tap any element in the DOM tree
2. View all generated locators (XPath, CSS, ID, etc.)
3. Click "📋 Copy" to copy any locator
4. Paste in your Selenium/Cypress tests
🎯 Generated Locators
Select an element to see locators