The cssselector of "selenium theme" element positioning

Cssselector is my favorite element positioning method, selenium official website of the document is highly recommended to use CSS Locator, rather than XPath to locate elements, because the CSS locator than the XPath locator faster, Especially under IE (ie does not have its own XPath parser (Parser)) He is more efficient and more accurate than XPath, the drawback is that the page text is slightly flawed when there is no XPath directly.

Because front-end developers are using CSS selector to set the style of each element on the page, no matter how complex the position of that element, they can navigate to, then we use CSS selector must also be very accurate to navigate to the page elements.

Cssselector Common positioning

1. According to TagName

Driver.findelement (By.cssselector ("input")

2. By ID

Driver.findelement (By.cssselector ("Input#username")); HTML tags and #id

Driver.findelement (By.cssselector ("#username")); just #id.

3. According to ClassName

Single Class:driver.findElement (By.cssselector (". Username"));. Class

Compound class:driver.findElement (By.cssselector (". username.**.***"));. Classa.classb

4. Based on element properties

1) Precise matching:

[A] Driver.findelement (By.cssselector ("input[name=username]"); Property name = attribute value, Id,class, etc. can be written in this form

[B] Driver.findelement (By.cssselector ("Img[alt]"); existence attribute. For example, an IMG element has an ALT attribute

[C] Driver.findelement (by.cssselector ("input[type= ' Submit '][value= ' Login ')"); multi-attribute

2) Fuzzy matching: (regular expression matching attribute)

[A] ^= driver.findelement (by.cssselector (input[id ^= ' ctrl ')); Match to ID header such as Ctrl_12

[B] $= driver.findelement (by.cssselector (input[id $= ' ctrl ')); match to ID tail such as A_ctrl

[C] *= driver.findelement (by.cssselector (input[id *= ' ctrl ')); match to the middle of the ID such as 1_ctrl_12

For more regular matching principles, see CSS3 Selector-Property Selector http://www.w3cplus.com/css3/attribute-selectors

5. Querying child elements

<formID= "form"class= "FM"name= "F"> 　　 <spanID= "S_kw_wrap"class= "bg s_ipt_wr quickdelete-wrap"> 　　　　 <inputID= "KW"class= "S_ipt"type= "text"AutoComplete= "Off"maxlength= "+"name= "WD"> 　　 </span> 　　 <spanID= "S_BTN_WR"class= "BTN_WR s_btn_wr bg"> 　　　　 <inputID= "Su"class= "BTN self-btn bg s_btn"type= "Submit"value= "Baidu a bit">　　 </span></form>

Case HTML

The above code is Baidu homepage Search input box and button HTML, the following explanation as an example

1) child element A>b

Webelement input= driver.findelement (By.cssselector ("Form>span>input"));//Search Input Box

2) descendant element a space B

Webelement input= driver.findelement (by.cssselector ("form input");//Search Input Box

3) First descendant element : First-child

Webelement span= Driver.findeleme (By.cssselector ("Form:first-child"));//A colon preceded by a space, anchored to the first child of all levels below the form

Can be positioned to three elements: <span id= "S_kw_wrap" .../> <input id= "kw" ..../> <input id= "su" ........./>

Webelement span= Driver.findeleme (by.cssselector ("Form Input:first-child"));//The first INPUT element at all levels below the form, with no spaces before the colon

Can be positioned to two elements: <input id= "kw" ..../> <input id= "su" ........./>

Webelement span= Driver.findeleme (By.cssselector ("Form>span:first-child"));//The first SPAN element in a direct child element of a form, with no spaces before the colon

Can be anchored to an element: <span id= "S_kw_wrap" .../>

4) Last child element : Last-child [similar: First-child]

Webelement userName = Driver.findeleme (By.cssselector ("Form:last-child"));//A colon preceded by a space, positioned to the first child of all levels under a form

5) 2nd sub-element : Nth-child (N) [similar: First-child]

Webelement userName = Driver.findeleme (By.cssselector ("Form#form:nth-child (2)"));//A colon preceded by a space, positioned to the second child of all levels below the form

6. Querying sibling elements

Driver.findelement (By.cssselector ("Form#form Span+span")); Navigate to a and then navigate to the b adjacent to it.

In-depth learning Cssselector can access the following addresses:

http://www.w3.org/TR/css3-selectors/

CSS3 Selector-Basic selector http://www.w3cplus.com/css3/basic-selectorsCSS3 Selector--Property selector http://www.w3cplus.com/css3/attribute-selectorsCSS3 Selector-Pseudo class selector http://www.w3cplus.com/css3/pseudo-class-selector

The cssselector of "selenium theme" element positioning