1. Customize the User Interface (UI)

SelectorsHub comes with a variety of options, but not all of them may be relevant to your workflow. The first step in customizing the tool is adjusting the UI itself.

• How to Customize UI: Simply click on the “Customize UI” button. This will open the settings for modifying the user interface. From here, you can hide or show specific selectors and buttons that may or may not be useful for you. This allows you to streamline the interface and focus only on the essential features.

By customizing the UI, you’ll get rid of distractions and make the tool much easier to navigate.

2. Hide Unnecessary Selectors

SelectorsHub provides many types of selectors, such as tag names, absolute XPaths, and Query selectors. However, not every selector may be useful for your specific use case.

• How to Hide Selectors: Go to the UI customization settings and uncheck the selectors you don’t need. For example, if you don’t find the absolute XPath or J’s Path useful, simply uncheck them. This will hide those selectors from the interface, leaving you with only the ones you use frequently.

This not only declutters your workspace but also speeds up your workflow by presenting only relevant data.

3. Keep Only the Required Selectors

Once you’ve hidden the selectors you don’t need, it’s time to focus on what matters most to you.

• How to Select Required Selectors: Check only the selectors that are essential for your work. For instance, if you mainly use CSS selectors or XPath, ensure that those are the only ones visible in the UI. This makes the interface much simpler and more focused on what you need, allowing you to find selectors quickly without having to sift through unnecessary information.

4. Inspect Elements Efficiently

Now that you’ve customized your UI and selectors, the next step is to improve how you inspect elements. When you inspect a page element, SelectorsHub will only display the selectors you’ve chosen in the customization settings.

• What This Means: With only the relevant selectors visible, your inspection process becomes more efficient. No more sifting through irrelevant data. You’ll be able to quickly focus on the most pertinent information, speeding up your testing and development process.

This customization makes working with SelectorsHub more productive and user-centric.

5. Customize the Ul Buttons

SelectorsHub also provides various Ul buttons for auto-generated selectors, which can be helpful in some cases but might clutter the interface for users who prefer to work manually.

• How to Customize Ul Buttons: If you don’t find the auto-generated selectors useful, you can hide the auto-suggest toggle button. This will make the interface more focused on manual input, which is ideal for developers who prefer to create their own selectors.

This customization helps clean up the UI, ensuring that only the features that fit your workflow are accessible.

6. Save Custom XPaths for Future Use

If you’re someone who writes your own custom XPaths, you’ll be happy to know that SelectorsHub allows you to save these XPaths for future use.

• How to Save Custom XPaths: After writing your custom XPath, simply use the save button to store it in the tool for later use. This ensures that you don’t have to rewrite the same XPath every time, saving you valuable time and effort.

By saving your custom XPaths, you create a personal library of useful selectors that are ready whenever you need them.