xpath和css的使用

本文详述了XPath与CSS定位技术,包括XPath的基本语法如相对路径、属性定位及层级选择,以及CSS选择器的高级用法,如层级嵌套定位、子元素选取等,适合网页自动化测试与爬虫开发者参考。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

xpath定位总结:

//:表示相对路径

* :标签名任意

/..:表示找上级

/ :表示找下级

@:标签属性定位

():text的值

1.使用class= 进行定位,下句意为class名字等于"el-menu-item is-active"的元素

//*[text()='部门管理']/../../ul/li[@class="el-menu-item is-active"]

2.使用contains()定位,下句意为:class名字中包含"el-menu-item is-active"的元素

//*[text()='部门管理']/../../ul/li[contains(@class,"el-menu-item is-active")]

3.使用标签[]进行定位,下句意为li标签下的第二个子标签(注意:下标定位从1开始,不是从0开始)

//*[text()='部门管理']/../..//li[2]





二、css定位也是通过层级嵌套进行的定位

1.ul>li.el-submenu:nth-child(6)>.el-submenu__title

可理解为ul标签下的li标签,并且该li标签class="el-submenu",这里找到class="el-submenu"的li标签有12个,我们要定位的“用户管理”在第六个,所以后面加:nth-child(6),意思就是找第六个孩子,“>”表示找下级,“.”表示当前标签内找class="el-submenu__title"的标签


2.ul>li.el-submenu:nth-child(6)>.el-menu > li:nth-child(2)

可理解为ul标签下级li标签,class=el-submenu的li标签(共12个),:nth-child(6)表示满足class=el-submenu的标签的并且是第6个,>.el-menu表示下一级的标签中class=el-menu的标签,>li:nth-child(2)表示在下级标签中找li标签的第二个子标签。



三、其他





补充:svg定位


特殊的元素定位:svg,frame

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

需要xpath里面的name()方法:*[name()='svg']


常用方法:

### XPath CSS 选择器定位元素练习教程 #### 使用 CSS 选择器按 `href` 属性选择链接 当需要通过特定的 URL 或路径来查找页面中的超链接时,可以利用 CSS 的属性选择功能。例如,在一个 HTML 文档中存在多个 `<a>` 标签,如果要找到所有指向 “https://example.com”的链接,则可采用如下方式: ```css a[href="https://example.com"] ``` 此表达式会匹配具有指定 href 值的所有锚点标签[^1]。 #### 利用 CSS 进行顺序选择 对于有序排列的目标对象(比如列表项),可以通过 nth-child() 函数实现精准选取。假设有一个无序列表 ul 下面有若干 li 子元素,想要获取第二个元素的话就可以这样写: ```css ul li:nth-child(2) ``` 这段代码能够精确命中目标位置上的项目,并且支持更复杂的索引逻辑操作。 #### 结合 Selenium 实现自动化测试案例 为了更好地掌握这两种技术的应用场景以及它们之间的差异性,下面给出一段基于 Python 编写的简单脚本作为示范,该程序借助 Selenium 库模拟浏览器行为并分别运用了上述两种查询手段去抓取数据: ```python from selenium import webdriver driver = webdriver.Chrome() url = 'http://www.examplewebsite.com' driver.get(url) # Using CSS Selector to find elements by class name and tag type. elements_by_css = driver.find_elements_by_css_selector('p.classname') for element in elements_by_css: print(element.text) # Switching over to Xpath for selecting an anchor with specific text content inside it. element_by_xpath = driver.find_element_by_xpath("//a[text()='Click Here']") print(f"The link's href attribute is {element_by_xpath.get_attribute('href')}.") driver.quit() ``` 以上实例展示了如何在实际开发过程中灵活切换使用 CSS Selectors 及 XPath 来完成不同需求下的 DOM 节点检索任务[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值