Open the Chrome Devtools by inspecting a page element. (Right click on a page element and click
"Inspect")
There will be a "CSS Selectors" option on the sidebar. Click this.
Click on DOM elements in the Elements panel. The CSS Selector will be updated dynamically.
Customize CSS Selector generation by enabling/disabling ID/Class/Tags, filtering out specific values
of ID/Class/Tags, and using custom attributes.
Customize CSS Selector generation using settings to control robustness and optimization. Please see
Click "Generate" to regenerate the selector after settings are changed or after navigating to a
different page
Settings
Enable/Disable ID, Class, Tags:
ID, Class names, and Tag names are all used by the CSS Selector Finder by default. If you want to disable
any of those from being used, simply deselect the appropriate checkbox in the panel, as seen below. Click
"Generate" after changing any settings to regenerate the selector.
Exclude specific values of ID, Class, Tags:
In addition to completely disabling the use of ID, Class, and/or Tags, we can also exclude specific values
by adding them to the appropriate filter list. Enter the value to filter, and click the "Add" button. In the
example below, we are filtering out "result-row" and "result-title" for class names, and "li" for the tag
name. Thus, the generated CSS selector will not be able to use those values. Only enter the string portion
of the selector (for ID, do not prepend with #. for Class names, do not
prepend with ".")
Use Custom Attributes
We can also have the CSS Selector generation use custom attributes when generating a selector. In the
example below, we've added "data-rf-test-id" as the name of a custom attribute to use. The "*" indicates
that we don't care about the specific value of the attribute. During creation, if the value field is left
blank, it will be created as "*". If a specific value is used, then the CSS selector generation logic will
only consider using the custom attribute when it has that specific value.