汇总selenium利用xpath等找网页节点的方法

一、通过子节点定位父节点,模拟建立一个test.html

html 复制代码
<!--子节点定位父节点-->
<html>
<body>
<div id="A">
    <div>定位到这里1
        <div>定位到这里2
            <div>定位到这里3
                <div id="C">子节点</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

直接上代码

html 复制代码
from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get('D:\\LC\\PycharmProjects\\xpath_css_dingwei\\test.html')
#  .代表当前节点, ..代表父节点
node=driver.find_element(By.XPATH,'//div[@id="C"]/../..')
str=node.text
print(str)#会输出父节点内所有的文本
str_list=str.split('\n')
print(str_list)#如想只输出指定父节点内的文本,先拆分str,然后指定输出,如str_list[0]


# node=WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.XPATH, '//div[@id="C"]/../..')))
# print(node.text)

driver.quit()

输出结果:

二、利用节点属性来定位,模拟建立一个login.html

html 复制代码
<button onclick="alert('你点击了按钮')" data-var="loginBtn" 
        data-type="click_navMembership" data-path="sign in" 
        class="nav-btn p0-sm body-3 u-bold ml2-sm mr2-sm" 
        data-pre="ILink">
    <span>登录</span>
</button>

利用节点的指定属性来定位,代码如下

html 复制代码
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
import time

driver = webdriver.Chrome()
driver.get('D:\\LC\\PycharmProjects\\xpath_css_dingwei\\login.html')

#利用某个指定属性来定位,如data-var属性
button = WebDriverWait(driver, 5).until(
    EC.element_to_be_clickable((By.XPATH, "//button[@data-var='loginBtn']"))
)
button.click()
time.sleep(5)

driver.quit()

如果一个属性下有多个值,比如class="nav-btn p0-sm body-3 u-bold ml2-sm mr2-sm" 怎么办呢?

第一种,必须将所有的值都写上才能定位成功。

html 复制代码
button = WebDriverWait(driver, 5).until(
     EC.element_to_be_clickable((By.XPATH, "//button[@class='nav-btn p0-sm body-3 u-bold ml2-sm mr2-sm']"))
)

第二种,只需要填一个值就行(其实填包含于就行,如"//buttoncontains(@class,'nav-btn p0-')")

html 复制代码
button = WebDriverWait(driver, 5).until(
     EC.element_to_be_clickable((By.XPATH, "//button[contains(@class,'nav-btn')]"))
)

第三种,有时可能只需要选择其中几个值,此时需要使用and

html 复制代码
button = WebDriverWait(driver, 5).until(
     EC.element_to_be_clickable((By.XPATH, "//button[contains(@class,'p0-sm') and contains(@class,'ml2-sm')]"))
)

三、利用节点文本来定位,仍使用login.html测试代码

html 复制代码
#本段代码为示例代码,与login.html无关
#新selenium中,find_element_by_xpath已经无法使用,需要By.XPATH替代
driver.find_element_by_xpath('//a[text()="使用电子邮件登录。")]')
或者
driver.find_element(By.XPATH, '//a[contains(text(), "下一页")]')

下面实测:仍使用login.html测试代码如下:

html 复制代码
#完美运行,模糊包含定位。注意button内部还有span,不能省略掉span
button = WebDriverWait(driver, 5).until(
     EC.element_to_be_clickable((By.XPATH, '//button/span[contains(text(), "登录")]'))
)

不过以下精确匹配代码却报错,仍未解决,期待博友指教。

html 复制代码
button = WebDriverWait(driver, 5).until(
      EC.element_to_be_clickable((By.XPATH, '//button/span[text()="登录")]'))
)

节点定位花样非常多,后续继续写。

2023/9/15继续更新:针对上述问题,我又设置了个login_2.html,增加了一个标签<a>

复制代码
<button onclick="alert('你点击了按钮')" data-var="loginBtn" 
        data-type="click_navMembership" data-path="sign in" 
        class="nav-btn p0-sm body-3 u-bold ml2-sm mr2-sm" 
        data-pre="ILink" myname="prev_12345678">
    <span>登录</span>
</button>
<a href="http://www.baidu.com">百度搜索</a>

采用文本精确匹配定位,程序运行正确。

复制代码
from selenium import webdriver
from selenium.webdriver.common.by import By
import time

driver = webdriver.Chrome()
driver.get('D:\\LC\\PycharmProjects\\xpath_css_dingwei\\login_2.html')
node=driver.find_element(By.XPATH,"//a[text()='百度搜索'] ")
node.click()


time.sleep(5)
driver.quit()

文本精确匹配定位,测试button,实测也是正确的。

复制代码
#文本精确匹配定位
node_button=driver.find_element(By.XPATH,"//button/span[text()='登录'] ")
node_button.click()
相关推荐
念越1 小时前
接口自动化测试从入门到实战:接口用例设计、Requests、Pytest、YAML、JSON Schema 与 Allure 报告
python·测试工具·自动化·json·pytest
传人1 小时前
悬停旋转放大和位移效果如何写
前端·javascript·css
geovindu6 小时前
css: Timeline scribble
前端·css·iphone
易朵朵1 天前
CSS 格式化上下文
css·vue.js
COOLMO研究AI1 天前
企业官网服务页的信息架构怎么设计:从用户问题到语义化 HTML
前端·css·html
ysu_03142 天前
Postman接口调试实战指南-从HTTP请求到环境变量-Collection与自动化测试
网络·网络协议·测试工具·http·api·postman·可用性测试
DsirNg2 天前
断点不该认识设备:组件布局的容器状态治理
css·前端工程化·组件化·响应式布局·css grid·设计系统·container queries
溪语流沙2 天前
【每天一个CSS | Day11】赛博朋克故障风文字:红青分离 + 切片抖动
前端·css
ZhangJun953 天前
从零写一个类鲁大师的硬件检测小工具,软件附上,可直接使用
windows·测试工具·电脑·笔记本电脑·硬件架构
utmhikari3 天前
【AI原生】借助AI之力优化个人博客前端样式
前端·css·hexo·next·个人博客·ai-native·vibe coding