Understanding Selectors

Selectors in Doppelganger define which elements on a webpage a block interacts with. They are used in extraction, click, type, and hover blocks. In extraction filters and scroll blocks, selectors are optional. Understanding how to use selectors ensures tasks run reliably and efficiently.

What a Selector Does#

A selector identifies the element or elements a block should act on. It can target elements by:

• Tag name (e.g., div, p)
• Class (e.g., .product)
• ID (e.g., #header)
• Attributes (e.g., input[type="email"])
• Hierarchy (e.g., div > p, div p)
• Position (e.g., li:nth-child(2))
• Content-based matching (e.g., div:has-text("hi")) – matches elements that contain specific visible text

Selectors ensure that actions are performed only on the intended elements, even if multiple similar elements exist on the page.

Using Selectors in Extraction#

Selectors in extraction scripts define which elements to capture. In extraction filters, the selector is optional — it limits extraction to elements matching the selector, ignoring everything else.

Best practices:

• Use classes, IDs, or content-based selectors for stable targeting.
• Combine parent and child selectors to scope extraction precisely.
• Use attributes, positional selectors, or :has-text("…") for dynamic content.
• Content-based selectors are especially useful for buttons, links, or text that may not have unique classes or IDs.

Using Selectors in Click Blocks#

Click blocks use a selector to determine which element will be clicked.

Best practices:

• Target unique elements to prevent clicking unintended items.
• Combine hierarchy, classes, IDs, or content-based selectors for precise targeting.
• Content-based selectors like button:has-text("Submit") ensure you click the right button even if multiple buttons exist.
• Click blocks automatically wait for the element to exist before performing the action.

Using Selectors in Type Blocks#

Type blocks use a selector to ensure text is typed only into the correct field.

Best practices:

• Target the exact input field using a class, ID, or attribute.
• Avoid broad selectors that match multiple elements.
• Ensure the element is interactable before typing.

Using Selectors in Hover Blocks#

Hover blocks use a selector to simulate a mouse hover over a specific element, which can reveal menus, tooltips, or hidden content.

Best practices:

• Target the element that triggers the hover effect.
• Scope the selector to avoid affecting multiple elements.
• Hover actions can be combined with clicks or extraction blocks to interact with revealed content.

Using Selectors in Scroll Blocks#

Scroll blocks do not require a selector, but can optionally target a specific element to scroll to, usually to trigger lazy loading or access off-screen content.

Best practices:

• Use optional selectors to scroll precisely to a specific element.
• Scrolling ensures that all content is accessible for extraction or interaction on long or dynamic pages.

General Best Practices#

1. Test selectors in the task editor to ensure they match the intended element.
2. Combine classes, IDs, hierarchy, attributes, position, and content-based matching for precise targeting.
3. Avoid overly broad selectors to prevent unintended matches.
4. Use stable identifiers to minimize breaks if the page layout changes.

Selectors in Doppelganger provide precise control over scraping and automation. Using them correctly ensures that extraction, clicks, typing, and hovering behave reliably and only affect the elements you intend.