SelectorsHub FAQ
SelectorsHub is a next-generation xPath and CSS selector plugin that provides all possible selectors automatically with just one click. It serves as a smart editor to write and verify xPath, CSS selectors, Playwright, selectors, jQuery, and 15 Path. Unlike traditional devtools, SelectorsHub supports advanced elements such as shadow DOM, nested iframes, and SVG elements. It also offers proper error messages and accurate Path match counts, enhancing the efficiency and productivity of users and their teams.
To install SelectorsHub, please follow these steps:
- Go to the SelectorsHub home page https://selectorshub.com/selectorshub/.
- Select any browser and click the “install” button.
- This will open the Chrome Web Store page for SelectorsHub.
- Click on “Add to Chrome” and then “Add Extension” to install it in your browser.
- After installation, you might need to pin the SelectorsHub icon to your toolbar by clicking on the default extension logo and selecting “Pin”.
- For best results, use SelectorsHub in a new browser tab or restart your browser after installation.
For more details, please follow this tutorial.
SelectorsHub is a next-generation XPath and CSS selector plugin that offers a variety of features to enhance productivity and efficiency in web development and testing. Here are the key uses of SelectorsHub:
- Automatic Selector Generation
- Smart Editor
- Support for Advanced Elements
- Browser Integration
- Productivity Improvement
- Open DevTools: Press
F12
,Ctrl+Shift+I
(Windows/Linux),Cmd+Option+I
(Mac), or right-click on the webpage and select “Inspect.” - Find SelectorsHub: In the
Elements
tab, look forSelectorsHub
on the right. If not visible, click the double arrow icon (>>) to expand hidden tabs. - Use SelectorsHub: Click elements in the DOM or on the webpage to generate and test selectors.
For more details, please follow this tutorial.
If auto-suggest doesn’t work while building selectors in SelectorsHub:
Open a Different Website:- Ensure the new tab has a URL in the address bar; a blank tab won’t work.
- Avoid using the Chrome Web Store website, as extensions are not supported there.
- Choose a genuine website for testing.
Yes. SelectorsHub offers both a free and a Pro version. The free versión provides basic functionalities, including generating and verifying xPath, CSS selectors, Playwright selectors, jQuery, and JS Path. It also supports advanced elements such as shadow DOM, nested iframes, and SVG elements. The Pro version includes additional advanced Features.
No specific license is required to use the free version of SelectorsHub. However, if you opt for the Pro version, you may need to purchase a license to access the additional advanced features and support provided by the Pro version.
Yes, SelectorsHub is safe and secure to use. Here are some key points regarding its safety and security:
Verified and Featured: The plugin is verified and featured on the Chrome Web Store, ensuring it meets certain standards of security and functionality.
Privacy Practices: Detailed privacy practices are listed on the Chrome Web Store page, specifying what kind of information is saved or not saved by the plugin.
Offline Functionality: SelectorsHub can run offline, which means enhancing privacy and security. it does not need to send data over the internet,
Transparency: Users can see reviews, ratings, and the number of current users, providing transparency about the plugin’s reliability and trustworthiness.
For more details, please follow this tutorial.
If SelectorsHub is not working on your website, here are some troubleshooting steps you can Follow:
1. Update Browser and Extension: Make sure that both your browser and the SelectorsHub extension are up to date. Outdated versions can lead to compatibility issues.
2. Clear Cache and Cookies: Sometimes, cached data and cookies can interfere with the functioning of browser extensions. Clear your browser’s cache and cookies and try again.
3. Disable Conflicting Extensions: Other browser extensions might conflict with SelectorsHub. Try disabling other extensions to see if SelectorsHub works correctly.
4. Restart Browser: After making changes, restart your browser to ensure that all updates and changes take effect.
For more details, please follow this tutorial.
SelectorsHub is an efficient editor for XPath and CSS selectors, allowing you to write selectors in seconds. Ideal for beginners, it helps you learn various attribute and value combinations with clear error messages guiding you on syntax. It’s the only tool supporting shadowDOM, enabling you to write selectors for shadowDOM elements. It also supports iframes and SVG elements, broadening your learning scope.
Yes, SelectorsHub can inspect dynamic invisible elements.
SelectorsHub suggests both attributes and text for generating selectors. It provides all possible selectors automatically, Including xPath, CSS selectors, Playwright selectors, jQuery, and JS Path. This includes attributes and text content of the elements to ensure comprehensive selector generation.
Attributes: SelectorsHub can generate selectors based on various attributes on the elements, such as id, class, name, etc.
Text Content: It can also generate selectors based on the text content of the elements, making it versatile for different use cases.
For more details, please follow this tutorial.
No, SelectorsHub is not only for testers. it is also useful for:
Developers: Developers can use SelectorsHub to generate and verify xPath, CSS selectors, Playwright selectors, jQuery, and JS Path, which can be useful for web development and debugging.
Automation Engineers: Automation engineers can use it to create reliable selectors for automated testing scripts, improving the efficiency and accuracy of their tests.
Web Scrapers: Individuals involved in web scraping dan use SelectorsHub to identify and extract data from web pages more effectively.
Educators and Students: It can be used for educational purposes to teach and learn about web elements, selectors, and web automation.
SelectorsHub offers several advantages over other xPath tools, making it a preferred choice for many users:
Automatic Selector Generation: Generates all possible selectors (XPath, CSS, Playwright, jQuery, JS Path automatically with just one click, saving time and effort.
Smart Editor: Acts as a smart editor to write and verify various selectors, providing proper error messages and accurate XPath match counts.
Support for Advanced Elements: Supports shadow DOM, nested iframes, SVG elements, and more, unlike traditional devtools.
Browser Integration: Easy installation via the Chrome store, with features to ensure privacy and security
Offline Functionality: Can run offline, providing flexibility in various environments.
Community and Feedback: Active community and regular updates based on user feedback, ensuring continuous improvement and new features.
For more details, please follow this tutorial.
No, absolutely not.
SelectorsHub injects the script only when you open the SelectorsHub tab to use it, whereas other plugins inject scripts into your website as soon as the website opens in the browser. This is why many companies don’t allow browser plugins, but SelectorsHub solves this issue and addresses security concerns.
It will never make your browser slow because it only interacts and injects scripts when you open the SelectorsHub tab.
It is very optimized and very small in size compared to other plugins, being less than 250KB.
It doesn’t save any user data.
It runs only in your local environment.
- Ensure that SelectorsHub is pinned to your browser toolbar. If it is not, pin it to the toolbar.
- Right-click on the SelectorsHub extension logo in the toolbar.
- Click on “Manage Extension”.
- In the Manage Extension page, click on the “Update” button.If there is an update available, it will be installed Check the current version to confirm the update.
For more details, please follow this tutorial.
Using SelectorsHub in Incognito Mode:
1. Open your browser and go to the extensions page (chrome://extensions/).
2. Find SelectorsHub in the list of installed extensions.
3. Click on the “Details” button for SelectorsHub.
4. Toggle the switch for “Allow in incognito” to enable SelectorsHub in incognito mode.
5. Open an incognito window and click on the SelectorsHub icon in the toolbar to use it.
For more details, please follow this tutorial.
Please follow this tutorial
Yes, there are keyboard shortcuts to open SelectorsHub Here are the steps to use them:
- Open DevTools: Use the shortcut Ctrl + Shift + I (or Cmd + Option + I on Mac) to open the browser’s DevTools.
For more details, please follow this tutorial
Here are the key steps and benefits:
1. Installation:
- Install SelectorsHub From the Chrome Web Store or the SelectorsHub website.
- Pin the SelectorsHub icon to your browser’s toolbar for easy access.
2. Generating Selectors:
- Open the web page you want to test and click on the SelectorsHub icon to open the plugin interface.
- SelectorsHub will automatically generate all possible selectors (XPath, CSS, Playwright selectors, jQuery, and JS Path) for the selected elements.
3. Writing and Verifying Selectors:
- Use the smart editor to write and verify selectors. SelectorsHub provides proper error messages and accurate match counts, ensuring the selectors are correct.
4. Handling Complex Elements:
- SelectorsHub supports shadow DOM, nested iframes, and SVG elements, making it easier to inspect and generate selectors for complex web elements.
5. Integration with Automation Frameworks:
- Once the selectors are generated and verified, they can be integrated into your automated testing scripts using. Frameworks like Selenium, Playwright, or Cypress.
6. Improving Productivity:
- By simplifying the process of writing and verifying selectors, SelectorsHub saves time and improves the productivity of your testing team.
SelectorsHub offers several time-saving features that can significantly enhance productivity in automation testing Here are some of the key features:
- Auto-generate Selectors
- Smart Editor
- Robust and Unique Selectors
- Copy and Paste Functionality
- XPath Practice Page
For more details, please follow this tutorial
Please follow this tutorial
Yes, Please follow this tutorial
To use SelectorsHub relative locators, follow these steps
Inspect Elements: Right-click on the web element you want to locate and select “Inspect” to open the browser’s developer tools.
Open SelectorsHub: Use SelectorsHub to generate the XPath for the reference element, For example, if you want to locate the password field relative to the email field, generate the XPath for the email field.
Copy XPath: Copy the generated XPath for the reference element (eg, the email Fieldl.
Write Script: In your script, use Selenium’s relative locators to locate the target element.
For more details, please follow this tutorial.
Please follow this tutorial.
Please follow this tutorial.
Please follow this tutorial.
To inspect dynamic dropdown elements where the debugger is not working, you can follow these steps:
Expand the Select Tag: In the DevTools panel, navigate to the Elements tab. Locate the select tag for the dropdown. Even if the dropdown disappears from the Ul, the elements are still present in the HTML.
Inspect Options: Expand the select tag to view all the options within the dropdown. These options will be listed under the select tag in the Elements tab.
Generate Selectors: Click on the desired option within the select tag. This will allow you to generate all possible XPath and selectors for that particular element.
Automation: Use the generated XPath or selectors in your automation script. For Selenium, you can use the Select class to interact with the dropdown options directly.
For more details, please follow this tutorial.
Please follow this tutorial.
If right-click is disabled can follow in your browser, you can still inspect elements using alternative methods. Here are the steps :
Keyboard Shortcut: Use the keyboard shortcut Command + Option + I on Mac or Ctrl + Shift + I on Windows to open the Developer Tools.
SelectorsHub Extension: If you are using the SelectorsHub extension, you can click on the SelectorsHub logo to open it directly without needing to right-click. The extension provides its own inspector tool to inspect elements and generate selectors.
For more details, please follow this tutorial.
SelectorsHub is preferred over DevTools and other XPath plugins for several reasons:
- Correct Matching Count
- Handling Complex Scenarios
- Ease of Use
- Detailed information
For more details, please follow this tutorial.
To obtain the SelectorsHub certificate, follow these steps:
- Visit https://selectorshub.com/.
- Navigate to the “Resources” section and Find the “Certification” option.
- Click on the SelectorsHub Certification Program link.
- Watch the detailed tutorial on SelectorsHub’s YouTube channel if you are new to the tool.
- Take the quiz provided on the website.
- Ensure you score at least 75% to pass the quiz.
- Provide a correct email address to receive your certificate.
- Keep your name short when entering it for the certificate.
For more details, please follow this tutorial.
Please follow this tutorial.
The major difference between SelectorsHub Pro Inspector and the free version Inspector is the continuous activation of the inspector tool in the Pro version, in the Pro version, once you have selected the inspector, it remains active, allowing you to inspect multiple elements without needing to reselect the inspector each time. This feature significantly boosts prodüctivity as it eliminates the need to repeatedly select the inspector for each new element you wish to inspect. In contrast, the free version requires you to reselect the inspector after inspecting each element, which can be time-consuming.
Additionally, the Pro version does not display any pop-ups, blockers, or ads, which can further enhance the user experience and efficiency
For more details, please follow this tutorial.
Please follow this tutorial.
The SelectorsHub side panel offers several distinct advantages over other XPath plugins, particularly in terms of usability and Functionality:
Persistent Side Panel: Unlike other XPath plugins that disappear when switching tabs, the SelectorsHub side panel remains open across all tabs. This allows continuous work without the need to reopen the plugin repeatedly.
Integrated Inspector: SelectorsHub includes an inspector tool within the side panel, enabling users to inspect elements directly. This is a significant improvement over other plugins that lack this feature and often hide important elements like headers.
Feature-Rich Environment: SelectorsHub supports advanced features such as Shadow DOM, iframes, and more. These Features are not typically supported by other XPath plugins, making SelectorsHub a more versatile tool.
For more details, please follow this tutorial.
Please follow this tutorial.
Please follow this tutorial.
To report a bug for SelectorsHub tools, you can follow these steps:
- Visit the official SelectorsHub website or the platform where you downloaded the tool
- Look for a Support or Contact Us section, which often includes a form or an email address for reporting issues
- Provide detailed information about the bug, including:
- A clear description of the issue.
- Steps to reproduce the bug.
- Screenshots or videos, if possible.
- Information about your environment (browser version, operating system, etc.).
4.Submit the report and wait for a response from the support team.
Additionally, you can check if there is a GitHub repository for SelectorsHub, where you can open an issue directly.
For more details, please follow this tutorial.
Here’s a concise guide on how to do it:
Copy Your Script: Copy the entire script or locator page where your XPaths are written.
Open SelectorSub: Navigate to the page for which you are verifying your selectors and open SelectorSub.
Use XPath Healing: in SelectorSub, click on the XPath healing button (Fifth icon on the right side).
Paste Your Script: Click on the edit button and paste your complete script into the provided field.
Submit and Verify: Click on submit. SelectorSub will fetch all the XPaths from your script and show the result (matching or zero matching).
Edit and Fix: If any XPath is not working, you can edit and fix it directly within SelectorSub. For example, if there is an issue like an extra space, you can correct it and verify again.
For more details, please follow this tutorial.
The Selectors Healing feature in SelectorsHub Pro is designed to help users verify all selectors in their Ul automation scripts efficiently. This feature supports various selector types such as XPath, CSS, ID, and more. When there is a change in the Ul, instead of manually verifying each selector, users can paste their entire script into SelectorsHub Pro. The tool will then automatically identify which selectors have changed and provide the results instantly. This feature is particularly useful for maintaining automation scripts as it saves significant time and effort.
For more details, please follow this tutorial
Please follow this tutorial .
The document you provided does not contain specific information about ‘SH Selector in SelectorsHub However, when I searched externally, I found that:
The SH Selector in SelectorsHub is a feature that helps users to generate and verify selectors for web elements. SelectorsHub is a tool that provides an easy way to write, edit, and verify XPath, CSS Selectors, and other types of selectors. The SH Selector feature specifically aids in creating robust and unique selectors, which are essential for web automation and testing.
For more details, please follow this tutorial
Please follow this tutorial.
To customize the SelectorsHub XPath plugin UI, follow these steps:
- Click on the wheel icon to access the Ul customization options.
- Scroll through the options and uncheck the elements you do not need, such as tag name, absolute XPath, partial link tags, name, class name, etc.
- To remove unnecessary toggle buttons, click on the respective buttons to hide them. This includes options like auto-suggest and case-insensitive buttons.
- Once customized, these settings are saved and will be applied the next time you open SelectorsHub, ensuring a clean and tailored Ul based on your preferences.
- if you need to verify any XPath or selector, ensure that the auto-suggest feature is turned on if required.
- To further clean up the UI, you can turn off attribute filters and other unnecessary toggles.
For more details, please follow this tutorial.
Please follow this tutorial.
The new innovation, referred to as “Selectors Healing” significantly helps in eliminating backlogs for UI automation scripts by addressing the common issue of changing UI elements and locators. This innovation allows users to verify all selectors in one click, not just XPath, but also CSS selectors, IDs, names, and other locators. Here’s how it works please follow this tutorial.
Please follow this tutorial.
Please follow this tutorial.
Some common misconceptions about the SelectorsHub XPath Plugin and XPath Smart Editor include:
Auto-Generation of XPath: Many people believe that the SelectorsHub XPath Plugin is primarily for auto- generating XPath and selectors. However, it is actually a smart editor where users can write and verify their own XPath, rather than relying solely on auto-generated ones.
Comparison with Other Plugins: There is a misconception that SelectorsHub is similar to other XPath plugins. In reality, it offers unique features such as support for shadow DOM, nested shadow DOM, and nested iframes, which many other tools do not handle effectively
DevTools Limitations: Users often think that DevTools provides accurate error messages For XPath validation. In contrast, SelectorsHub offers more precise error messages, helping users identify issues like missing single quotes or invalid XPath more effectively.
For more details, please follow this tutorial .
Please follow this tutorial
Please follow this tutorial.
Yes, it is possible to customize the position of the SelectorsHub tab within DevTools. You can drag and drop the SelectorsHub tab to any position you prefer.
For more details, please follow this tutorial.
Please follow this tutorial.
The issues with the keyboard shortcut, debugger, and side panel not working in SelectorsHub Pro can be attributed to a few specific reasons:
Debugger Not Working: This issue might occur if the DevTools are not open. To resolve this, ensure that you open the DevTools before clicking on the debugger icon. This will allow the debugger to function correctly and inspect elements that disappear quickly.
Keyboard Shortcut Not Working: This problem is known to occur in Chrome versions 114 and 115. From version 116 onwards, Chrome has Fixed this issue. To resolve it, you can manually set the keyboard shortcut by right-clicking on the SelectorsHub Pro logo, selecting “Manage Extension, and then setting the desired keyboard shortcut under Keyboard Shortcuts”.
Side Panel Not Working: If SelectorsHub Pro is open in both the side panel and DevTools, it will not function correctly. Ensure that SelectorsHub Pro is open in only one of these panels at a time to avoid conflicts
For more details, please follow this tutorial
Opening SelectorsHub in DevTools is considered inefficient or unnecessary due to the advancements in the SelectorsHub 50 version. The new version allows users to access Selectorshuts directly from the toolbar or single keyboard shortcuts, eliminating the need to right-click, inspect, and search for the SelectorsHub panel within DevTools. This streamlined process saves time and effort, making it more convenient for users to aspect elements and obtain selectors and Paths without repeatedly opening DevTools.
For more details, please follow this tutorial.
Please follow this tutorial.
Please follow this tutorial.
If SelectorsHub is not appearing in DevTools or is showing errors, there could be several reasons for this issue:
SelectorsHub Not Appearing in DevTools:
- Ensure that SelectorsHub is installed correctly, Sometimes, it might not load due to a Chrome issue. You can try reinstalling Selectors Hub and restarting your browser.
- SelectorsHub usually appears as the last tab in DevTools Right-click, select “inspect, and check the last tab to see if SelectorsHub is there.
- if it still does not appear, click on the SelectorsHub logo to open it directly.
SelectorsHub Showing Errors:
- If clicking on the SelectorsHub logo shows a blank tab reinstalling Selectors Hub and restarting the browser might resolve the issue.
- Sometimes, errors might be due to outdated versions. Updating to the latest version of SelectorsHub can fix these problems.
- In rare scenarios, the issue might be due to Chrome itself. Chrome has acknowledged such issues and is working on fixes.
For more details, please follow this tutorial.
Please follow this tutorial.