"Selenium Actual Combat Column" will record the selenium actual combat (Python version) process and solutions to various problems.
The general plan is as follows:
- Use the Element UI component library to link operations on various elements
- Use a real website to automate part of the page UI
The version used is as follows:
- Python 3.10.6
- selenium 4.0.5
selenium action button component
A demo has been successfully run in the previous chapter. This chapter begins to enter the actual combat stage.
First, visit the official website of Element UI to find the button component.
The next task is to obtain the 4 [Success] buttons in the "Basic Usage" in various ways, as shown in the figure below:
From the source code of selenium, you can see that it supports 8 ways to get elements,
The basic usage is as follows:
- ID: get the element according to the id of the element tag
- XPATH: get the element according to the xpath path of the element in the DOM structure
- LINK_TEXT: locate hyperlink element, exact match
- PARTIAL_LINK_TEXT: locate hyperlink elements, fuzzy matching
- NAME: get the element according to the name of the element tag
- TAG_NAME: get the element according to the tag name
- CLASS_NAME: get the element according to the class of the element tag
- CSS_SELECTOR: Get elements through CSS selectors
In fact, if you continue to look at the source code of selenium, you will find that ID, CLASS_NAME, and NAME all pass CSS_SELECTOR in the end, but selenium provides simpler calling methods for these three methods.
Next, I will explain in detail how to obtain the 4 [Success] buttons in the "Basic Usage" and the solutions to the problems encountered in the operation.
Get elements according to ClassName
First, right-click on the button and select [Inspect], and the developer tool will jump to the element label corresponding to the button to analyze the element.
The corresponding attributes can be seen on the element tab.
Because there is a class on the button label, first try to get the element from the ClassName. Don’t worry about writing selenium code first, js itself provides a method to obtain components, we can first open the console through the browser developer tool, and try to get the desired element through js code first.
You can see that what is obtained through ClassName is a group of elements, move the mouse to the corresponding element, and the left side will see which element is positioned in real time. Through observation, we can see that except for the first button element, the remaining three elements to be positioned have their own ClassName, which can be obtained through js again.
By trying to find the following two ClassNames we can locate the element we want.
Note here that there are el-button--success is-roundtwo class names instead of a single class name is-round. A single class name is-roundalso obtains a set of elements, which can be tested on the console by yourself.
Next, use selenium to get elements. The following code looks fine at first glance, but it is actually problematic. You can try it yourself first.
If you run the above code, you will find that the element cannot be located. Let me tell you what is wrong and how to solve it. Going back to the source code above, the following two methods are actually equivalent.
Friends who are familiar with CSS should quickly understand where the problem lies. In CSS selectors, spaces represent descendant selectors. What is needed now is to determine an element through two class names, so the correct syntax for CSS selectors is .el-button--success.is-round, Correspondingly, you know how to obtain ClassName, as follows:
The complete code is as follows:
from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By
service = Service(executable_path='/Users/huyanping/Softwares/chromedriver')
driver = webdriver.Chrome(service=service)
driver.get("https://element-plus.gitee.io/zh-CN/component/button.html")
# 隐式等待，暂时可以先不用管
driver.implicitly_wait(10)
# element-ui页面会请求一些外部页面，导致需要很长时间的等待，
# 可以设置超时时间避免需要等待很长时间，但是可能会导致元素还没加载出来，可以根据自己的网络对超时时间进行调整
driver.set_page_load_timeout(6)
driver.find_element(By.CLASS_NAME, 'el-button--success.is-round').click()
# 等价于
# driver.find_element(By.CSS_SELECTOR, '.el-button--success.is-round').click()
# 因为点击操作执行完成后，很快就会关闭浏览器无法看到效果，调试的时候可以先注释掉
# 但是要记得自己手动关闭浏览器，避免开很多的浏览器未关闭消耗电脑内存
# driver.quit()
get multiple elements
Continue to analyze the elements searched through js in the console, and you can see that el-button--success is-plainthe first element in the obtained element group is what you want.
Therefore, you can combine the above ClassName method to get multiple elements, and then get the first element from the list.
elements = driver.find_elements(By.CLASS_NAME,'el-button--success.is-plain')
elements[0].click()
Obtain according to xpath (including xpath optimization ideas)
Now that the following three elements have been obtained, the top element adopts a new scheme, that is, xpath. After right-clicking the element, you can click [Inspect], and then [Right-click] on the element label, and select to copy xpath as follows.
The most "simple" way is to directly search for elements through the copied xpath path:
driver.find_element(By.XPATH,'//*[@id="app"]/div/main/div/div/div[1]/div/div[1]/div[1]/div[1]/button[3]').click()
But this method is very unstable. Once the DOM structure changes, such as adding an additional layer of <div> tags, the above method will not be able to obtain elements. Therefore, the method of obtaining elements through xpath still needs to optimize xpath. The main idea is as follows: first find the determined element, and then use the relative path to search. $x('xpath')You can debug first through the syntax in the console , as follows:
//*[@id='app']: Find any element whose id is app. The specific xpath syntax can be learned on the rookie tutorial . By analyzing the DOM path of the element, it can be modified to the following xoath path:
After the console debugging is passed, it can be accessed through the code.
driver.find_element(By.XPATH,'//*[@id="app"]//*[@class="example-showcase"]//*[@class="el-button el-button--success"]').click()
The above is the plan and idea of the four [Success] button component elements in the "Basic Usage", you can try it yourself~