Location Method of Selenium CSS Selector

CSS Selectors

Foreword

In just learning UI Automation for targeting illiterate, the use of plug-in aid plus some understanding of positioning methods, be stumbled used up, as written in the number of cases increases, the stability of positioning method is also more important, only understand some basic orientation knowledge is no longer able to meet the requirements to use Baidu search also mostly foggy to see, so take a moment to gather under the CSS and Xpath (subsequent supplements) both targeting methods, and found that there are still many details need to know (marked in bold), according to learned to use their own methods were divided into three kinds, of course, this does not mean that all CSS positioning methods, refer to the end of the text link more to learn.

1. Basic notation

Tsuhaifu: *

*

* You can use the match to all nodes, that is, all elements on the page

Element: element

div

Element name can be used directly to match all elements of this type, such as div; If you need to match a plurality of spaced apart elements with commas, such as:

em,span

ID：#id

#login

The ID attribute value matching elements in the element, ID, attribute value must match exactly . Unique ID in the CSS, the element comprising try to choose to use the ID attribute ID to target.

Class: .class

.demo

The class attribute value matching elements in the element, when there are multiple class attribute value, and wherein a must exact match , a plurality of spaced apart matching the class name using a comma

Properties: [attr]

*[href]

The above expression can match the attributes of all the links containing elements

Attribute selection by attribute name or attribute value matching elements already present, is a description of the specific element node

And the class ID can be used in conjunction with the selector element

2. Description Node Method

I.e. nodes described method further description of the elements, mainly for the attribute, the attribute is added to the selector

Single attribute: [attr = value]

h2[class=demo]

H2 element comprising matching the attribute class and the value of the demo

note:

Caution:

1. Note that the value must be a whole match , like class multi-use space-separated values can not match (refer to attribute fuzzy match)
2. Because the attribute value need not quoted, the attribute value contained in the # characters, and a space is not applicable, as the properties herf

A plurality of attributes: [attr = value] [attr = value]

div[class=demo][name=test]

div element matched to the name and class containing properties and values ​​of the test and demo

Note that use and consistent properties and a single point, but a plurality of different attribute names added

Attribute value fuzzy match

HTML Sample Code

<div class="one two three">元素A</div>
<div class="test-one two">元素B</div>

1. [attr~=value]

div[class~=one]

Matched to the element A, an attribute value to a space for separated list, and which can be matched to a value

2. [attr|=value]

div[class|=test]

To match the elements B, to an attribute value prefixed value and using a hyphen '-' connected

[attr^=value]

div[class^='on']

Match to the element A, an attribute value is an element "value" at the beginning of

[attr$=value]

div[class$='wo']

To match the elements B, an attribute value of the element's "value" end.

[attr*=value]

div[class*='one']

A matching element and the elements B, with an attribute value "value" elements

Note: ~ = and | = css2 version is defined, value without using quotes

3. Family Relations Act

<div id=“body”>
    <span>后天更美好</span>
    <p>世界很大<span>我想去看看</span></p>
    <p>海浪向往着陆地</p>
</div>
<span>我向往着你</span>

Child element: element> element

#body>span

The first match to a span element, represents only match as a direct descendant of the first element (child element) of the second element

Descendant elements: element element

#body span

Div to match all of the elements in the span, and the sub-element selector, simply without matches have strict parent-child relationships between elements, it could be the grandson relationship

Siblings: element + element

span+p

Match to the p elements, showing two adjacent elements and, in the same parent element , the second element is selected.

The N-th sub-elements (: nth-child (n))

#body>p:nth-child(2)

P matched to the second element in the div, the second sub-element which matches the parent element, n is from 1 starts

Note that often make the mistake:

1. In addition to siblings, other relationships positioning must specify the parent element (perhaps because brothers can refer to each other is not required)
2. When a match in more than one parent element must be unique, otherwise nth-child is always more
3. Family ties or similar targeting only positioned inwardly (i.e. look inside child or descendant element), can not be located outwardly

reference

CSS Selectors - CSS (Cascading Style Sheets) | the MDN
CSS Selector Reference Manual