The furthest distance in the world is when I see a page element standing there and I can’t locate it!!
Selenium has a variety of methods for locating elements, such as id, name, class_name, tag_name, link_text, etc. However, these methods are too limited. With the development of automated testing and different framework requirements, it will be found that some elements cannot be located by the above methods. Especially for elements like:
1, there is no id, name, class and other attributes;
2. Tag attributes or text information features are absent or not obvious;
3. Tag nesting is complex and has too many layers.
So these methods can be understood, we really need to be familiar with xpath and CSS positioning, generally only need to master one can handle most positioning work.
CSS positioning is basically the same as XPATH positioning, except that CSS positioning expressions have their own format. CSS positioning is faster and more stable than XPATH. The following describes how to use the POSITIONING mode of the CSS
So I’m going to show you how to locate an element using CSS, and the CSS method for locating an element is find _element_by_css_selector, okay
The following is the HTML code of Baidu home page:
1. CSS Location Location using an absolute path
What is an absolute path? An absolute path is a path from the start tag (HTML) to the target element level by level, separated by > or Spaces
For example, use the CSS absolute path to locate the Baidu input box, and enter the content search, the code is as follows:
from selenium import webdriver
import time
# Open browser
driver=webdriver.Chrome()
# Load project address (Baidu)
driver.get("http://www.baidu.com")
time.sleep(3)
# Locate the Baidu input box
driver.find_element_by_css_selector("html body div div div div div form span input").send_keys("Little Dragon Lady")
driver.find_element_by_css_selector("html>body>div>div>div>div>div>form>span>input").send_keys("Little Dragon Lady")
Copy the code2. CSS Location Location by ID or class
The id selector symbol is #, and the class selector symbol is. Again, the id or class selector code is as follows:
Location by id
driver.find_element_by_css_selector("#kw").send_keys("Little Dragon Lady")
#class
4driver.find_element_by_css_selector(".s_ipt").send_keys("Little Dragon Lady")
Copy the code3. Locate the fault based on attributes or some attributes
CSS positioning can be performed by attributes other than element ID and class, by attributes that are unique to an element, or by partial attribute values. By partial attribute positioning, there are general matching characters, starting with character ^ to match from the beginning of the string, starting with character * to match at the end of the string, and ending with character $to match at the end of the string, as follows:
driver.find_element_by_css_selector("[autocomplete='off']").send_keys("Little Dragon Lady")
driver.find_element_by_css_selector("[autocomplete='off'][name='wd' ]").send_keys("Little Dragon Lady")
# 4) Positioning by partial attribute values
driver.find_element_by_css_selector("[autocomplete^='o'][name='wd']").send_keys("Little Dragon Lady")
driver.find_element_by_css_selector("[autocomplete*='f']").send_keys('Little Dragon Lady')
driver.find_element_by_css_selector("[autocomplete$='f']").send_keys("Little Dragon Lady")
Copy the code4. Locate based on the hierarchy
It is usually difficult to uniquely locate an element. In general, the hierarchy is combined with an ID /class/ attribute or a subset of attribute values:
driver.find_element_by_css_selector("form>span>input").send_keys("Little Dragon Lady")
driver.find_element_by_css_selector("form.fm>span>input.s_ipt").send_keys("Little Dragon Lady")
driver.find_element_by_css_selector("form>span>input#kw").send_keys("Little Dragon Lady")
Copy the code5. Locate the node using the sibling node
What is a sibling node? If there are multiple child tags of the same parent element, then these child elements are siblings, such as the following HTML code
# 6) Location via sibling nodes
driver.find_element_by_css_selector("div#u1 a:first-child").click()
driver.find_element_by_css_selector("div#u1 a:nth-child(3)").click()
driver.find_element_by_css_selector("div#u1 a:last-child").click()
Copy the codeConclusion:
So far, I have sorted out the two main methods of locating page elements in Python+Selenium for automated testing. XPATH and CSS are the best methods for locating page elements in Web tests. In my opinion, both methods are good, efficient and easy to solve problems in daily work. Also can reduce the page changes for script maintenance costs, of course, different problems also need different ways to solve the problem, can solve the method is a good method, I hope in the future for positioning elements is no longer a problem. Here we are about to make a comparison of these two positioning methods;
More than 27 million e-books of Selenium Automated Testing (Second Edition) have been downloaded throughout the network. Click here to get the corresponding video learning tutorial free to share! It includes basic knowledge, Linux prerequisites, Shell, Principles of Internet programs, Mysql database, special topics of package capture tools, interface testing tools, advanced Python programming, Web automated testing, APP automated testing, interface automated testing, advanced continuous integration of testing, test framework development and test framework, and performance testing , safety test, etc.
💙 Other columns
Recommended 👍 : “A test engineer of a big factory with a monthly salary of 30,000 yuan quit naked for 3 months, and the real feeling behind delivering food for a living”
Recommended 👍 : “10 minutes to learn how to automate interface building with Jmeter+ Ant + Jenkins”
Recommended 👍 : “Ali first internal test development learning manual (complete version), open download! This is too sweet”
Recommended 👍 : “Since learning this framework, automation + performance is done”