Web的自动化测试工具Selenium——第03节 定位页面元素-灵析社区
熊Sir第03节 定位页面元素
定位一个元素用 element,定位一组元素用 elements
1. 打开指定页面
1. 不切换新窗口
要使用 Selenium 来打开指定页面，首先需要初始化一个 WebDriver 实例，然后使用该实例打开目标页面。下面是一个使用 Python 和 Selenium 的示例，演示如何打开指定的页面：
from selenium import webdriver
# 初始化一个WebDriver实例，这里使用Chrome作为浏览器
driver = webdriver.Chrome()
# 打开指定的页面，将URL替换为你要访问的网页地址
url = "https://www.example.com"
driver.get(url)
# 在这里，你可以执行与打开页面相关的操作
# 最后，关闭浏览器窗口
driver.quit()在上述代码中，我们首先导入 Selenium 的 webdriver 模块，并初始化了一个 Chrome 浏览器的 WebDriver 实例。然后，使用 get 方法打开指定的页面，将目标网页的 URL 替换为你要访问的网页地址。之后，你可以在页面上执行与你的测试或任务相关的操作，然后使用 quit 方法关闭浏览器窗口
2. 切换新窗口
上面的方法会在当前窗口或标签页中打开一个新的页面，将当前页面替换为新的 URL ，使用 window.open(url) 打开新页面：
driver.execute_script("window.open('https://www.example.com', '_blank');") # 使用JavaScript打开一个新页面这种方法使用 execute_script 方法执行 JavaScript 代码，在新的浏览器窗口或标签页中打开指定的 URL。'_blank' 参数告诉浏览器在新窗口或标签页中打开 URL。这种方式适用于在新窗口中打开页面，而不替换当前页面
请注意，如果你使用 window.open() 方法打开新页面，你可能需要使用 driver.window_handles 和 driver.switch_to.window() 来管理不同窗口之间的切换，就像后面提到的窗口句柄一样。这可以让你在不同的浏览器窗口中执行操作
总之，execute_script 方法通常与其他 Selenium 方法一起使用，用于执行 JavaScript 以实现特定的交互和操作，但它本身不用于打开新页面
3. 保持浏览器窗口打开
默认情况下，Selenium WebDriver 在脚本执行结束后会关闭浏览器窗口，但通过将选项 "detach" 设置为 True，你可以使浏览器窗口保持打开状态，以便手动进行操作
from selenium import webdriver
# 创建ChromeOptions对象
options = webdriver.ChromeOptions()
# 添加选项，防止浏览器自动关闭
options.add_experimental_option("detach", True)
# 初始化一个WebDriver实例，将选项传递给Chrome
driver = webdriver.Chrome(options=options)
# 打开指定的页面
url = "https://www.csdn.net"
driver.get(url)
# 在这里，你可以执行与打开页面相关的操作
# 手动关闭浏览器时，可以保持它打开2. id 定位
要使用 Selenium 通过元素的 ID 进行定位，你可以使用 By.ID 选择器和 find_element 方法。以下是如何通过元素的ID进行定位的示例：
from selenium import webdriver
# 初始化一个WebDriver实例，这里使用Chrome作为浏览器
driver = webdriver.Chrome()
# 打开指定的页面
url = "https://www.example.com"
driver.get(url)
# 通过元素的ID进行定位并执行操作
element = driver.find_element(By.ID, "element_id")
# 在这里，你可以执行与该元素相关的操作，例如单击、输入文本等
element.click()
# 最后，关闭浏览器窗口
driver.quit()在上述示例中，driver.find_element(By.ID, "element_id") 通过元素的ID属性来定位元素，并将其存储在变量 element 中，然后可以执行与该元素相关的操作。记得将 "element_id" 替换为你要查找的元素的实际 ID。
3. name 定位
# 通过元素的name属性进行定位并执行操作
element = driver.find_element(By.NAME,"element_name")4. class 定位
# 通过元素的CSS类名进行定位并执行操作
element = driver.find_element(By.By.CLASS_NAME, ".element_class")5. tag 定位
每个 tag 往往用来定义一类功能，所以通过 tag 来识别某个元素的成功率很低，每个页面一般都用很多相同的 tag
# 通过元素的标签名进行定位并执行操作
element = driver.find_element(By.TAG_NAME,"element_tag")element_tag 在示例代码中代表你要查找的元素的 HTML 标签名，例如 < div >, < a >, < p >等。具体来说，如果你要查找一个 < div > 元素，你可以将 element_tag 替换为 "div" ，如果你要查找一个 < a > 元素，你可以将 element_tag 替换为 "a"，以此类推
6. xpath 定位
XPath（XML Path Language）是一种用于在 XML 文档中定位元素的语言，也适用于HTML 文档，因为 HTML 是一种基于 XML 的标记语言的变体。XPath 是一种功能强大的元素定位方法，它允许你准确地定位网页上的元素，无论它们在文档中的位置如何。以下是XPath定位的一些示例：
1. 通过元素名称定位：
定位所有的链接元素：//a
定位所有的段落元素：//p
定位第一个标题元素：//h1
2. 通过元素属性定位：
定位具有特定 id 属性的元素：
//*[@id='element_id']定位具有特定 class 属性的元素：
//*[@class='element_class']3. 通过文本内容定位：
- 定位包含特定文本的元素：
//*[text()='要查找的文本']定位以特定文本开头的元素：
//*[starts-with(text(), '开头文本')]定位包含特定文本的链接：
//a[contains(text(), '链接文本')]4. 通过元素层次结构定位：
- 定位父元素的子元素：
//div[@id='parent_id']/p（查找 id 属性为 'parent_id' 的 < div > 元素下的所有 < p > 元素）定位祖先元素的子元素
//div[@class='grandparent_class']//span（查找 class 属性为 'grandparent_class' 的祖先元素下的所有< span >元素）5. 使用逻辑运算符：
- 定位同时满足多个条件的元素：
//input[@type='text' and @name='username']（查找type属性为 'text' 且 name 属性为 'username' 的输入框）这些只是 XPath 的一些基本示例，XPath具有非常丰富的语法和功能，你可以根据需要组合和定制不同的条件来定位元素。在Selenium中，你可以使用 find_element + By.XPATH 方法来实现 XPath 定位，例如：
element = driver.find_element(By.XPATH,"//a[contains(text(), '链接文本')]")这将查找包含特定文本的链接元素,你可以根据需要修改 XPath 表达式来定位不同的元素。
6. 示例
<html>
<head>...<head/>
<body>
<div id="csdn-toolbar">
<div class="toolbar-inside">
<div class="toolbar-container">
<div class="toolbar-container-left">...</div>
<div class="toolbar-container-middle">
<div class="toolbar-search onlySearch">
<div class="toolbar-search-container">
<input id="toolbar-search-input" autocomplete="off" type="text" value="" placeholder="C++难在哪里？">根据上面的标签需要定位 最后一行 input 标签，以下列出了四种方式，xpath 定位的方式多样并不唯一，使用时根据情况进行解析即可。
# 绝对路径（层级关系）定位
driver.find_element(By.XPATH,
"/html/body/div/div/div/div[2]/div/div/input[1]")
# 利用元素属性定位
driver.find_element(By.XPATH,
"//*[@id='toolbar-search-input']"))
# 层级+元素属性定位
driver.find_element(By.XPATH,
"//div[@id='csdn-toolbar']/div/div/div[2]/div/div/input[1]")
# 逻辑运算符定位
driver.find_element(By.XPATH,
"//*[@id='toolbar-search-input' and @autocomplete='off']")7. css 选择器
CSS 使用选择器来为页面元素绑定属性，它可以较为灵活的选择控件的任意属性，一般定位速度比 xpath 要快，使用CSS 选择器进行元素定位在 Selenium 中是非常常见和方便的。以下是一些常见的 CSS 选择器示例：
1. 通过元素名称定位：
定位所有的链接元素：a
定位所有的段落元素：p
定位所有的按钮元素：button
2. 通过元素ID定位：
定位具有特定 ID属性的元素：#element_id
element = driver.find_element(By.CSS_SELECTOR,"#element_id")3. 通过类名定位：
- 定位具有特定 class 属性的元素：.element_class
element = driver.find_element(By.CSS_SELECTOR,".element_class")4. 通过元素属性定位：
- 定位具有特定属性值的元素：[attribute=‘value’]
element = driver.find_element(By.CSS_SELECTOR,"[name='username']")5. 通过属性值的部分匹配：
- 定位包含特定属性值的元素：[attribute*=‘value’]
element = driver.find_element(By.CSS_SELECTOR,"[href*='example.com']")6. 通过组合条件：
- 定位同时满足多个条件的元素：.class1.class2
element = driver.find_element(By.CSS_SELECTOR,".element_class1.element_class2")7. 子元素定位：
- 定位父元素的子元素：#parent_id > .child_class
element = driver.find_element(By.CSS_SELECTOR,"#parent_id > .child_class")8. 伪类选择器：
例如 定位鼠标悬停的元素：:hover
element = driver.find_element(By.CSS_SELECTOR,"a:hover")8. link 定位
使用 Selenium 来定位超链接（link）元素通常涉及到查找带有 <a> 标签的元素，这是 HTML 中的链接标签。你可以使用不同的方法来定位超链接，如通过文本内容、链接文本、部分链接文本等。以下是一些常见的链接定位示例：
1.通过链接文本（完全匹配）定位：
使用链接的文本内容来定位，确保文本与链接完全匹配：
# 查找所有链接文本为"下一页"的元素
element = driver.find_elements(By.LINK_TEXT, "文本")2.通过链接文本（部分匹配）定位：
使用链接的部分文本内容来定位，可以匹配链接文本的一部分：
element = driver.find_element(By.PARTIAL_LINK_TEXT,"部分文本")例如，如果你的链接文本是"点击这里以获取更多信息"，你可以使用"点击这里"或"获取更多信息"来进行部分匹配。
这些方法非常方便，特别是当你知道链接的文本内容时。但请注意，它们对文本大小写敏感，所以确保文本内容的大小写与链接文本匹配。
要查找多个链接，你可以使用 find_element**s**(By.LINK_TEXT, "文本") 或 find_element**s**(By.PARTIAL_LINK_TEXT,"部分文本")，它们会返回一个元素列表，你可以在列表中迭代查找多个链接元素。
示例：
elements = driver.find_elements(By.PARTIAL_LINK_TEXT,"部分文本")
for element in elements:
print(element.text)这将打印所有包含"部分文本"的链接文本的链接元素。
9. 示例 有道翻译
访问有道翻译网站，输入单词，并获取翻译后的内容
import time
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
# 创建ChromeOptions对象
options = webdriver.ChromeOptions()
# 添加选项，防止浏览器自动关闭
options.add_experimental_option("detach", True)
# 创建Chrome WebDriver
driver = webdriver.Chrome(options=options)
# 打开有道翻译页面
driver.get("https://fanyi.youdao.com/")
# 等待输入框可见
input_element = WebDriverWait(driver, 10).until(
EC.presence_of_element_located((By.ID, "js_fanyi_input"))
)
# 输入内容
input_element.send_keys("hello")
# 如果有广告弹出框，关闭它
try:
close_btn = driver.find_element(By.CSS_SELECTOR, ".close")
close_btn.click()
except Exception:
pass # 如果没有广告，继续执行
# 等待翻译结果出现
transTarget = WebDriverWait(driver, 10).until(
EC.presence_of_element_located((By.ID, "js_fanyi_output_resultOutput"))
)
# 输出翻译结果
print(transTarget.text)
# 关闭浏览器
# driver.quit()
阅读量：2272
点赞量：0
收藏量:3