Cssselector positioning in Selenium

I. Why use Cssselector to locate elements?

Currently for some general positioning methods are: By.id, By.name, by.linktest (for <a> tags), by.classname

For the less well-positioned, such as: No ID, Name, class positioning method, or ID, name, class value value display repetition, not too convenient to write the positioning method, so you can consider other positioning methods. The following is a main introduction to how cssselector resolves the value values of ID, name, and class to display duplicate positioning methods.

Two. Basic syntax

E	Tag selector that matches all elements that use the e tag
E F	Descendant element selector that matches all f elements that are descendants of the e element, E and Separated by a space between f
E > F	child element Selector, matching all e element's child elements F
E + F	Adjacent element selectors, matching the sibling element F immediately following the E element (only Match the first one)
E ~ F	Sibling element selector that matches all of the sibling F elements after the E element
. Info class	Selector that matches all elements of the class attribute that contain info
#footer ID	Selector that matches all elements of the id attribute equal to footer
E[att= ' Val ']	The value of the attribute att is the e element of Val (case-sensitive)
E[att^= ' Val ']	The value of the attribute ATT begins with the e element (case sensitive) that starts with Val
E[att$= ' Val ']	The value of the attribute att ends with a val e element (case-sensitive)
E[att*= ' Val ']	The value of the attribute att contains the e element of Val (case-sensitive)
e[att1= ' v1 '][att2*= ' v2 ']	Property ATT1 value of V1,att2 contains V2 (case-sensitive)
E:contains (' xxxx ')	Content contains the e element of XXXX (obsolete pseudo-class, no longer supported)
: Nth-of-type and: Nth-child	is distinguished by "type", meaning that Ele:nth-of-type (n) refers to the nth ele element under its parent element, Ele:nth-child (n) refers to the nth element under its parent element and the element is ele, if not, the selection fails.

Case diagram:

Three. CSS common positioning method Introduction

1. E represents the label.
2. E>f:f is also the representative of the label, called the descendant element, F is the descendant element of E, saying that a little bit f is the son of E, F follows the first element behind E, directly below the next level.
3. E F: A multilayer label, called the descendant element. Popular is called ancestral generation, such as grandfather and grandson relationship.
4. E+f: Matches the sibling element F (only the first one) immediately following the E element, called the adjacent element selector. The popular point explanation e is eldest brother, behind has several younger brothers, only takes its recent one brother F.
5. E ~ F: Sibling tag, called sibling element selector. Popular is called brotherly relationships, such as brother and brother relationships.
6. E[att= ' val ': E for the label, ATT for the attribute, and Val for the value of the attribute. Example: span[class= ' Ui-tg-text ')
7. e[att1= ' v1 '][att2*= ' v2 ']: Multi-attribute selector, which has multiple properties for a label, and the relationship satisfies the condition at the same time.
8. . Info class: Points represent class. For example in the above diagram:. ui-tg-text
9. #footer ID: #号代表id. For example in the diagram above: #operation
10. Ele:nth-of-type (n) refers to the nth ele element under its parent element. For example: There are 10 div tags at the same level, so you only need to locate 6 of them, and the code can write this: Div:nth-of-type (6), the data in parentheses represents the index for the nth element.

For example:

Drvier.findelement (By.cssselector ("#operation a Span~span")). Click ();

Cssselector positioning in Selenium