Positioning page elements with CSS selectors

Excerpt: http://blog.csdn.net/defectfinder/article/details/51734690

CSS selectors are also a very useful way to locate elements, even more powerful than XPath. In automation we use CSS selectors to locate page elements it is important to keep in mind a guideline: unique positioning, often using CSS selectors to modify the style as much as possible to select elements, but in automation, you must be uniquely positioned to the element, or automation is likely to fail to find the page element. CSS selectors have many, such as tag selectors, class selectors, ID selectors, relationship selectors, pseudo-class selectors, group selectors, etc., but only need to master a few commonly used to meet the needs of the positioning elements.

Take the following HTML as an example to summarize the use of CSS selectors:

1 <DivID= "Menu"class= "Menu"title= "Menu">    2     <ul>    3         <binID= "First"class= "catagory book">    4             <aID= "book"></a>    5         </Li>    6         <LiID= "Second"class= "Catagory Food">    7             <aID= "Food"></a>    8         </Li>    9         <Li>    Ten             <aID= "Clothes"></a>     One         </Li>     A         <Lititle= "submenu">     -             <aID= "Furniture"></a>     -         </Li>     the     </ul>     -     <ahref="....">Welcome to our Store</a>     - </Div>   

1. Tag Selector

Use HTML tags to select elements, for example:

Driver.findelement (By.cssselector ("Li")); All LI elements will be selected

Driver.findelement (By.cssselector ("a")); All a elements will be selected

2. Class Selector

Use the class name to select an element, using the method:. Class, for example:

Driver.findelement (By.cssselector ("Div.menu")); The DIV element driver.findelement (by.cssselector (". catagory") will be selected as the Class menu. The element with ID first and the element with ID second will be selected because the class of these two elements contains catagory

3. ID Selector

Use the ID to select an element, using the method: #id, for example:

Driver.findelement (By.cssselector ("a#clothes")); The A element with ID clothes is selected

Can also be written as:

Driver.findelement (By.cssselector ("#clothes")); Because the ID is unique, the A element with ID clothes is selected

3. Relationship Selector

a.div,p function: Select all DIV elements and P elements

B.div>p: Selects all P elements in a div's immediate child element

C. Div P Action: Select all the P elements in the descendant elements of the Div

4. Property Selector

A. [Title] Function: Select all elements with the title attribute

b. [title= ' menu '] function: Select all elements with the title attribute value equal to ' menu '

c. [title~= ' menu '] function: Select all the title attribute values contain the element of menu, note: menu must be a word,

And there are spaces separated from other words

D. [title*= ' menu '] function: Select all the title attribute values contain the element of the menu, note: The menu is substring instead of word

E. [title|= ' Menu '] function: Select all the title attribute values beginning with the menu or equal to the menu element

F. [title^= ' Menu '] role: Select all elements with the title attribute value beginning with menu

G. [title$= ' Menu '] function: Select all elements with the title attribute value ending with menu

H. div[title= ' Menu ' function: Select all div elements with the title attribute value equal to menu

4. Universal Selector

Method: *

For example: Div ul *; Select all sub-elements under Div ul, including the Li and a elements

5. Pseudo-Class selectors

A lot of pseudo-class selectors, only summed up under used: Nth-child (n)

For example: P:nth-child (2) Effect: Select the P element as the second child

Positioning page elements with CSS selectors