Improve Element Selection using Visual Cues
- 19 Jun 2024
- 3 Minutes To Read
-
Print
-
DarkLight
-
PDF
Improve Element Selection using Visual Cues
- Updated On 19 Jun 2024
- 3 Minutes To Read
-
Print
-
DarkLight
-
PDF
Article summary
Did you find this summary helpful?
Thank you for your feedback
Have you ever encountered issues with correctly capturing elements on a webpage? The presence of multiple similar elements can make it difficult to accurately select the intended element. This leads to incorrect positioning of content or widgets.
With Visual Cues, Whatfix enables you to see the strength of the element that is being captured. This also lets you understand how well the element is identified and selected by Whatfix. Additionally, add additional information, such as CSS selectors, to further improve the accuracy and reliability of the selection. This ensures that only the right elements are being captured and content shows up when it's supposed to.
your title goes here
Visual Cues does not show up each time you select an element. It shows up when Whatfix finds some issues with the element. If you see Visual Cues every time you select an element, it may be related to some underlying webpage issues. Contact support@whatfix.com to understand more.
your title goes here
Visual Cues works for all content types across all applications, except Salesforce Lightning.
How is the strength of an element determined?
The strength of an HTML element on a webpage is determined by the uniqueness and specificity of its identifiers, attributes, or selectors. Strong elements are easily and accurately identified and selected by Whatfix due to their unique attributes, such as unique ids, classes, and more. Examples of strong elements include buttons or divs with unique identifiers like button[id="Save"] or div[data-automation-id="Production"].
In contrast, weak elements lack these unique identifiers, making them difficult for Whatfix to accurately detect and select. This often occurs on pages with multiple similar elements, such as a long form with many input fields that do not have unique attributes. As a result, Whatfix may struggle to identify the intended element, potentially causing content or widgets to display incorrectly during content play.
Use the following steps to use Visual Cues on your application:
-
Log in to the application where you want to create content, and then launch the Whatfix Studio.
-
Select the type of content or widget you want to create.
-
While selecting the element, if Whatfix finds the element to be weak, a warning message shows up on Studio.
your title goes here
- Whatfix automatically selects relevant CSS Selectors to add unique properties to your element. This ensures that only the right element is selected.
- If Whatfix is unable to identify any unique properties for the selected element, an error message shows up on Studio. Either choose to proceed with the weak element, reselect the element, or contact support.
- If you choose to proceed with the weak element, Whatfix saves the relevant weak element metadata and lets you continue with content creation. However, steps created on such elements may have issues during content play.
-
If you want to continue with the selected element, click Confirm Element, else reselect the element.
-
If you want to edit or verify the additional properties added to the element, click Edit selected properties.
your title goes here
Ensure that you edit the properties only if you're familiar with CSS Selectors and dynamic properties. These appear as a string of randomly generated characters and can differ from one browser to another. It is best to avoid such properties to prevent content failure.
-
Click Edit.
-
From the list of CSS Selectors, select all that are applicable.
your title goes here
Whatfix enables you to only choose what selectors you want to add to the step. These cannot be modified as they are part of the step metadata.
-
Once the strength of the selected element is strong, click Confirm Element.
-
Complete creating your content or widget as you normally would.
Was this article helpful?