Search

Customizing Tests with Selectors

When building automated tests, two critical aspects must always be addressed:

  • Selecting the right element to interact with during test execution.
  • Performing the interaction successfully (clicking, typing, verifying, etc.).

Functionize’s machine-learning based selectors provide a robust, self-healing approach to element identification, but there are times when you may need to customize or override the default behavior.

Why Selectors?

Unlike traditional automation frameworks, Functionize does not rely solely on one or two selectors to locate elements. Instead, we analyze hundreds of thousands of data points per action to reconstruct the user’s intent. This allows Functionize to self-heal tests when elements change due to UI updates.

That said, there are scenarios where you may:

  • Prefer stricter element targeting.
  • Work on sites where ML-based healing does not behave as expected.
  • Require more control over how selectors are defined.

For these cases, Functionize provides three selection methods:

  • ML Select (default): Machine learning–driven, self-healing selection.
  • Selector: Hard-coded CSS or XPath selection.
  • JS Override Selector: Custom JavaScript for element targeting.

Accessing Selector Options

Selector options are available in multiple areas of the platform:

  • Architect – While recording a test.
  • Test Detail Page – Under Action settings.
  • Slider View – While reviewing execution results.

Architect

  1. Launch Architect to create a new test.
  2. While recording, open an action by clicking the white circle on the left.
  3. Select the ADV Selector tab.
  4. Use either the DOM Panel or Override Panel to customize selection.
    • DOM Panel: In the DOM panel, use the arrow keys to manually select a DOM element, or use the search box to find elements matching a selector.
    • Override Panel: In the Override Panel, a specific selector can be validated to check whether it finds a match.

Test Detail Page

  1. Open the test.
  2. On the Actions tab (or Browser Results tab) and expand the action.
  3. Select the Advanced tab in Action Settings to configure selectors.
  4. Select the desired selector under the Selector Type dropdown.

Slider View

  1. Open the test in Slider View.
  2. Click the gear icon on an action to open Action Settings.
  3. Select the Advanced tab to adjust selector options.

Selector Options in Action Settings

The Selector Type tile provides three options:

  1. ML Selection (default)
    • Uses Functionize’s AI-driven, machine learning selectors.
    • Automatically enabled.
  2. Selector (CSS/XPath)
    • Lets you define a specific CSS or XPath for the element.
    • If not found, Functionize falls back to ML Selection.
    • Force Option: If checked, the test fails when the selector is not found (no fallback).
    • Examples:
      • CSS Selector: #popover_p4q3jyvdfh > div
      • XPath Selector: //*[@id="popover_p4q3jyvdfh"]
  3. Selector Snippets
    • Functionize auto-generates unique selectors for you.
    • Selectors can be inserted without writing them manually.
    • Behave the same as custom selectors: fallback to ML unless forced.
  4. JS Override Selector
    • Lets you write custom JavaScript to dynamically return the target element.
    • Useful for complex or dynamic DOM structures where CSS/XPath is insufficient.
    • Must return the DOM element object for Functionize to interact with.
    • Includes a Validate button to confirm your JS returns the correct element.

Selector Options in Architect

When recording with Architect, selectors can be further refined through two panels:

DOM Panel

  • Manual DOM Walk:
    • Select an element near the target.
    • Use arrow icons to walk the DOM tree until the correct element is highlighted.
    • Save selection in Action Details.
  • Define Selector:
    • Copy a selector from Chrome DevTools (ID, query, class, etc.).
    • Paste into the text box.
    • Click Search to verify, then Save.

Override Panel

  • ML Selector (default): ML-driven, self-healing selection.
  • Specify Selector:
    • Manually enter a CSS/XPath selector.
    • Click Validate to ensure accuracy.
    • Optionally use Selector Snippets to auto-populate unique selectors.
    • Optionally check Force Selector to enforce strict failure if not found.
  • JS Override Selector:
    • Enter JavaScript that returns the target element.
    • Validate and save before continuing.

Best Practices for Selectors

  • Use ML Selection whenever possible – it is the most resilient and automatically self-heals.
  • Use hard-coded selectors only when necessary – for elements that must match exactly.
  • Use JS Override sparingly – only when CSS/XPath cannot reliably find the element.
  • Leverage Selector Snippets – to avoid writing selectors from scratch.
  • Validate selectors before saving – to avoid failures during execution.
  • Avoid relying on visual position – selectors that specify a visual location are likely to break as soon as the layout changes.
  • Use hierarchical selection only when necessary – chaining selectors increases fragility.
  • Prefer stable attributes over dynamic ones – avoid IDs or classes that change with each build, such as auto-generated strings.

Key Takeaway

Selectors in Functionize provide flexibility and control while keeping the default ML-driven self-healing as your foundation. By understanding when and how to use each selector type, you can ensure your test cases are both resilient and precisely targeted, even when working with dynamic or complex web applications.