Finder is a small tool to help you generate CSS selectors. We can call it up with a single click of the icon when needed.
After opening the Finder, we only need to click on an element in the page, and the selector can be automatically generated.
Finder provides two modes:
List Mode and
Let's take Shopee Product List Page as an example to compare the difference between these two modes?
Look up from the selected element until a list is found, then generate a list selector. Suitable for generating row selectors.
We have selected the "Product Title", and the Finder will automatically generate the selector for the product list for us:
div.shopee-search-item-result__items > div.col-xs-2-4
Generates a unique selector within a region. Suitable for generating column selectors.
Once the "Product Title" is selected, the Finder will automatically generate a unique selector for that title for us:
div:nth-of-type(1) > a > div > div > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div
Sometimes the element we select is not necessarily what we want, or it cannot be selected with the mouse. At this point we can walk by clicking the arrow on the Finder.
Some selectors are specific or non-persistent, they may expire at any time, so we selectively disable them as needed.
- Disable ID - e.g.
- Disable Class - e.g.
- Disable Attribute - e.g.
- Disable Child Type - e.g.