> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bytespace.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Element Selector

> Easily identify and target elements on any webpage to build reliable and dynamic workflows. Whether it's a button, form, or specific text, this tool helps you pinpoint exactly what your web-agent needs to interact with.

### Overview

Element Selector helps you precisely identify and interact with web elements in your automation workflows.

### Key Features

1. **Selection Methods**
   * Point and click
   * CSS selectors
   * XPath selection
   * Text matching

2. **Element Properties**
   * Attribute inspection
   * State detection
   * Dynamic content handling
   * Frame support

3. **Advanced Features**
   * Multiple element selection
   * Relative positioning
   * Shadow DOM support
   * iFrame navigation

### Best Practices

1. Use specific selectors
2. Handle dynamic content
3. Verify selections
4. Test across states

### Basic Selection

<Steps>
  1. **Activate the Selector**
     Click the selector icon in the builder toolbar to start targeting elements.

  2. **Hover and Click**
     Move your mouse over the desired element. The selector will highlight elements as you hover.

  3. **Verify Selection**
     Once clicked, the element's details will appear in the builder panel.
</Steps>

### Enhance Selector

The Enhance Selector feature helps you create more robust and reliable element selectors that can withstand website updates and dynamic content changes.

<Tabs>
  <Tab title="Text Based">
    Create selectors that find elements based on their text content:

    * Exact match: "Login"
    * Partial match: "contains(Login)"
    * Regular expressions for complex patterns
  </Tab>

  <Tab title="Attribute Based">
    Target elements using their HTML attributes:

    * ID: "#login-button"
    * Class: ".btn-primary"
    * Custom attributes: "\[data-testid='submit']"
  </Tab>

  <Tab title="Relative Position">
    Select elements based on their relationship to other elements:

    * Parent/child relationships
    * Siblings
    * Nth occurrence of similar elements
  </Tab>
</Tabs>

### Best Practices

<CardGroup cols={2}>
  <Card title="Use Unique Identifiers" icon="fingerprint">
    Prioritize IDs and unique attributes when available for most reliable targeting
  </Card>

  <Card title="Test Multiple Scenarios" icon="vials">
    Verify your selector works across different states and conditions
  </Card>

  <Card title="Keep it Simple" icon="wand-magic-sparkles">
    Start with the simplest selector that works reliably
  </Card>

  <Card title="Regular Testing" icon="clock-rotate-left">
    Periodically verify selectors still work as websites update
  </Card>
</CardGroup>

### Troubleshooting

<Accordion title="Element Not Found">
  If your selector fails to find an element:

  1. Verify the element is visible and not in an iframe
  2. Check if the element is dynamically loaded
  3. Try using the Enhance Selector for a more robust solution
</Accordion>

<Accordion title="Multiple Elements Found">
  When your selector matches multiple elements:

  1. Use more specific attributes
  2. Add positional constraints
  3. Combine multiple selector strategies
</Accordion>

<Note>
  Remember to test your selectors thoroughly, especially when dealing with dynamic content or responsive layouts.
</Note>