Selenium-css Selector How to use

What is CSS Selector?

CSS selector positioning is actually the HTML CSS selector tag positioning

Tools

CSS selector can be downloaded using Firefox plugins, Firefinder or Firebug and firepath combinations.

How to use:

1. CSS Selector support ID, class positioning is the same as CSS positioning in HTML

" Navi "  class "inner  "  C1 C2 c3"  -c1.c2.c3

2. CSS selector supports arbitrary attribute positioning

[Name="name"]

3. CSS selector provides tag attribute combination positioning

Input[name="name"]

Easier to write when combined with ID, Class

Class->input.c1id    ->input#i1

4. CSS Selector provides multi-attribute combination filtering

Select [size='4'] [multiple='multiple']

5. CSS Selector supports hierarchical relationship positioning

div.inner>inputselect>option[value='3']

6. Css Selector Fuzzy Matching

start with xx [placeholder^=' please pass ID'] to end with XX [placeholder$='  ID anchor element '] contains xx[placeholder*='ID'

Advantages: CSS selector syntax is relatively concise and runs faster.

Disadvantage: index positioning is not supported

Summary: writing UI Automation takes precedence over CSS Selector selectors and cannot be used with XPath selectors.

Selenium-css Selector How to use