Web Automation-Select Action Element 2

Article Turn Confessions Black Feather teaches Python

Earlier we saw the selection of elements based on the ID, class attribute, tag name.

If the element we want to select does not have an ID or class attribute, then we can usually select the element through CSS selector syntax.

CSS Selector Syntax selection element

HTML often has to specify the display style for some elements, such as the foreground text color is red, the background color is black, the font is Microsoft ya Black and so on.

Then the CSS must tell the browser: which elements to choose, to use such a display style.

The CSS Selector syntax is used to select elements.

Since it can select elements, just as our web automation also chooses elements, so the Selenium specification incorporates CSS Selector into the method of selecting elements.

As long as the CSS Selector syntax is correct, Selenium can choose to that element.

The way to select individual elements through CSS Selector is

find_element_by_css_selector(CSS Selector参数)

The method of selecting all elements is

find_elements_by_css_selector(CSS Selector参数)

CSS Selector selection elements are very flexible and powerful, you can see from the example below.

Web Automation-Select Action Element 2 in this directory

• CSS SELECTOR Syntax selection element
• Select elements based on tag name, ID, CLASS
• Select child elements and descendant elements
• Mixed use
• Validating CSS SELECTOR

Earlier we saw the selection of elements based on the ID, class attribute, tag name.

If the element we want to select does not have an ID or class attribute, then we can usually select the element through CSS selector syntax.

CSS Selector Syntax selection element

HTML often has to specify the display style for some elements, such as the foreground text color is red, the background color is black, the font is Microsoft ya Black and so on.

Then the CSS must tell the browser: which elements to choose, to use such a display style.

The CSS Selector syntax is used to select elements.

Since it can select elements, just as our web automation also chooses elements, so the Selenium specification incorporates CSS Selector into the method of selecting elements.

As long as the CSS Selector syntax is correct, Selenium can choose to that element.

The way to select individual elements through CSS Selector is

Find_element_by_css_selector (CSS selector parameters)

The method of selecting all elements is

Find_elements_by_css_selector (CSS selector parameters)

CSS Selector selection elements are very flexible and powerful, you can see from the example below.

Select elements based on tag name, ID, class

CSS Selector can also select elements based on tag name, ID, and class.

The CSS Selector syntax for selecting elements according to tag name is very simple, directly is the tag name,

For example, to select all the tags named div elements, it can be

elements = driver.find_elements_by_css_selector(‘div‘)

Equivalent to

elements = driver.find_elements_by_tag_name(‘div‘)

The syntax for selecting elements by ID is to precede the ID number with a pound sign:#<id值>

For example, this URL http://www. Python3.vip/doc/tutorial/python/code/sample1.html

There are elements such as the following:

<input type="text" id=‘searchtext‘ />

You can use #searchtext this CSS Selector to select it.

For example, we want to id 为 searchtext enter text in the input box 你好 , the complete Python code is as follows

from selenium import webdriverdriver = webdriver.Chrome(r‘d:\webdrivers\chromedriver.exe‘)driver.get(‘http://www.python3.vip/doc/tutorial/python/code/sample1.html‘)element = driver.find_element_by_css_selector(‘#searchtext‘)element.send_keys(‘你好‘)

The syntax for selecting an element according to class is to precede the class value with a point:.<class值>

For example, this URL http://www. Python3.vip/doc/tutorial/python/code/sample1.html

To select all of the class attribute values for the animal element of the animal except to write this

elements = driver.find_elements_by_class_name(‘animal‘)

You can also write this

elements = driver.find_elements_by_css_selector(‘.animal‘)

Because it is the choice 所有的 , so instead of find_elementsfind_element

Select child elements and descendant elements

In HTML, elements inside an element can contain other elements, such as one of the following HTML fragments

<DivId=' Container '><DivId=' Layer1 '><DivId=' Inner11 '><Span> Inner Layer 11</Span></Div><DivId=' Inner12 '><Span> Inner Layer 12</span> </div > </div> < div id= ' layer2 ' > <div id= ' Inner21 ' > <span> inner 21</< Span class= "NT" >span> </div> </div> </div >                

Web Automation-Select Action Element 2 in this directory

• CSS SELECTOR Syntax selection element
• Select elements based on tag name, ID, CLASS
• Select child elements and descendant elements
• Mixed use
• Validating CSS SELECTOR

Earlier we saw the selection of elements based on the ID, class attribute, tag name.

If the element we want to select does not have an ID or class attribute, then we can usually select the element through CSS selector syntax.

CSS Selector Syntax selection element

HTML often has to specify the display style for some elements, such as the foreground text color is red, the background color is black, the font is Microsoft ya Black and so on.

Then the CSS must tell the browser: which elements to choose, to use such a display style.

The CSS Selector syntax is used to select elements.

Since it can select elements, just as our web automation also chooses elements, so the Selenium specification incorporates CSS Selector into the method of selecting elements.

As long as the CSS Selector syntax is correct, Selenium can choose to that element.

The way to select individual elements through CSS Selector is

Find_element_by_css_selector (CSS selector parameters)

The method of selecting all elements is

Find_elements_by_css_selector (CSS selector parameters)

CSS Selector selection elements are very flexible and powerful, you can see from the example below.

Select elements based on tag name, ID, class

CSS Selector can also select elements based on tag name, ID, and class.

The CSS Selector syntax for selecting elements according to tag name is very simple, directly is the tag name,

For example, to select all the tags named div elements, it can be

elements = driver.find_elements_by_css_selector (' div ')

Equivalent to

elements = driver.find_elements_by_tag_name (' div ')

The syntax for selecting elements by ID is to precede the ID number with a pound sign:#<id值>

For example, this URL http://www. Python3.vip/doc/tutorial/python/code/sample1.html

There are elements such as the following:

<input type= "text" id= ' SearchText '/>

You can use #searchtext this CSS Selector to select it.

For example, we want to id 为 searchtext enter text in the input box 你好 , the complete Python code is as follows

From selenium import webdriver driver = Webdriver. Chrome (R ' D:\webdrivers\chromedriver.exe ') driver.get ('http://www. Python3.vip/doc/tutorial/python/code/sample1.html') element = Driver.find_element_by_css_ Selector (' #searchtext ') element.send_keys (' Hello ')

The syntax for selecting an element according to class is to precede the class value with a point:.<class值>

For example, this URL http://www. Python3.vip/doc/tutorial/python/code/sample1.html

To select all of the class attribute values for the animal element of the animal except to write this

elements = Driver.find_elements_by_class_name (' Animal ')

You can also write this

elements = Driver.find_elements_by_css_selector ('. Animal ')

Because it is the choice 所有的 , so instead of find_elementsfind_element

Select child elements and descendant elements

In HTML, elements inside an element can contain other elements, such as one of the following HTML fragments

<div id= ' container ' > <div id= ' layer1 ' > <div id= ' inner11 ' > <span> inner 11</span> </div > <div id= ' inner12 ' > <span> inner 12</span> </div> </div> <div id= ' layer2 ' > <div Id= ' Inner21 ' > <span> inner 21</span> </div> </div> </div>

containerthe div element with ID contains layer1 layer2 two div elements with ID and. This inclusion is directly contained, and there is no other inclusion level in the middle. So layer1 layer2 the two DIV elements with ID and are the container direct child elements of the DIV element with ID

The layer1 div element with ID also contains inner11 inner12 two div elements with ID and. This containment relationship is also a direct child element relationship

The ID for layer2 the DIV element also contains the ID for inner21 this div element. This containment relationship is also a direct child element relationship

For the container div element with ID, the inner11 element with ID, inner12 inner22 and the two elements above span are not its immediate child elements, because there are several layers in the interval.

Although not a direct child element, they are still container inside, and can be called descendant elements of it.

Descendant elements also include direct child elements, such as the two DIV elements with ID layer1 and layer2 the container direct child element of the DIV element with ID, and also the descendant child element

If 元素1 it is a 元素2 direct child element, CSS Selector chooses the syntax of the child element to be like this

元素1 > 元素2

Middle with a greater than sign (we can understand the arrow number)

The final selected element is element 2

It also supports more levels of choice, such as

元素1 > 元素2 > 元素3 > 元素4

is to choose the child element inside the child element inside the element 元素1 元素2 , the 元素3 元素4 final selection element is the element 4

If 元素1 it is a 元素2 descendant element, the syntax for CSS Selector to select descendant elements is this

元素1   元素2

The middle is one or more spaces separated

The final selected element is element 2

It also supports more levels of choice, such as

元素1   元素2   元素3  元素4

The final selected element is element 4

Mixed use

The great thing about CSS selector is that the above method can be used in combination

For example, we want to select the elements in the following HTML<span class=‘copyright‘>版权</span>

<div id=‘bottom‘>    <div class=‘footer1‘>        <span class=‘copyright‘>版权</span>        <span class=‘date‘>发布日期：2018-03-03</span>    </div>    <div class=‘footer2‘>        <span>备案号            <a href="http://www.miitbeian.gov.cn">苏ICP备88885574号</a>        </span>    </div>        </div>

The CSS selector expression is

div.footer > span.copyright

It can also be simpler:

.footer > .copyright

Of course this is also possible:

.footer  .copyright

Because child elements are also descendant elements

Validating CSS Selector

So how do we verify that the CSS Selector syntax correctly chooses the element we want to select?

Of course, like the following, write the Python code, run to see if it can be successfully operated

element = driver.find_element_by_css_selector(‘#searchtext‘) element.input(‘输入的文本‘)

If successful, the syntax for selecting an element is correct.

But the problem is this: it's too much trouble.

When we are automating the development, there are a lot of choice of elements of the statement, it is necessary to validate each one, it is very time-consuming.

Since CSS Selector is directly supported by the browser, it can be verified in the Browser Developer toolbar.

For example, we use Chrome browser to open http://www. Python3.vip/doc/tutorial/python/code/sample1.html

Press F12 to open the Developer toolbar

If we want to verify the following expression

#bottom > .footer2  a

Can you select this element

<a href="http://www.miitbeian.gov.cn">苏ICP备88885574号</a>

You can do this:

When you click the Elements tab, press the Ctrl key and the F key at the same time, the search box appears at the arrow

We can enter any CSS Selector expression in it, if we can select the element, the red box on the right will show something like 2 of 3 this.

The number that follows is an expression of this type总共选择到几个元素

The number in front indicates that the current yellow highlight is其中第几个元素

In the 1 of 1 meaning of: CSS selector

#bottom > .footer2  a

A total of 1 elements are selected on the current page, and the 1th is currently highlighted.

If we type .plant , we'll find that we can choose to have 3 elements.

Visit White Moon Black feather teaches python see more tutorials

Web Automation-Select Action Element 2