Using CSS selectors for element positioning in selenium

1. When you use the Selenium element positioning, usually more use is xpath,css positioning method used relatively little

But sometimes CSS positioning methods have some advantages,

Advantage 1: In general, the positioning speed is faster than XPath

Advantage 2: syntax is more concise than XPath

The following is a brief introduction to the syntax of the CSS element selector

Common Syntax

*	Universal element Selector, matching any element
E	Tag Selector, matching all elements with e tags
. info	Class selector that matches the elements in all class attributes that contain info
#footer	ID selector that matches all elements of the id attribute equal to footer
E,f	Multi-element Selector, matching all E or F elements, separated by commas between E and F
E F	Descendant element selector that matches all f elements that are descendants of the e element, separated by a space between E and F
E > F	child element Selector, matching child element f of all E elements
E + F	Adjacent element selector, matching the sibling element F immediately following the E element (only the first one is matched)
E ~ F	Sibling element selector that matches all the sibling F elements after the E element
E[att= ' Val ']	The value of the property att is the e element of Val (case sensitive)
E[att^= ' Val ']	Property att The value of the E element (case-sensitive) that begins with Val
E[att$= ' Val ']	Property att The value of the E element at the end of Val (case sensitive)
E[att*= ' Val ']	The value of the property att contains the e element of Val (case sensitive)
e[att1= ' v1 '][att2*= ' v2 ']	The value of the property Att1 V1,att2 contains v2 (case-sensitive)
E:contains (' xxxx ')	The content contains the E element of XXXX
E:not (s)	Matches any element that does not conform to the current selector

such as a page of HTML code such as this

<div class= "Formdiv" >

<form name= "FNFN" >

<input name= "username" type= "text" ></input>

<input name= "Password" type= "text" ></input>

<input name= "Continue" type= "button" ></input>

<input name= "Cancel" type= "button" ></input>

<input value= "SYS123456" name= "vid" type= "text" >

<input value= "Ks10cf6d6" name= "CID" type= "text" >

</form>

<div class= "SubDiv" >

<ul id= "Recordlist" >

<p>Heading</p>

<li>Cat</li>

<li>Dog</li>

<li>Car</li>

<li>Goat</li>

</ul>

</div>

</div>

Match Example:

Locator	The
Css=div Css=div.formdiv	<div class= "Formdiv" >
css= #recordlist Css=ul#recordlist	<ul id= "Recordlist" >
Css=div.subdiv P Css=div.subdiv > UL > P	<p>Heading</p>
Css=form + div	<div class= "SubDiv" >
Css=p + li Css=p ~ Li	Both are located in the <li>Cat</li> But when Storecsscount, the former gets 1, and the latter gets 4.
Css=form > Input[name=username]	<input name= "username" >
Css=input[name$=id][value^=sys]	<input value= "SYS123456" name= "vid" type= "hidden" >
Css=input:not ([Name$=id][value^=sys])	<input name= "username" type= "text" ></input>
Css=li:contains (' Goa ')	<li>Goat</li>
Css=li:not (Contains (' Goa '))	<li>Cat</li>

2.the structural positioning in CSS

Structural positioning is based on the elements of the father and son, the same level of position to locate, CSS3 standard has defined a number of structural positioning pseudo class such as nth-of-type,nth-child, but the use of the grammar is very difficult to understand, here is not introduced.

In selenium, the CSS3 localization extension from sizzle is used, and its syntax is more flexible and understandable.

Structural localization Grammar of Sizzle CSS3

E:nth (N) E:eq (N)	The n+1 e element in the collection of e child elements in its parent element (first n=0)
E:first	The e element that is ranked 1th in the collection of e child elements in its parent element
E:last	The e element in the collection of e child elements in its parent element in the last 1
E:even	In the set of e child elements in its parent element, the e element (0,2,4 ...) is ranked in even digits.
E:odd	Rank the odd e element (1,3,5 ...) in the collection of e child elements in its parent element.
E:LT (N)	The e element (n=2, matching 0,1) that precedes N in the collection of e-child elements in its parent element
E:GT (N)	The e element (n=2, matching 3,4) that is ranked after N in the set of e child elements in its parent element.
E:only-child	The only child element of the parent element and the label is E
E:empty	An e element that does not contain any child elements, note that the text node is also treated as a child element

Match Example:

For example, or the code for a segment

<div class= "SubDiv" >

<ul id= "Recordlist" >

<p>Heading</p>

<li>Cat</li>

<li>Dog</li>

<li>Car</li>

<li>Goat</li>

</ul>

</div>

Locator	The
Css=ul > Li:nth (0)	<li>Cat</li>
Css=ul > *:nth (0) Css=ul >: nth (0)	<p>Heading</p>
Css=ul > Li:first	<li>Cat</li>
Css=ul >: A	<p>Heading</p>
Css=ul > *:last Css=ul > Li:last	<li>Goat</li>
Css=ul > Li:even	Cat, car
Css=ul > Li:odd	Dog, Goat
Css=ul >: Even	<p>Heading</p>
Css=ul > P:odd	[ERROR] not found
Css=ul > Li:lt (2)	<li>Cat</li>
Css=ul > Li:gt (2)	<li>Goat</li>
Css=ul > Li:only-child Css=ul >: Only-child Css=ul > *:only-child	[ERROR] not found (UL no only-child)
Css=div.subdiv >: Only-child	<ul id= "Recordlist" > ... ... ... ... </ul>

3.

the structural positioning in CSS

Structural positioning is based on the elements of the father and son, the same level of position to locate, CSS3 standard has defined a number of structural positioning pseudo class such as nth-of-type,nth-child, but the use of the grammar is very difficult to understand, here is not introduced.

In selenium, the CSS3 localization extension from sizzle is used, and its syntax is more flexible and understandable.

Structural localization Grammar of Sizzle CSS3

E:nth (N) E:eq (N)	The n+1 e element in the collection of e child elements in its parent element (first n=0)
E:first	The e element that is ranked 1th in the collection of e child elements in its parent element
E:last	The e element in the collection of e child elements in its parent element in the last 1
E:even	In the set of e child elements in its parent element, the e element (0,2,4 ...) is ranked in even digits.
E:odd	Rank the odd e element (1,3,5 ...) in the collection of e child elements in its parent element.
E:LT (N)	The e element (n=2, matching 0,1) that precedes N in the collection of e-child elements in its parent element
E:GT (N)	The e element (n=2, matching 3,4) that is ranked after N in the set of e child elements in its parent element.
E:only-child	The only child element of the parent element and the label is E
E:empty	An e element that does not contain any child elements, note that the text node is also treated as a child element

Match Example:

For example, or the code for a segment

<div class= "SubDiv" >

<ul id= "Recordlist" >

<p>Heading</p>

<li>Cat</li>

<li>Dog</li>

<li>Car</li>

<li>Goat</li>

</ul>

</div>

Locator	The
Css=ul > Li:nth (0)	<li>Cat</li>
Css=ul > *:nth (0) Css=ul >: nth (0)	<p>Heading</p>
Css=ul > Li:first	<li>Cat</li>
Css=ul >: A	<p>Heading</p>
Css=ul > *:last Css=ul > Li:last	<li>Goat</li>
Css=ul > Li:even	Cat, car
Css=ul > Li:odd	Dog, Goat
Css=ul >: Even	<p>Heading</p>
Css=ul > P:odd	[ERROR] not found
Css=ul > Li:lt (2)	<li>Cat</li>
Css=ul > Li:gt (2)	<li>Goat</li>
Css=ul > Li:only-child Css=ul >: Only-child Css=ul > *:only-child	[ERROR] not found (UL no only-child)
Css=div.subdiv >: Only-child	<ul id= "Recordlist" > ... ... ... ... </ul>