How to find the CSS Selector of an element using Whatfix Studio?

Article Summary

You need the CSS Selector of an element whenever you try to add Branching or Display Rules in the Flow steps.

Use the follwing steps to find the CSS Selector using Whatfix Studio:

When Branching

Select the Select Element option from the dropdown instead of CSS Selector
Click the Select icon.
Select the element in the application UI and Whatfix captured the CSS Selector of the element automatically.

Note:

To verify the selected element click the View button.
RB_DB_VIEW selected element

When configuring Display Rules

Select the Select Element option from the dropdown instead of the CSS Selector.

your title goes here

Here is a list of all the options that appear in the dropdown.

Operator	Description
Select Element	Select the element directly in the application UI
Exists CSS Selector	Set value is the CSS class or id of the element that exists in the application UI
Not Exists CSS Selector	Set value is the CSS class or id of the element that does not exist in the application UI
Exists jQuery Selector	Set value is the jQuery selector of the element that exists in the application UI
Not Exists jQuery Selector	Set value is the jQuery selector of the element that does not exist in the application UI

Click the Select icon.
Select the element in the application UI and Whatfix captured the CSS Selector of the element automatically.

Note:

To verify the selected element click the View button.
RB_DB_VIEW selected element

Was this article helpful?