Find Selectors using the CSS Selector Builder Tool

The HPE CSS Selector Builder Tool is an example tool, provided with HPE 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: HPE 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 HPE 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. Open a file manager (such as Windows Explorer on Windows).
  4. Drag the file HPE CSS Selector Builder Tool.crx from the HPE Web Connector installation onto the Extensions page in the browser.

    A box opens, asking for your permission to install the tool.

  5. Click Add Extension.

    The tool is installed.

To find CSS Selectors

  1. In Chrome, navigate to the web site that you want to index.
  2. On the toolbar, click the HPE 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:

  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.

_HP_HTML5_bannerTitle.htm