Brief Overview

With most WalkMe items it is possible to freely input jQuery selectors to select elements. The jQuery library has existed for quite a while, but its syntax and way of writing selectors has changed over time.

For users who are not familiar with the latest syntax and use an old-fashioned way of writing jQuery selectors, this can sometimes cause a longer evaluation time. This becomes a problem when users have a lot of content with old-fashioned selectors.

We want to improve WalkMe's performance of finding elements on the page and help you write more efficient selectors.

The 'jQuery Optimizer' detects if a specific selector that you have written can be rewritten with a more modern syntax that would evaluate faster. When it does, it automatically updates the value in the field with the optimized selector, leaving the option to revert the change manually.

How It Works

This feature is automatically available for any deployable that has the “Define how to identify the element” option within the settings of that particular deployable:

Optimization examples

Steps for using the JQuery Optimizer

1. Open any deployable with a Selected Element.
2. Click the Selected Element tab:
3. Select jQuery selector in the “Define how to identify the element” section:
4. Fill value written in an old-fashioned way, for example: [class="foo bar"], and click out of the input field:
5. Watch the magic of your selector being optimized!

Technical Notes

The optimizer can strip backslashes from IDs containing special characters, which breaks shorthand #id selectors.

Why this happens

Special characters like colons have a reserved meaning in CSS and jQuery selectors, for example in :hover. If an ID contains literal special characters, such as workflow:contacts:0:sections:0:titleSection, the parser reads them as syntax instead of part of the ID, breaking the selector.

How to fix it

Add a backslash before each special character:

• Before: #workflow:contacts:0:sections:0:titleSection
• After: #workflow\:contacts\:0\:sections\:0\:titleSection

Alternative

Use the attribute selector format instead, which doesn't require escaping: [id="workflow:contacts:0:sections:0:titleSection"]