百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

web自动化中使用xpath定位元素_xpath定位iframe

myzbx 2025-02-20 17:01 19 浏览

Selenium怎样利用Xpath定位元素:

XPath定位和Selenium基础元素定位方式一样,都可以获取单个元素或者多个元素的结果集。

例如:

单数定位:
driver.find_element_by_xpath("XPath路径表达式")

复数定位:
driver.find_elements_by_xpath("XPath路径表达式")

一、Selenium中使用XPath查找元素

(1)XPath通过id,name,class属性定位

'''1.学习目标:
    必须掌握selenium中XPath定位方法
2.语法
    2.1 selenium中语法
        driver.find_element_by_xpath("XPath表达式")
    2.2 XPath表达式
        相对路径:标签名+属性
        //标签名[@属性名='属性值']
3.需求
    在百度页面中,使用XPath定位搜索栏
'''
# 1.导入selenium
from selenium import webdriver
from time import sleep
# 2.打开浏览器(获得浏览器对象)
driver = webdriver.Chrome()
# 3.打开页面
url = "http://www.baidu.com"
driver.get(url)
sleep(2)
# 4.用XPath通过id属性定位??
'''
注意:@id='kw',等号两边不要有空格
有时候会报错,SyntaxError:(语法错误)
'''
element1 = driver.find_element_by_xpath("//input[@id='kw']")
# 打印定位元素所在行的源码
print(element1.get_attribute("outerHTML"))
# 5.用XPath通过name属性定位??
element2 = driver.find_element_by_xpath("//input[@name='wd']")
print(element2.get_attribute("outerHTML"))
# 6.用XPath通过class属性定位??
element3 = driver.find_element_by_xpath("//*[@class='s_ipt']")
print(element3.get_attribute("outerHTML"))
# 7.关闭浏览器
driver.quit()
'''
输出结果:



'''

总结:

1.如果不想制定标签名称,可以用*号表示任意标签

2.有时候同一个属性,同名的比较多,这时候可以通过标签筛选下,定位更准一点

3.如果想制定具体某个标签,就可以直接写标签名称

(2)XPath通过标签中的其他属性定位

如果一个元素idnameclass属性都没有,这时候也可以通过其它属性定位到

需求:使用XPath通过其他属性对百度首页搜索框进行定位
# 1.导入selenium
from selenium import webdriver
from time import sleep
# 2.打开浏览器(获得浏览器对象)
driver = webdriver.Chrome()
# 3.打开页面
url = "http://www.baidu.com"
driver.get(url)
sleep(2)
# 4.用XPath通过maxlength属性定位??
'''
注意:@id='kw',等号两边不要有空格
有时候会报错,SyntaxError:(语法错误)
'''
element1 = driver.find_element_by_xpath("//input[@maxlength='255']")
# 打印定位元素所在行的源码
print(element1.get_attribute("outerHTML"))
# 5.用XPath通过autocomplete属性定位??
element2 = driver.find_element_by_xpath("//input[@autocomplete='off']")
print(element2.get_attribute("outerHTML"))
# 6.关闭浏览器
driver.quit()
'''
输出结果:


'''

(3) XPath层级定位

  1. 如果一个元素,它的属性不是很明显,无法直接定位到,这时候我们可以先找它上级(父元素)。
  2. 找到它上级后,再找下个层级就能定位到了。
  3. 如下图图所示,要定位的是input这个标签,它的父元素的class=’s_ipt_wr‘
  4. 要是它父元素的属性也不是很明显,就找它父元素的上级id=form
  5. 于是就可以通过层级关系定位到。

例如:在页面中,定位下面代码片段中的标签

'''
1.学习目标:
    必须掌握selenium中XPath定位方法
2.语法
    2.1 selenium中语法
        driver.find_element_by_xpath("XPath表达式")
    2.2 XPath表达式
        层级定位 :
        //父标签名[@父标签属性名='属性值']/子标签
        注意:最终定位的是子标签
3.需求
    在页面中,使用XPath定位上面代码片段的标签
'''
# 1.导入selenium
from selenium import webdriver
from time import sleep
import os
# 2.打开浏览器
driver = webdriver.Chrome()
# 3.打开注册A页面
url = "file:///" + os.path.abspath("./练习页面/注册A.html")
driver.get(url)
sleep(2)
# 4.XPath层级定位,通过p标签定位字标签input标签
textA = driver.find_element_by_xpath("//p[@id='p1']/input")
print(textA.get_attribute("outerHTML"))
# 6.关闭浏览器
driver.quit()
'''
输出结果:

'''

(4)XPath索引定位

  1. 如果一个元素它的兄弟元素跟它的标签一样,这时候无法通过层级定位到。因为都是一个父亲生的,多胞胎兄弟。
  2. 虽然双胞胎兄弟很难识别,但是出生是有先后的,于是可以通过它在家里的排行老几定位到。
  3. 如下图四胞胎兄弟,可以用XPath定位老大、老二和老三(这里索引是从1开始算起的,跟Python的索引不一样)

示例:定位上图代码中的指定input标签

'''
1.学习目标:
    必须掌握selenium中XPath定位方法
2.语法
    2.1 selenium中语法
        driver.find_element_by_xpath("XPath表达式")
    2.2 XPath表达式
        相对路径:索引定位元素
        //父标签名[@父标签属性名='属性值']/子标签[索引值]   索引从1开始
3.需求
    页面中使用XPath索引定位input标签
'''
# 1.导入selenium
from selenium import webdriver
from time import sleep
import os
# 2.打开浏览器
driver = webdriver.Chrome()
# 3.打开页面
url = "file:///" + os.path.abspath("./练习页面/Test_Xpath.html")
driver.get(url)
# 4.使用xpath索引定位元素
# 定位第一个input标签
# 如果是第一个元素,索引值可以不加。因为不加索引值会选取form下的全部input标签
# 而我们用的是单数定位形式,默认选择第一个。
input_1 = driver.find_element_by_xpath("//form[@id='formID']/input")
print("第一个input标签", input_1.get_attribute("outerHTML"))
# 定位第三个input标签
input_3 = driver.find_element_by_xpath("//form[@id='formID']/input[3]")
print("第三个input标签", input_3.get_attribute("outerHTML"))
# 5.关闭浏览器
sleep(2)
driver.quit()
'''
输出结果:
第一个input标签 
第三个input标签 
'''

(5)XPath逻辑定位

当元素属性与其他元素属性有相同部分的时候,不能只利用一个属性定位,需要多个元素属性来进行定位
语法://标签名[@属性名='值' and @属性名='属性值'and.....]

示例:在下面代码片段中,使用XPath逻辑定位test2标签

    
  			

'''
1.学习目标:
    必须掌握selenium中XPath定位方法
2.语法
    2.1 selenium中语法
        driver.find_element_by_xpath("XPath表达式")
    2.2 XPath表达式
        相对路径:逻辑定位
        //标签名[@属性名1='属性值1'and@属性名2=属性值2]
        使用多属性定位元素
3.需求
    在页面中使用XPath逻辑定位test2标签
'''
# 1.导入selenium
from selenium import webdriver
from time import sleep
import os
# 2.打开浏览器
driver = webdriver.Chrome()
# 3.打开页面
url = "file:///" + os.path.abspath("./练习页面/xpath.html")
driver.get(url)
# 4.定位test2输入框使用XPath逻辑定位
test2 = driver.find_element_by_xpath("//input[@type='text'and@name='user'and@class='login-test']")
print(test2.get_attribute("outerHTML"))
# 5.关闭浏览器
sleep(2)
driver.quit()
'''
输出结果:

'''

(6)XPath模糊匹配定位

当常用方法无法定位到元素时,可以用Xpath定位方法

示例:定位下面代码片段中的指定元素

    
  			
        					Harry Potter
        					29.99
   	 		

    		
        					Learning XML
        					39.95
    		
    		

Learning HTML 99.95

'''
1..学习目标:
    必须掌握selenium中XPath定位方法
2.语法
    2.1 selenium中语法
        driver.find_element_by_xpath("XPath表达式")
    2.2 XPath表达式
        相对路径:模糊查询
        (1)* : 匹配任何元素节点。
        (2)@* : 匹配任何属性节点。
        (3)node() : 匹配任何类型的节点。
3.需求
    在页面中使用xpath的模糊匹配定位目标元素
'''
# 1.导入selenium
from selenium import webdriver
from time import sleep
import os
# 2.打开浏览器
driver = webdriver.Chrome()
# 3.打开注册A页面
url = "file:///" + os.path.abspath("./2.html")
driver.get(url)
sleep(2)
# 4.XPath模糊定位
# 4.1 选取 bookstore 元素的所有子元素。
element_1 = driver.find_elements_by_xpath("//bookstore/*")
for element in element_1:
    print(element.get_attribute("outerHTML"))
# 4.2 匹配绝对路径最外层元素
element_2 = driver.find_element_by_xpath("/*")
print(element_2.get_attribute("outerHTML"))
# 4.3 选取页面中的所有元素。
element_3 = driver.find_element_by_xpath("//*")
print(element_3.get_attribute("outerHTML"))
# 4.4 选取所有带有属性的 title 元素。
element_4 = driver.find_element_by_xpath("//title[@*]")
print(element_4.get_attribute("outerHTML"))
# 4.5 匹配所有有属性的节点(属性模糊查询使用很少)。
element_5 = driver.find_element_by_xpath("//*[@*]")
print(element_5.get_attribute("outerHTML"))
# 4.6 匹配bookstore节点所有孙子辈的id属性值为t2的title节点
textA = driver.find_element_by_xpath("//bookstore/node()/title[@id='t2']")
print(textA.get_attribute("outerHTML"))
# 5.关闭浏览器
driver.quit()

(7)XPath其他定位方式

    
  			
        				
   		 	 

1.contains

contains关键字,是用于模糊查询定位,意思是属性中含有xxx的元素

语法://标签名[contains(@属性名,属性值或者部分属性值)]

示例:定位上面代码片段中的标签

这段代码中的“订餐”这个超链接,没有标准id元素,只有一个relhref,不是很好定位。可以使用XPath的模糊匹配模式来定位它。寻找页面中href属性值包含有order这个单词的所有a元素,由于这个“订餐”按钮的href属性里肯定会包含order,所以这种方式是可行的,也会经常用到。其中@后面可以跟该元素任意的属性名

'''
1..学习目标:
    必须掌握selenium中XPath定位方法
2.语法
    2.1 selenium中语法
        driver.find_element_by_xpath("XPath表达式")
    2.2 XPath表达式
        相对路径:模糊查询定位
        需要使用contains关键字(包含)
        格式://标签名[contains(@属性名,部分属性值)]
        应用:一般适用于id,name,class是动态的情况下
3.需求
    在页面中使用XPath的模糊匹配定位标签
'''
# 1.导入selenium
from selenium import webdriver
from time import sleep
import os
# 2.打开浏览器
driver = webdriver.Chrome()
# 3.打开页面
url = "file:///" + os.path.abspath("./123.html")
driver.get(url)
# 4.使用xpath模糊匹配,使用contains
button = driver.find_element_by_xpath("//a[contains(@href, 'order')]")
print(button.get_attribute("outerHTML"))
# 5.关闭浏览器
sleep(2)
driver.quit()

2.starts-with :搜索元素属性值以什么开头进行模糊定位

# 1.导入selenium
from selenium import webdriver
from time import sleep
import os
# 2.打开浏览器
driver = webdriver.Chrome()
# 3.打开页面
url = "file:///" + os.path.abspath("./123.html")
driver.get(url)
# 4.使用xpath模糊匹配,使用starts-with
'''
寻找rel属性以mi开头的a元素。
其中@后面的rel可以替换成元素的任意其他属性。
'''
button = driver.find_element_by_xpath("//a[starts-with(@rel, 'mi')]")
print(button.get_attribute("outerHTML"))
# 5.关闭浏览器
sleep(2)
driver.quit()

3.Text

直接查找页面中所有的“茶”字,根本就不用知道它是个

  • 元素。这种方法也经常用于纯文字的查找

    示例:

    # 1.导入seleniumfrom selenium import webdriver
    from time import sleep
    import os
    # 2.打开浏览器
    driver = webdriver.Chrome()
    # 3.打开注册A页面
    url = "file:///" + os.path.abspath("./123.html")
    driver.get(url)
    # 4.xpath定位,使用text方法
    button = driver.find_element_by_xpath("//*[text()='茶']")
    print(button.get_attribute("outerHTML"))
    # 5.关闭浏览器
    sleep(2)
    driver.quit()
    '''
    输出结果:
    
  • '''

    文章中总结了一些常用的XPath定位方式的练习。如果需要用到一些特别的用法,可以查看XPath的文档。(XPath地址:
    http://www.w3school.com.cn/xpath/index.asp)

  • 相关推荐

    以文本的方式绘制简单的SVG流程图——flowchart.js

    介绍flowchart.js是在浏览器和终端中运行的流程图DSL和SVG渲染。节点和连接是分别定义的,因此可以重复使用节点,并可以快速更改连接。也可以在DSL中对节点和连接器样式进行细微的更改。Git...

    全国首套构网型SVG在木垒投运

    中新网新疆新闻1月5日电(翟文辉)12月29日,全国首套构网型SVG在新疆木垒华电220千伏四十个井子汇集站并网,本项目是新疆电网继阿克陶构网型储能后又一次构网型支撑项目示范。为全面响应国家“双碳”...

    Popmotion – 小巧,灵活的 JS 运动引擎

    Popmotion是一个只有12KB的JavaScript运动引擎,可以用来实现动画,物理效果和输入跟踪。原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用。Popmoti...

    零基础教你学前端——43、初识SVG

    解决网站图标问题的最佳方案——SVG!SVG是一种基于XML语法的图像格式,英文全称是:ScalableVectorGraphics,即可缩放矢量图,是W3C的一项建议。我们用手机拍摄...

    2.3 文件格式全解:PSD/JPG/PNG/SVG/GIF

    2.3文件格式全解:PSD/JPG/PNG/SVG/GIF一、文件格式的核心意义文件格式是数字图像的存储规则,决定了:-信息保留程度(图层/透明度/动画)-压缩方式与画质损失-跨平台兼容性-...

    vite v6.3.2 发布!HMR 优化+CSS 增强+稳定性提升,前端开发再提速!

    前言:Vite6.3.2来了!2025年4月18日,Vite团队正式发布了v6.3.2版本!虽然是一个小版本更新,但修复了多个关键问题,并带来了性能优化和稳定性提升,让开发体验更丝滑!如果你还...

    一篇文章带你了解SVG 蒙版(Mask)

    SVG蒙版功能可将蒙版应用于SVG形状。蒙版可确定SVG形状的哪些部分可见,以及具有什么透明度。运行效果可以将SVG蒙版视为剪切路径的更高级版本。一、简单的蒙版代码解析:本示例使用ID=mask1定义...

    SVG实现的流程图绘制

    一、项目简介使用SVG技术实现的流程图绘制二、实现功能流程图块生成、连线、拖拽产生相应的xml和xpdl导入导出json数据放大缩小功能保存操作(选择、自动插入、开始结束、普通活动、子活动、块活动、路...

    解锁国内 404 页面:Next.js 设置指南和 33 个有趣 SVG 资源分享

    前言当我们访问网站时,如果访问到不存在的路径时,会出现404错误。为了避免给访问者带来不良体验,设计网站时通常会在页面上展示“404页面不存在”的提示,并引导用户进行返回首页等操作。因此在建立网...

    交互设计师做好动画后,提交给开发的文档有哪些?

    谢邀!简单的说一下自己的看法。首先从制作动画开始。目前制作动画的方式主要有:Gif动画视频动画Web动画,而Web动画又包括:CSS动画、JS动画(Canvas动画、原生JS动画API)、SVG动画等...

    Motion for Vue:为Vue量身定制的强大动画库

    在前端开发中,动画效果是提升用户体验的重要手段。Vue生态系统中虽然有许多动画库,但真正能做到高性能、易用且功能丰富的并不多。今天,我们要介绍的是MotionforVue(motion-v),...

    Web开发人员的福音!8个实用的SVG工具

    SVG可缩放矢量图形(ScalableVectorGraphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C在2000年8月制定的一种新的二维矢量图形格式...

    一键画波浪线、一键多图片调色?这3个网站好玩到停不下来

    作为一个经常收集网站的PPT设计师,无意中发现了一些超级有趣的网站。只要你动手能力足够强,就一定会利用它做出创意作品。不说废话,直接进入主题。1、炫酷的光线绘画网站http://weavesilk.c...

    vite 6.2.5 更新速递:告别SVG路径Bug,构建效率再提升!

    Vite6.2.5更新公告2025年4月3日,Vite团队正式发布了Vite6.2.5版本!此次更新虽然是一个小版本迭代,但修复了一个关键问题,涉及SVG文件路径检查,对前端开发者尤...

    DrawSVG – SVG 路径动画 jQuery 插件

    jQueryDrawSVG使用了jQuery内置的动画引擎实现SVG路径动画,用到了stroke-dasharray和stroke-dashoffset属性。DrawSVG是完全...