Cssselector positioning in Selenium

Source: Internet
Author: User

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


Tag selector that matches all elements that use the e tag


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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.