Improve Element Selection using Element Reliability indicators

Overview

When a page contains multiple similar elements, selecting a weak or incorrect element can lead to latching issues. In such cases, content or tooltips might attach to an unintended element and appear in the wrong location. Selecting a reliable element during content creation is important to ensure that Whatfix consistently identifies the intended UI component, enabling accurate content placement and a stable end-user experience.

With Element Reliability indicators, Whatfix shows the strength of the element as you select it in the flow of work. These indicators help you understand how reliably Whatfix can identify and select an element. When an element is weak or difficult to identify, Whatfix displays a message indicating that the element is not reliable for attaching content. These indicators ensure you have ample visibility into the reliability of the target element, so you can seek necessary assistance or action on the selection accordingly.

Understand Element Reliability indicator

• Green indicator – Selected element is reliable
  
  When the indicator appears green, it means the selected element has unique and stable identifiers. Whatfix can reliably detect and latch onto the selected element when content is live. If your selected element is reliable, adding a custom selector is usually not required. However, if you still wish to add a custom selector, a confirmation dialog appears:

  Are you sure you want to add custom selectors?

  Click Proceed anyway to continue.
  
  
  

• Yellow indicator – Selected element is unreliable
  When the indicator appears yellow, it means that the selected element does not have reliable identifiers. Whatfix might struggle to latch onto the element during runtime, especially when:

  • The page structure changes,

  • Multiple similar elements exist, or

  • The element lacks unique HTML attributes.
    

  Note:

  A yellow indicator highlights a possible latching issue, and not a definite problem. You can choose to save the step and proceed, but be mindful that the content or tooltip might or might not work or latch onto the correct element during runtime, depending on user accounts, environment differences, and other factors.

  What to do when you see a Selected element is unreliable warning?

  When a yellow indicator appears, follow these recommended steps before saving the element:

  • Test the element across environments

    Test the element across environments by checking it in your sandbox and production environments, and validating its behavior with multiple end-user accounts. If the element consistently latches in all these scenarios, you can safely proceed.
    

  • Contact support if issues occur

    If latching problems occur during testing, contact support@whatfix.com to add targeted CSS selectors for that element. This ensures higher accuracy and prevents runtime issues.
    

  • Refine the element using a custom selector (Optional)
    If the selected element is unreliable or weak, refine the element by adding a custom CSS or jQuery selector.

    How to refine the selected element using a custom selector?

    Use the following steps to add a custom selector:

    1. Click Element Precision.
       
       

    2. Click Refine Element.
       
       

    3. From the How would you like to identify the element? dropdown, select Using CSS selector as the rule, and then enter the Value of the CSS Selector.

       Note:

       If you know how to construct CSS selectors, you can choose to refine the element using Element Precision. For detailed instructions, see Identify an element's CSS selector.

       
       

       Once you add the CSS Selector, you see the following confirmation message:
       

Note:

• Element Reliability indicators do not appear each time you select an element. They appear only when Whatfix detects potential issues with the element.

• If the indicators appear every time an element is selected, it might be related to some underlying webpage issues. For more information, contact support@whatfix.com.

• The Element Reliability indicator is visible on both Whatfix Studio and Whatfix Guidance Dashboard.

  • Element Reliability indicator on Studio
    
    
    

  • Element Reliability indicator on the Whatfix Guidance Dashboard
    

Info:

Element Reliability indicators work for all content types across all applications, except Salesforce Lightning.

Benefits of Element Reliability indicator

Element Reliability indicators enable you to:

• Identify weak elements during element selection before they affect content display.

• Take corrective actions by choosing a stronger element or contacting support.

• Improve the reliability and effectiveness of Whatfix content across applications.

How is the strength of an element determined?

Whatfix determines the strength of an HTML element based on the uniqueness and specificity of its identifiers, attributes, or selectors.

Strong elements are easily and accurately identified due to unique attributes such as IDs, classes, or data attributes. Examples of strong elements include buttons or divs with unique identifiers, such as button[id="Save"] or div[data-automation-id="Production"].

Weak elements lack unique identifiers, making them difficult for Whatfix to detect accurately. They often occur on pages with multiple similar elements, such as long forms with input fields that do not have unique attributes. Weak elements can cause content or widgets to display incorrectly during content play.