- 27 Jun 2024
- 1 Minute To Read
-
Print
-
DarkLight
-
PDF
Can Whatfix capture the CSS selector of an element?
- Updated On 27 Jun 2024
- 1 Minute To Read
-
Print
-
DarkLight
-
PDF
Yes, Whatfix can capture the CSS selector of an element using Studio in the following two cases:
- While adding a Branching rule to a Flow step.
- While adding a Display Rule to content.
Use the following steps to capture the CSS Selector using Whatfix Studio:
- Launch the Whatfix Studio, create a Flow, and then click the branching icon.
For more information, see Add a branch to a Flow
-
Click Create Branch.
-
Under Branching conditions, click Add Rule.
-
Select Action Element Is rule using the dropdown.
-
Select the Select Element option from the dropdown instead of CSS Selector.
-
Click Select.
-
Click the element for which you wish to find a CSS Selector in the application's UI.
![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CSS%20selector.gif?sv=2022-11-02&spr=https&st=2024-07-27T06%3A47%3A15Z&se=2024-07-27T06%3A57%3A15Z&sr=c&sp=r&sig=hKCj%2BGGZbEdzFNTWfGtcP7V0a5xBKHMW%2BKknrTYApTw%3D)
- Whatfix captures the CSS Selector of the element automatically.
- To verify the selected element click the View icon.
-
Launch Whatfix Studio, create the content, and then go to the ADVANCED OPTIONS section.
-
Expand the Display Rules dropdown, and then click Add Rule.
-
Select the Other Element on Page option from the dropdown.
-
Select the Select Element option in the dropdown instead of CSS Selector.
For more information, see Other Element Is condition as a Visibility Rule.
-
Click Select.
-
Click the element for which you wish to find a CSS Selector in the application's UI.
![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CSS%20selector%20display%20rules.gif?sv=2022-11-02&spr=https&st=2024-07-27T06%3A47%3A15Z&se=2024-07-27T06%3A57%3A15Z&sr=c&sp=r&sig=hKCj%2BGGZbEdzFNTWfGtcP7V0a5xBKHMW%2BKknrTYApTw%3D)
- Whatfix captures the CSS Selector of the element automatically.
- To verify the selected element, click the View icon.