CSS and XPath checker

SelectorsHub

Locators Plugin to Auto Generate and Verify Playwright Locators, XPath & CSS Selectors. SelectorsHub - Auto-generate Playwright Locators, XPath & CSS Selectors SelectorsHub is a powerful developer tool that automatically generates and verifies Playwright locators, XPath, and CSS selectors for web automation testing. Key Features: 1. Auto-generation: Instantly generates multiple selector types including native Playwright locators, XPath, CSS selectors, IDs, names, and more. 2. Advanced element support: Works seamlessly with iframes, Shadow DOM, SVG elements, dynamic elements, dropdowns, and complex UI components. 3. Smart suggestions: Auto-suggests attributes, text values, and occurrences to help you build selectors faster—no more copying and pasting from the DOM. 4. Error detection: Provides clear error messages indicating what's wrong with your XPath or CSS selectors. 5. Element highlighting: Automatically highlights matching elements and scrolls them into view for easy verification. 6. XPath Healing: Verify all the xpath in one shot. 7. Locators Page: Generate Locator Page in one go. How to Use: 1. Open Chrome DevTools (F12 or right-click > Inspect) 2. Navigate to the SelectorsHub tab in the DevTools sidebar, or click the SelectorsHub icon in your browser toolbar 3. Inspect any element to automatically generate all selector types 4. For Playwright locators, click the "Playwright Selectors" button, then inspect the element 5. Type or edit selectors in the input box—smart suggestions will help you complete them quickly 6. Press Enter to verify and highlight all matching elements on the page Perfect for: a) QA Engineers and Test Automation professionals, b) Web developers working with Playwright, Selenium, Cypress, or other testing frameworks c) Anyone who needs reliable, maintainable element selectors

CSS Pro Editor & Debugger

Visual CSS styling and debugging tool for developers. CSS Pro Editor is the ultimate visual styling tool for developers and designers. Forget inspecting elements and manually typing CSS values. With CSS Pro, you just click an element and edit it visually. 🚀 Why CSS Pro is Different? Most "inspector" tools in the store are read-only or require you to write raw code. CSS Pro is a full Visual Editor. It's like having Figma or Webflow tools directly inside your browser, working on any live website. ✨ Key Features 👆 Click & Edit Select any element on the page and change its color, font, size, spacing, and more with a simple visual interface. 📦 Computed Box Model (NEW) Visualize margins, borders, and padding instantly. See the exact computed pixel values for every layer of your element. 💎 Glassmorphism (Instant frosted glass effect) ☁️ Neumorphism (Soft, extruded shadows) 📏 Debug Redline (Instantly outline all elements) 🃏 Card Shadows (Beautiful, elevated dropshadows) 📐 Layout Engine Debug Flexbox and Grid layouts efficiently with visual alignment controls (Start, Center, End, Space-Between). 📋 One-Click Copy Happy with your changes? One click copies the clean generated CSS code to your clipboard, ready to paste into your project. 100% Offline: We don't send data to any server. No Tracking: Your usage is completely private. Lightweight: Zero impact on page load speed. Perfect for: Designers: Test fonts and colors on live sites. Developers: Debug layout issues in seconds. Students: Learn how CSS works by interacting with it. Try CSS Pro Editor today and design the web at the speed of thought! ⚡

SelectorsHub Pro

xPath plugin to auto generate, write and verify xpath & cssSelector. SelectorsHub Pro- Auto-generate Playwright Locators, XPath & CSS Selectors SelectorsHub Pro is a powerful developer tool that automatically generates and verifies Playwright locators, XPath, and CSS selectors for web automation testing. Key Features: 1. Auto-generation: Instantly generates multiple selector types including native Playwright locators, XPath, CSS selectors, IDs, names, and more. 2. Advanced element support: Works seamlessly with iframes, Shadow DOM, SVG elements, dynamic elements, dropdowns, and complex UI components. 3. Smart suggestions: Auto-suggests attributes, text values, and occurrences to help you build selectors faster—no more copying and pasting from the DOM. 4. Error detection: Provides clear error messages indicating what's wrong with your XPath or CSS selectors. 5. Element highlighting: Automatically highlights matching elements and scrolls them into view for easy verification. 6. XPath Healing: Verify all the xpath in one shot. 7. Locators Page: Generate Locator Page in one go. Very simple steps to use SelectorsHub Pro plugin- 1. Add SelectorsHub Pro to your Chrome Browser. 2. Now checkout the plans and take the Free trial from below link- https://selectorshub.com/selectorshub-pro/plans/ 3. After taking a subscription you will get the login credentials. 4. Now click on SelectorsHub Pro Logo and log in with the credentials you received in mail. 5. Inspect any element to automatically generate all selector types 6. For Playwright locators, click the "Playwright Selectors" button, then inspect the element 7. Type or edit selectors in the input box—smart suggestions will help you complete them quickly Please follow below tutorial to get started with SelectorsHub Pro- https://www.youtube.com/watch?v=GhaJSrVsrP4 To learn more about SelectorsHub Pro, please checkout product page- https://selectorshub.com/selectorshub-pro/ Perfect for: a) QA Engineers and Test Automation professionals, b) Web developers working with Playwright, Selenium, Cypress, or other testing frameworks c) Anyone who needs reliable, maintainable element selectors If you have any query, please write us at support@selectorshub.com

XPath Selector

HTML XPath Selector: instantly test and debug XPath queries in your browser. Validate your XPath expressions easily. Seeking an easy-to-use yet effective and fast tool to work with XPath expressions right in your browser? In this case, our project may perfectly cope with this task. It is designed specifically for developers, quality control specialists, web testers, data analysts and anyone who often interacts with DOM elements in HTML documents. Our online helper tool is a Chrome extension specifically designed to simplify and speed up the process of finding, evaluating, testing, and debugging queries directly in your browser. Why choose our extension? Finding the suitable tool for your task can be challenging these days. Maybe you need something simple, but are limited to yet another generic tool overloaded with features. We decided to take a completely different approach — to create a simple, low-learning online module focused on working with XPath for texts. Based on these design principles, we equipped Xpather with the following key features: * Real-time XPath Checker: Evaluate XPath expressions instantly as you type. Receive clear, informative error messages if the XPath is invalid or a straightforward notification if no matches are found. * XPath Query Editor: Refine your selectors inside the plug-in. Update expressions on the fly and get instant feedback * Interactive Node Highlighting: Matched nodes are visually highlighted on your webpage, clearly indicating selected elements. Precisely confirm which elements your search pattern matches. * Detailed Node Information: Displays the number of matched nodes and their corresponding texts. Copy filter queries and matched node texts easily with one click. * Point-and-Click XPath Generation: Hold the "Shift" key and hover over any element to retrieve its DOM path. Automatically fills the result into the input field, simplifying selection without manual typing. * Convenient Side Panel Interface: Access the helper through the side panel by clicking the extension icon or using keyboard shortcuts. Here are a few simple steps you'll need to take: 1. Install the module: add XPath Selector to your browser directly from the Chrome Web Store using the button in the top right corner of the page 2. Open the Tool: click the extension icon in your Chrome toolbar or use the keyboard shortcut ("Ctrl + Shift + X" for Windows/Linux or "Cmd + Shift + X" for Mac). 3. Start Testing: enter your XPath text into the input field to see actual validation results, matched nodes, or clear error messages. 4. Find matching nodes with mouse: hold "Shift" and hover over an element on the webpage; HTML XPath Evaluator automatically detects the node path and clearly highlights the element. What tasks can our software help you with? Our in-browser solution is not a multifunctional tool. On the other hand, it was initially developed with a focus on the most necessary duties when working with HTML documents. Thus the add-on can be viewed as: * XPath validator: instantly checks the syntax and correctness of the provided lookup string. * XPath finder: quickly finds a unique path to any element in your documents. * XPath generator: populates the search pattern based on the existing web page content. * XPath highlighter: highlights relevant nodes to make them easier to identify on a website. * XPath tester: modify and try various queries to find those which match your requirements. Ensure your Selenium tests are running correctly by validating your path. Respect for your privacy and security We understand the importance of privacy in today's digital landscape. To meet high standards XPath test extension: * Operates fully within your browser. Your data and queries remain private; no external storage or transmission occurs. * Requests only essential browser permissions, ensuring your privacy while maintaining full functionality. * Built on Manifest V3, the latest version of the Chrome extension platform. If you find a bug, encounter some issue or just have a question do not hesitate to contact us via the feedback form https://forms.gle/ng2k8b99tV8sWc8t7 or send an email to extensions@petprojectsatlas.com. We try to keep our application useful by regularly updating it, improving its capabilities and adding features based on user feedback. Therefore, we would love to hear your opinion. Add the extension to your toolkit Install XPath HTML Selector Tool and efficiently accelerate your testing and debugging tasks. Whether you’re testing a simple path or working on a complex Selenium project, our tool has you covered. Easy Chrome integration simplifies your XPath workflow—download now and start validating your ideas straight away.