In everyday web source code, it is most foolproof to locate elements based on their ids, which are not repeated on a single page. However, in practice, many front-end developers do not write the id attribute for each element. Usually a piece of html code is as follows:
<div class="sui-tips s-isindex-wrap sui-tips-exceedtipnews" style="display: none; width: auto;"> <div class="sui-tips-arrow" style="left: 15px;"><em></em></div> <div class="sui-tips-body">I've been summoned too many times today.， Come back tomorrow.！`(*∩_∩*)′</div> </div>
In this example, the outermost div does not have an id attribute, at this point, you can locate the element based on the class attribute. The common selenium way of positioning an element based on class is as follows:
i. driver.find_element_by_class_name("classname")
But so many times, a lot of side-by-side elements such as list forms, class are sharing the same, such as:
At this point driver.find_elements_by_class_name("classname") can come in handy, the method can return a list list, then all the methods for the list on it are equally applicable. For example, if we know that the element we want to locate is the nth element on the page, we can locate it like this:
II. driver.find_elements_by_class_name("classname")[n] (note: elements, not elements)
It should be noted that using the above method, even if there is only one element in the page, the result is still a list object, but the length is 1.
Of course, if you are familiar with the css method, you can also locate it through css, selenium is also supported, css, "." followed by the class name can be a conventional way to write the following:
surname San、driver.find_element_by_css_selector('.dtb-style-1').click()
If your example is special enough that there are multiple classnames for this element, the above method can also be used with multiple "." for parallel concatenation. E.g.:
driver.find_element_by_css_selector('.-dragColumns').click()
There is another method that also supports the case of multiple classes, still the css attribute method:
driver.find_element_by_css_selector("[class='dtb-style-1 table-dragColumns']") Just separate them with spaces.
If you are not familiar with css attributes, it does not matter, the powerful Chrome browser can automatically help you generate elements of xpath, css and other attributes. Take the Baidu home page source code as an example, in the page source code file, locate the element, right click, the effect is as follows:
Generated code copy, for this scenario can be used directly, but in view of the web page is updated very frequently, it is recommended that the w3c under a simple study of xpath, css selector and other important methods, so that we can write a very flexible code, the page will have a stronger adaptability to the subtle adjustments.
Finally, we can also use the powerful xpath to locate the element, if the element has more than one class, we only need to select one of them to put into the xpath, otherwise the program will error. The example is as follows:
IV. driver.find_element_by_xpath('//div[@class="u_sp"]/a[1]').click()
So many methods, xpath is the most flexible, because xpath built-in many functions, in some occasions you may need to rely on this flexibility, "flexibility" will inevitably bring complexity. Nevertheless, I still encourage you to work in practice, each method of positioning elements to learn, many times, you will find that you carefully write the method accidentally does not work, this time to master a variety of positioning methods, it is particularly important.
With these skills, from now on in the world of python selenium, locating elements based on the class attribute will seem so easy.
This is the whole content of this article.