Smart CSS XPath Finder

All-in-one QA tool for locator generation, bug reporting, screen recording, Click tracking, Video summary.

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 `aria-label` over class names or XPath positions. Our tool highlights these automatically! **2. Validate Before Using:** Always check the "Matches" count. A good locator should match exactly 1 element. **3. Track Critical Elements:** Add login buttons, navigation menus, and form fields to your tracking list to catch breaking changes early. **4. Export for Your Framework:** Use the export feature to generate ready-to-use code for Selenium, Playwright, or Cypress. **5. Annotate Screenshots:** Add arrows and notes to screenshots to make bug reports crystal clear for developers. **Need Help?** - Email: pavankumar.nagaraj@gmail.com - Website: https://smartcssxpath.com - Response time: Within 24 hours ## **Permissions Explained** We believe in transparency. Here's why we need each permission: - **activeTab:** Read page content to generate locators - **storage:** Save your settings and tracked elements locally - **scripting:** Inject scripts to highlight elements - **tabs:** Manage extension UI across tabs - **contextMenus:** Add right-click menu options - **offscreen:** Enable screen recording (Premium) - **downloads:** Export locators to files - **alarms:** Schedule license validation checks - **notifications:** Alert about subscription status - **<all_urls>:** Work on any website you visit **Keywords:** Generate XPath and CSS selectors and Screenshots and video records with Jira Integration and much more