Web Connector 12.13

# Find Selectors using the CSS Selector Builder Tool

The CSS Selector Builder Tool is an example tool, provided with Web Connector, that can help you find CSS selectors for parts of a web page. The tool is a plug-in for the Chrome web browser.

NOTE: Micro Focus does not support the CSS Selector Builder Tool, it is provided only as an example of a tool that you could build.

To install the CSS Selector Builder Tool

1. Open the Chrome web browser.

2. In the address bar, type `chrome://extensions` and press ENTER.

   The Extensions page opens.

3. Select the Developer mode check box.

4. Click Load unpacked extension...

   The Browse For Folder dialog box opens.

5. Select the CSS Selector Builder Tool folder in the Web Connector installation directory, and click OK.

   The tool is installed and you should see Micro Focus CSS Selector Builder Tool listed as an extension.

To find CSS Selectors

1. In Chrome, navigate to the web site that you want to index.

2. On the toolbar, click the CSS Selector Builder Tool button.

   The tool opens at the bottom of the browser window (but you can move it to the top of the window if you prefer, by clicking Move to top).

3. Move the mouse pointer over the page. Elements on the page are highlighted in blue as you hover over them, and the selector for the current element is displayed in the Current field.

4. Choose the page elements to keep and discard:

   - Right-click on each element that you want to keep when the page is clipped. The page elements to keep are highlighted in green and selectors are added to the Select box.
   - Right-click twice on each element that you want to discard when the page is clipped. The page elements to discard are highlighted in red and selectors are added to the Unselect box.
   - You can type one or more selectors in the Select and Unselect boxes and press Refresh. The tool will then show which parts of the page are clipped based on the selectors you have entered.
   - To clear all selectors, click Clear Selectors.
5. (Optional) Click on any hyperlink to navigate around the site. The tool highlights the selected and unselected elements on the current page, so that you can see whether the selectors you have chosen clip multiple pages as desired.
6. When you have optimized your selections, use the value in the Select box to set the parameter `ClipPageUsingCssSelect` in the connector's configuration file, and the value in the Unselect box to set the parameter `ClipPageUsingCssUnselect`.
7. Click Close.

© Copyright 2022 Micro Focus or one of its affiliates
Version 12.13 | Last updated October 2022

Send documentation feedback

Close

Send documentation feedback

To send feedback using your default email client, open an email window.

Otherwise, send your feedback and the information below to swpdl.idoldocsfeedback@microfocus.com.

We appreciate your feedback!

Product: IDOL Web Connector 12.13

Topic Title: Find Selectors using the CSS Selector Builder Tool