Fix CSS selector issues using Diagnostics

Note:
Whatfix Diagnostics is available across all Delivery modes.
If Whatfix Studio is available on the browser, open Diagnostics directly from Studio.
Automated CSS selector addition is available for Element Precision rules only. To use the feature, ensure that the Automated CSS selector addition configuration is enabled for your account. For more information, see Enable Automated CSS selector addition.

Previously, Diagnostics helped identify step failures due to CSS selector mismatch, but resolving the issue required additional steps. Content authors had to open the browser’s developer console to manually find a stable CSS selector and configure it in Element Precision, or reach out to Whatfix support for assistance. This made the process time-consuming and required technical expertise.

What’s new?

Diagnostics now not only identifies CSS selector issues but also helps resolve them directly within Studio. When Diagnostics displays a "CSS selector issue detected" error, you can now move to the Live Edit workflow and reselect the target element. Whatfix automatically adds a valid selector to fix the issue.

The newly generated selector is added as an OR condition within Element Precision, ensuring that existing rules remain unchanged. This reduces manual effort and removes the need to rely on developer tools or external support.

Note:
Whatfix adds the new CSS selector as an additional condition in Element Precision. Automated CSS selector addition is applied only when Element Precision has zero or one existing condition. If multiple conditions are already configured (>1), the automation is skipped. This ensures that any use case–specific or custom logic defined in Element Precision is not overridden.

Example use case:

Consider that you have created a Flow, and a step is not appearing correctly for your end users — it is either not found on the page or displayed at an incorrect position. In this scenario, Whatfix Diagnostics can identify the CSS selector issue and guide you through fixing it directly within Diagnostics.

Use the following steps to automatically add a CSS selector to your content using Diagnostics:

Go to the page where you want to troubleshoot your content and launch Studio.
Click the Diagnostics icon.
Click Preview Mode.
Note:
If the content you want to preview is in the Draft stage, then select the Include Draft content and widgets. checkbox.

If you enable Preview Mode from the content creation page, you must manually refresh the page to activate Preview Mode.
Click Enter and wait for the page to refresh automatically.

Once the page opens, Diagnostics helps you view all the relevant content and widgets for that page.
Info:
Consider that you have created multiple pieces of content across your application. When testing this content on different pages, you would expect it to appear on the correct page or section.
To help you identify the content that is applicable to appear on a specific page, Diagnostics categorizes content into two sections:
- On this page: Lists content and widgets that are configured to appear on the current page. This includes content that has a valid URL or page tag condition that matches the current page.
- Not on this page: Lists contents and widgets that don't belong on the current page. This implies the visibility rules, URL conditions, or page tags that are not applicable on the current page.
The sections act as a built-in filter, helping you identify missing content and troubleshoot issues more efficiently.
- Use the Search bar to find specific content or widgets.

Expand the Flows accordion and click Diagnose on the Flow you want to troubleshoot.
Note:
- To troubleshoot Flows, launch them through a widget such as Pop-up or Self Help.
- Whatfix searches for elements in Flow steps and displays the status as Found or Not Found.

Note:
If a Flow step shows the status Not found, it means Whatfix cannot locate the target element on the page. For example, clicking the status displays a CSS selector issue detected message.

In the Tooltip not in right spot? section, click the Refine element button.

Info:
Whatfix Studio opens in Edit mode.
Click Element Precision.
In the Tooltip not in the right spot? section, click selecting the element again.
Re-select the target element on the page.
Note:
The CSS selector is automatically generated and added as an OR condition if an existing CSS selector is already present. If no selector exists, it is added without an OR condition.
Click Save Step.
Click Save Flow to apply the changes.
Click Go To Diagnostics.
Click Refresh to refresh the application and see the changes.
The Flow step appears in the correct position with a reliable CSS selector.

Auto-fix CSS selector issues using Diagnostics