1. CSS selectors
Earlier we learned select elements according to id, class attributes, tag name.
If we do not want to select elements id, class attribute, or we do not want to choose some of the elements have the same id, class attribute values, how to do it?
At this time we usually can select elements by CSS selector syntax.
1.1 CSS Selector syntax elements principle selection
HTML often want to specify certain elements to display , such as red foreground text color, background color is black, Microsoft elegant black font and so on.
CSS must then tell the browser: To choose which elements to use such a display style.
For example, the following figure, why Wolf Red Wolf small gray will be displayed in red it?
html code:
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .wolf{ color: red; } </style> </head> <body> <div class="raise"><span>喜羊羊</span></div> <div class="raise"> < Span > US sheep </ span > </ div > < div class = "The raise" > < span > Warm Goat </ span > </ div > < div class = "Wolf" > < span > Wolf < / span > </ div > < div class = "wolf" > < span > red wolf </ span > </ div > <div class="wolf"><span > small gray </ span > </ div > </ body >
Because the blue box inside with css style class value of the element specifies the wolf, to be displayed in red.
Which is a blue box inside .wolf CSS Selector, or CSS selectors.
CSS Selector syntax is used to select elements.
Since CSS Selector syntax is inherently browser is used to select the element, selenium can use it naturally used in automation, to choose the elements to be operated.
As long as CSS Selector syntax is correct, Selenium can be selected to that element.
CSS Selector very powerful, automated learning Selenium Web must learn CSS Selector.
Select a single element method is by CSS Selector:
find_element_by_css_selector(CSS Selector参数)
Select all the elements method is:
find_elements_by_css_selector(CSS Selector参数)
CSS Selector selected elements are very flexible and powerful, you can see from the following example.
1.2 The selected element tag name, id, class
CSS Selector can also be selected according to the element tag name, id and class attributes property.
1.2.1 Select elements based on name tag
tag name selected according to the CSS Selector syntax elements is very simple to write directly on the tag name.
For example, to select all of the tag called div elements, it can look like this:
elements = wd.find_elements_by_css_selector('div')
Equivalent to
elements = wd.find_elements_by_tag_name('div')
1.2.2 Select element according to the id attribute
The selected element id attribute grammar is a plus id number in front of the pound sign: #id value
The following such elements:
<input type="text" id='searchtext' />
You can use #searchtext such CSS Selector to select it.
For example, we want the id of the input text box searchtext Hello, complete Python code is as follows:
from selenium import webdriver wd = webdriver.Chrome(r'E:\webdrivers\chromedriver.exe') wd.get('http://127.0.0.1:8020/day01/index.html') element = wd.find_element_by_css_selector('#searchtext') element.send_keys('你好')
The class attribute element selected 1.2.3
The selected element is in front of the class attribute grammar class value plus one point: .class value
To select all the elements class attribute value wolf wolf in addition to write:
elements = wd.find_elements_by_class_name('wolf')
Also can be written:
elements = wd.find_elements_by_css_selector('.wolf')
Because it is the choice of all qualified, so use find_elements instead find_element.
1.3 Select sub-elements and descendant elements
HTML, the inner element may contain other elements, such as the following HTML fragment:
<div id='container'> <div id='layer1'> <div id='inner11'> <span>内层11</span> </div> <div id='inner12'> <span>内层12</span> </div> </div> <div id='layer2'> <div id='inner21'> <span>内层21</span> </div> </div> </div>
The following passage somewhat convoluted, please read carefully:
id contains two div elements with id layer1 and layer2 of the container div element.
This included is included directly, with no other elements of the hierarchy. So id for the two div elements layer1 and layer2 are id is a direct child of the div element of the container.
The id for the div element layer1 in turn contains two elements div id is inner11 and inner12 of. None of the other levels of elements, all of which contain elements direct child relationship is the relationship.
id of the div element layer2 also contains the id of the div element inner21. This relationship also includes a direct child of the relationship.
For the id of the div element for the container, id is inner11, inner12, elements inner22 span of two types of elements and not its direct child elements, because in the interval of several layers.
Although not a direct child elements, but they are still inside the container, and can be called its descendant elements .
Also includes direct descendant elements child elements, such as id for the two div elements layer1 and layer2, but also can be said that id is a direct child of container div element, but also the descendants of child elements.
If the element 2 is a direct child of the element 1, CSS Selector to select the child element of the syntax is as follows:
Element 1> element 2
Intermediate with a greater-than (number could be interpreted as an arrow)
Note that the final element selected element 2 is, and requires the element 2 is a direct child element 1.
Also support select more levels, such as:
Element 1> Element 2> element 3> elements 4
Select the element which is a child element of the element 1 inside the child elements 2 3 4 inside the child element, the final element 4 is selected elements.
If the element 2 is an element descendants of the element 1, CSS Selector to select progeny element syntax is:
Element 1 Element 2
Intermediate is separated by one or more spaces
The final element is the selected element 2, and requires the element 2 is an element of a descendant elements.
Also support select more levels, such as:
Element 1 Element 2 Element 3 Element 4
The final element is the element of choice 4.
1.4 based on attribute selection
Property id, class all web elements, because they are very common property, so css selectors specifically provides syntax id, class selected based.
Then the other attributes?
such as
< A the href = "https://www.cnblogs.com/liuhui0308/" > love small gray programmed </ A >
According to inside href choice, you can select the device you use css?
of course can!
css selector selects an element supported by any attribute grammar is a square brackets [].
For example, to select a top element, can be used
[href="https://www.cnblogs.com/liuhui0308/"]
This expression means that the choice href attribute value https://www.cnblogs.com/liuhui0308/ elements.
The complete code is as follows:
from Selenium Import the webdriver WD = webdriver.Chrome (R & lt ' E: \ webdrivers \ chromedriver.exe ' ) wd.get ( ' http://127.0.0.1:8020/day01/index.html ' ) # according to the attribute element selection element wd.find_element_by_css_selector = ( ' [the href = "https://www.cnblogs.com/liuhui0308/"] ' ) # print out the element corresponding HTML Print (element.get_attribute ( ' the outerHTML ' ))
Of course, preceded by a restriction tag name, such as div [class = 'SKnet'], selects all tag named div, and a class attribute value SKnet element.
Property values may be single or double quotes.
The selection attributes, the attribute value can not be specified, such as [href], represents select all elements having the href attribute called, regardless of their values Yes.
CSS can also choose to attribute value contains the elements of a string.
For example, to select a node, which miitbeian href attribute contains the string, this can be written:
a[href*="miitbeian"]
You can also select the property value begins with a string of elements
For example, to select a node, which the href attribute begins with http, you can write:
a[href^="http"]
You can also choose to end the attribute values of a string element
For example, to select a node inside the href attribute that ends gov.cn, you can write:
a[href$="gov.cn"]
If the element has a plurality of attributes:
< Div class = "Misc" ctype = "Gun" > Shamozhiying </ div >
CSS selector element can be specified to simultaneously select a plurality of properties have limitations, such as
div[class=misc][ctype=gun]
1.5 validation CSS Selector
So how do we verify whether the correct syntax for CSS Selector choose the elements we have to choose it?
Of course you can like this, write Python code, run to see whether the operation was successful.
= wd.find_element_by_css_selector Element ( ' #searchtext ' ) element.input ( ' Enter text ' )
If successful, the description of the syntax element is the correct choice.
But this is too much trouble, wasted a lot of time.
When we automate development, a large number of select elements of the statement, one must verify this, it is a waste of time.
Because CSS Selector is directly supported by the browser, the browser can verify the developer toolbar.
We can open a Web site, press F12 to open the Developer toolbar.
If we want to verify the following expression
#bottom > .footer2 a
Select whether this element
< A the href = "https://www.cnblogs.com/liuhui0308/" > love small gray programmed </ A >
html code:
<div id='bottom'> <div class='footer1'> <span class='copyright'>版权</span> <span class='date'>发布日期：2019-11-26</span> </div> <div class='footer2'> <span>主页 <a href="https://www.cnblogs.com/liuhui0308/">>A</Love small gray programmed </span> </div> </div>
We can do this:
Click Elements label, press the Ctrl key and the F key, the search box will appear at the next arrow:
We can enter any CSS Selector expression in it, if they can choose to elements inside the red box on the right will show a similar 1 of 1 such content.
behind the digital representation of such an expression to a total of several elements selected
in front of a digital representation of the currently highlighted in yellow is the first of several elements
1 of 1 above figure refers: CSS selection syntax #bottom> .footer2 a co-option into a web page on the current element, money is first highlighted one.
If we enter the span will find that you can choose to three elements
