Selenium - How to use CSS Selector

What is CSS Selector?

Css Selector positioning is actually the label positioning of HTML's Css selector

tool

Css Selector can be downloaded as a plugin for Firefox, FireFinder or a combination of FireBug and FirePath.

 

Instructions:

1. Css Selector supports the positioning of ID and Class the same as CSS positioning in HTML

定位ID：id = "navi"  ->

 #navi

定位Class: class = "inner" ->

.inner

Multiple Class positioning: class = " 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"]

The writing method is simpler when used in combination with ID and Class 

Class ->
input.c1
ID    ->
input#i1

4. Css Selector provides multi-attribute combination filtering

select[size='4'][multiple='multiple']

5. Css Selector supports hierarchical relationship positioning

div.inner>input
select>option[value='3']

 

6. Css Selector fuzzy matching

starts with xx

[placeholder ^= ' Please pass ID ' ]

ends with xx
[placeholder$ = ' ID positioning element ' ]

contains xx
[placeholder*='ID'] 

 

Advantages: CSS selector syntax is simpler and faster.

Disadvantage: does not support index positioning

Summary: When writing UI automation, the Css Selector selector is preferred, and the Xpath selector cannot be used.