--- title: "Fix CSS selector issues using Diagnostics" slug: "fix-css-selector-issues-using-diagnostics" tags: ["Diagnostics", "Whatfix Diagnostics"] updated: 2026-05-06T05:57:13Z published: 2026-05-06T05:57:13Z --- > ## Documentation Index > Fetch the complete documentation index at: https://support.whatfix.com/llms.txt > Use this file to discover all available pages before exploring further. # Fix CSS selector issues using Diagnostics > [!WARNING] > Note: > > - Whatfix Diagnostics is available across all [Delivery modes](/studio/docs/choosing-a-delivery-method). > - If Whatfix Studio is available on the browser, open Diagnostics directly from Studio. > > **Prerequisite: Enable Automated CSS Selector Addition** > > - Automated CSS selector addition works only with Element Precision rules. > - 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](/studio/docs/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. > [!WARNING] > 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: 1. Go to the page where you want to troubleshoot your content and launch Studio. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CLM_editor plug in(3).png) 2. Click the **Diagnostics** icon. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Diagnostics(1).png) 3. Click **Preview Mode**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Preview_mode(1).png) > [!WARNING] > Note: > > If the content you want to preview is in the Draft stage, then select the **Include Draft content and widgets**. checkbox. > > ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-1741537468606.png) If you enable **Preview Mode** from the content creation page, you must manually refresh the page to activate Preview Mode. > > ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/DB_Click_preview(1).png) 4. Click **Enter** and wait for the page to refresh automatically. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-1753953715382.png) Once the page opens, Diagnostics helps you view all the relevant content and widgets for that page. > [!NOTE] > 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. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-1744176197051.png) > > - Use the **Search** bar to find specific content or widgets. 1. Expand the **Flows** accordion and click **Diagnose** on the Flow you want to troubleshoot. > [!WARNING] > 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**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-FYOZUV6N.png) > [!WARNING] > 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. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2026-04-22_12-34-17.png) 1. In the **Tooltip not in right spot?** section, click the **Refine element** button. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2026-04-22_12-35-41(2).png) > [!NOTE] > Info: > > Whatfix Studio opens in Edit mode. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot 2026-04-23 at 2.40.29 PM.png) 2. Click **Element Precision**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2026-04-23_14-46-33.png) 3. In the **Tooltip not in the right spot?** section, click **selecting the element again**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2026-04-22_13-34-41.png) 4. Re-select the target element on the page. > [!NOTE] > 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. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2026-04-22_13-37-22.png) 5. Click **Save Step**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2026-04-23_14-48-20.png) 6. Click **Save Flow** to apply the changes. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2026-04-23_14-49-20.png) 7. Click **Go To Diagnostics**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2026-04-23_14-50-05.png) 8. Click **Refresh** to refresh the application and see the changes. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2026-04-22_13-41-46.png) The Flow step appears in the correct position with a reliable CSS selector.