Manually copying selectors in the browser

Selectors are mechanisms that assist in element selection by referencing an element using its inner attributes. In HTML elements, a selector can be classes, IDs, attributes, HTML tags, among others.

Before you begin

You can use the Elements panel in the browser's developer tools (DevTools) to have access to the Document Object Model (DOM) of the web page. In this panel, you can get:

  • HTML elements
  • Tags
  • Selectors
  • Text content

See Web selectors for more detais about selectors.

Procedure

Inspecting the element

  1. Open the web browser.
  2. Navigate to the page or web application.
  3. Open DevTools.
  4. Click the Select a page element option.
    • For this action, you can use the Ctrl+Shift+C key combination.
    • For Internet Explorer, you can use the shortcut Ctrl+B.
  5. Left-click on the web page element to select it in DevTools.

After the procedure, you may have access to the option Select a page element in the upper left corner of DevTools.

You can use this other option to select the element:

  1. Open the browser of your choice.
  2. Navigate the page or web application.
  3. Right-click on the desired web page element.
  4. Select the option Inspect or Inspect element.

Some browsers highlight the element you selected.

Getting the CSS and XPath selectors

  1. Open the browser.
  2. Navigate to the page or web application.
  3. Open the Elements panel in DevTools.
  4. Right-click the element from the DOM.
  5. Click Copy.
  6. Select one of the options:
    • For the CSS selector: Click Copy selector or CSS selector.
    • For the XPath selector: Click XPath.

What to do next

Explore different use cases involving Web automation, check the available Tutorials.