Smart CSS XPath Finder

Transform your QA workflow with the most powerful locator generation and bug reporting tool for Chrome. Whether you're a QA engineer, automation tester, SDET, or web developer, Smart CSS XPath Finder streamlines your entire testing process from element inspection to bug reporting. ## **Why Choose Smart CSS XPath Finder?** **For QA Engineers & Automation Testers:** - Generate robust, production-ready locators in seconds - Track elements across multiple pages to ensure consistency - Create detailed bug reports with screenshots and recordings - Validate locators before using them in test scripts - Export locators in multiple formats (Selenium, Playwright, Cypress, or any other tools) **For Web Developers:** - Quickly inspect and debug DOM elements - Test CSS selectors and XPath expressions in real-time - Understand element hierarchies with visual highlighting - Export element data for documentation **For SDETs & Test Automation Leads:** - Standardize locator strategies across your team - Reduce flaky tests with intelligent locator suggestions - Speed up test script creation by 10x - Integrate seamlessly with your existing automation framework ## **Core Features** ### **1. Intelligent Locator Generation** **Multiple Locator Types:** - **XPath:** Absolute, Relative, Smart XPath with optimizations - **CSS Selectors:** ID, Class, Attribute, Nth-child, Pseudo-selectors - **jQuery Selectors:** For legacy applications - **Custom Locators:** Define a predefined templete, out tools puts locator into it **Smart Locator Ranking:** Our AI-powered algorithm ranks locators by: - Uniqueness (100% unique = best) - Stability (less likely to break on UI changes) - Readability (human-friendly selectors) - Performance (faster DOM queries) - Best practices (semantic HTML, accessibility) **Real-Time Validation:** - Instant feedback on locator uniqueness - Visual highlighting of matched elements - Warning for fragile locators (nth-child, absolute XPath) - Suggestions for improvement ### **2. Multi-Page Element Tracking (Premium)** **Track Elements Across Your Application:** - Add elements to your tracking list with one click - Navigate through your app and see if tracked elements exist - Identify broken locators before they break your tests - Compare element properties across different pages - Export tracking results for team review **Use Cases:** - Verify navigation menu consistency across all pages - Ensure form fields use the same IDs throughout the app - Validate that critical buttons are always accessible - Check responsive design element visibility ### **3. Quick Bug Reporting with Screenshots** **Create Professional Bug Reports in Seconds:** - Capture full-page or visible-area screenshots - Annotate screenshots with arrows, boxes, and text - Auto-capture element details (tag, classes, attributes) - Include browser and OS information - Copy formatted bug report to clipboard - Export as markdown, HTML, or plain text **What Gets Captured:** - Screenshot with annotations - Element locators (XPath, CSS, Custom and others) - Element properties and computed styles - Page URL and title - Browser version and OS - Timestamp and user notes **Perfect For:** - Jira tickets - GitHub issues - Slack messages - Email reports - Documentation ### **4. Screen Recording (Premium)** **Record Your Testing Sessions:** - Record full screen, current tab, or application window - Add voice narration while recording - Capture mouse clicks and keyboard inputs - Download as WebM or MP4 format - No time limits on recordings - No watermarks **Ideal For:** - Bug reproduction videos - Test case demonstrations - Training materials - Client presentations - Regression testing documentation ### **5. Advanced Element Inspection** **Deep Dive into DOM Elements:** - View all element attributes - See computed CSS styles - Inspect event listeners - Check accessibility properties (ARIA roles, labels) - View element dimensions and position - Analyze shadow DOM elements **Shadow DOM Support:** - Penetrate shadow roots - Generate selectors for shadow DOM elements - Track elements inside web components - Full support for modern frameworks (Lit, Stencil) ### **6. Export & Integration** **Export Formats:** - **Selenium (Java, Python, C#, JavaScript):** WebDriver code snippets - **Playwright (TypeScript, JavaScript, Python, Java):** Modern automation code - **Cypress:** E2E testing commands - **Puppeteer:** Headless Chrome automation - **TestCafe:** Cross-browser testing - **CSV/JSON:** Bulk export for data processing - **Markdown:** Documentation-ready format ## **Privacy & Security** **We Take Your Privacy Seriously:** - No browsing history collected - No website content stored - All data processed locally in your browser - Premium features use encrypted cloud storage (Cloudflare) - GDPR and CCPA compliant - No third-party analytics or tracking - Open-source core (verify our code) **What We Collect (Premium Users Only):** - License key and email for subscription management - Device fingerprint (hashed) to prevent license sharing - Usage statistics (anonymous) to improve features **What We DON'T Collect:** - Websites you visit - Page content or user data - Form inputs or passwords - Personal information from inspected pages ## **Getting Started** **Installation:** 1. Click "Add to Chrome" 2. Pin the extension to your toolbar 3. Click the extension icon on any webpage 4. Start generating locators instantly! **Quick Start Guide:** 1. **Inspect an Element:** Right-click any element → "Inspect with Smart XPath" 2. **View Locators:** See XPath, CSS, Custom and others options ranked by quality 3. **Copy & Use:** Click to copy your preferred locator 4. **Track Elements (Premium):** Add to tracking list to monitor across pages 5. **Report Bugs:** Capture screenshot, Screen record, annotate, and export 6. Track all your clicks and generate summary ## **Pro Tips** **1. Use Semantic Locators:** Prefer `data-testid` and `…