Selenium使用CSS定位 总结

最新推荐文章于 2024-07-14 17:35:55 发布
原创 最新推荐文章于 2024-07-14 17:35:55 发布 · 1.2k 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Selenium #CSS定位

大部分人在使用selenium定位元素时，用的是xpath定位，css定位往往被忽略掉了，其实css定位也有它的价值，css定位更快，语法更简洁
css的定位方法和上一篇的xpath定位方法，两篇学习

Selenium使用CSS定位 总结

一、CSS 选择器

常见符号：
#表示 id选择器
.表示 class选择器
>表示子元素，层级
一个空格也表示子元素，但是是所有的后代子元素，相当于 xpath 中的相对路径

二、CSS:属性定位

css可以通过元素的id、class、标签这三个常规属性直接定位到

如下是百度输入框的的html代码：
<input id="kw" class="s_ipt" type="text" autocomplete="off" maxlength="100" name="wd"/>

css用#号表示id属性,如：#kw
css用.表示class属性，如：.s_ipt
css直接用标签名称，无任何标示符，如：input

三、CSS:其它属性

css可以通过标签、class、id这三个常规属性定位，也可以通过其它属性定位

以下是定位其它属性的格式
[name=wd] [autocomplete='off'][maxlength='255']
四、CSS:标签

css可以通过标签与属性的组合来定位元素

input.s_ipt input#kw input[id='kw']
五、CSS:层级关系
//form的id属性
form#form>span>input
//form的class属性
form.fm>span>input
六、CSS:索引

css也可以通过索引来定位子元素

最低0.47元/天 解锁文章
Python Selenium CSS 定位方法详解
m1992222的博客
06-21 4105
CSS(Cascading Style Sheets)层叠样式表是一种用来表现HTML或XM等文件样式的计算机语言CSS 使用选择器来为页面元素绑定属性, 这些选择器可以被 selenium 用作另外的定位策略CSS 可以比较灵活选择控件的任意属性, 一般情况下定位速度要比 XPath 快，定位更稳定""":Args::Returns::Raises::Usage:"""""":Args::Returns::Usage:"""
Selenium基础 — CSS选择器定位大全
测试-八戒
10-08 6094
如果元素有明确id，name，class属性时，使用对应的基本定位方法。如果没有id，name，class属性时，或id，name，class属性是动态/不唯一的时候，使用XPath和定位。定位页面超链接使用link_text和定位可使用XPath和定位的时候，优先使用。定位的速度和效率比Xpath高。没有最好的，只有最精简的，怎么简单怎么来。扩展：为什么定位的速度和效率比Xpath高?因为你无论用那种方式定位，最终都会转换到进行元素定位。
selenium之css定位详解
王大傻的博客
02-22 8548
css定位 css概述： 1、css（Cascading Style Sheets）是一种语言，它用来描述HTML和XML的元素显示样式。 2、css语言中有css选择器，在selenium中也可以使用这种选择器来进行元素定位。 3、css定位方式比xpath快，而且css的语法也非常强大，所以非常推荐这种方式定位。 css定位策略（方式）： 1、id选择器 2、class选择器 3、元素选择器 4、属性选择器 5、层级选择器 css定位方法：find_element_by_css_selector() 1
selenium css定位
Tester_muller的博客
09-27 598
说明：本篇博客基于selenium 4.1.0。
Selenium-CSS定位
炫酷的腿毛！
09-02 899
1、CSS是一种语言，它用来描述HTML元素的显示样式；2、在CSS中，选择器是一种模式，用于选择需要添加样式的元素；3、在selenium中也可以使用这种选择器来定位元素；在selenium中推荐使用CSS定位，因为他比XPath定位速度要块。
selenium之CSS定位汇总
weixin_30607029的博客
09-07 754
以百度首页为例： 定位输入框 一：单一属性定位 1：type selector driver.find_element_by_css_selector('input') 2：id 定位 driver.find_element_by_css_selector('#kw') 3：class 定位 driver.find_element_by_css_selector('.s_ipt...
selenium 之 css定位
王大傻的博客
07-14 723
格式：[attribute=value] 如：[type=‘password’] (选择所有type属性为password的值)css定位方式：1. id选择器 2. class选择器 3. 元素选择器 4. 属性选择器 5. 层级选择器。格式：element>element 如：p>input（返还所有p元素下所有的input元素）格式：.class属性值 如：.telA（选择class属性值为telA的所有元素）格式：#id属性值 如：#userA(选择id属性值为userA的所有元素)
selenium css selector 定位详解
01-31
本文将详细介绍如何使用Selenium配合CSS选择器来进行页面元素的精准定位。 #### 二、CSS选择器简介 CSS选择器是用于匹配文档中的元素的一种语法结构。在Selenium中，我们可以通过这些选择器来定位页面上的元素。...
Selenium元素定位方法总结
热门推荐
mfsdmlove的博客
05-11 3万+
Selenium可以驱动浏览器完成各种操作，比如模拟点击等。要想操作一个元素，首先应该识别这个元素。人有各种的特征（属性），我们可以通过其特征找到人，如通过身份证号、姓名、家庭住址。同理，一个元素会有各种的特征（属性），我们可以通过这个属性找到这对象。 目录 一、元素的概念 （一）什么是元素？ （二）查看元素信息 二、元素定位方法 （一）根据id定位 （二）根据name定位 （三）通过class name定位 （四）根据tag定位 （五）通过link text定位 （六）通过parti
Selenium使用Xpath定位 总结
HONGTester的博客
11-19 1644
Selenium 通过Xpath定位方式和方法介绍，以及使用Xpath轴定位的使用入门
selenium之css定位小结
weixin_34184561的博客
06-06 215
前言 大部分人在使用selenium定位元素时，用的是xpath定位，因为xpath基本能解决定位的需求。css定位往往被忽略掉了，其实css定位也有它的价值，css定位更快，语法更简洁。这一篇css的定位方法，主要是对比上一篇的xpath来的，基本上xpath能完成的，css也可以做到。两篇对比学习，更容易理解。 CSS 选择器： 常见符号： #表示 id选择器.表示 class选择器&...
Selenium自动化测试-CSS定位详解（六）
qq_24635973的博客
07-09 646
了解过前端知识的人，应该对css熟悉。它是用于给html页面添加样式和布局的，css的定位包括class,ID选择器，元素属性选择器和伪类等。其实selenium的css定位跟页面的css语法非常的像，有点异卵双胞胎的意思，为啥不是同卵双胞胎呢？因为它们之间还是有点区别的。现在我们来具体学习下。大体上我们把它们的定位方式分成三类，还是以百度搜索为例。 第一类：单个的属性定位，除了id,class属性写法不同以外，其他的属性的写法都是：[属性名称=属性值] driver = webdriver.Ch
selenium元素定位之CSS
doulihang的博客
02-13 760
CSS是一种语言，用来描述HTML和XML文档的属性，CSS使用选择器来为页面属性绑定属性。这些选择器可以被selenium用来当做定位元素的策略。CSS选择器常见的语法：选择器举例描述.class.douclass选择器，选择class="dou"的所有元素#id#gaoid选择器，选择id="gao"的所有元素**选择所有元素elementp选择所有&lt;p&gt;元素element&gt;...
selenium css 定位详解
weixin_42488745的博客
10-17 1614
selenium css 定位详解
selenium之CSS定位
ping233的博客
03-01 917
一、层级定位 1.*：所有标签 2.标签名：查找所有该标签名 3.标签名，标签名：查找多个标签名 !](https://img-blog.csdnimg.cn/8c493f3ff9174f8cb345717bb7d1d2d9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETkDlp5HlqJjliKvnp4PlpLQ,size_17,color_FFFFFF,t_70,g_se,x_16) ⚠️id用#表示
selenium教程 —— css定位
m0_58026506的博客
04-17 1511
​css定位说明：selenium中的css定位，实际是通过css选择器来定位到具体元素，css选择器来自于css语法 css定位优点： 语法简洁 对比其他定位方式，定位效率更快 对比其他定位方式，定位更稳定 ​
selenium的css定位
ezreal_tao的博客
03-06 377
driver.find_element_by_css_selector('#kw') 大部分人在使用selenium定位元素时，用的是xpath定位，因为xpath基本能解决定位的需求。css定位往往被忽略掉了，其实css定位也有它的价值，css定位更快，语法更简洁。 这一篇css的定位方法，主要是对比上一篇的xpath来的，基本上xpath能完成的，css也可以做到。两篇对比学习，更容易理解...
selenium使用css选择器选择文字
最新发布
06-21
<think>我们正在讨论如何使用Selenium的CSS选择器根据文本内容定位元素。根据引用[3]，似乎没有直接的CSS选择器可以根据元素包含的文本内容进行选择。但是，我们可以结合使用JavaScript和CSS选择器来实现这个功能。引用[3]提到了一种方法：使用JavaScript执行脚本来查找包含特定文本的元素。示例代码使用了jQuery的`:contains`选择器，这在纯CSS中是不可用的，因为CSS规范没有提供根据文本内容选择元素的选择器。因此，在Selenium中，如果我们想根据文本内容定位元素，有以下几种方法：1.使用XPath的`text()`函数或`contains()`函数。例如：`//*[contains(text(),'特定文本')]`。但请注意，用户要求使用CSS选择器。2.使用CSS选择器结合JavaScript（如引用[3]所示）。我们可以通过执行JavaScript代码来使用jQuery的`:contains`选择器，或者使用纯JavaScript方法（如`querySelectorAll`并自己过滤文本内容）。但是，由于问题明确要求使用CSS选择器，而纯CSS无法根据文本内容选择，因此我们只能通过其他方式模拟。实际上，CSS选择器本身不支持文本内容选择。因此，我们可以这样回答：在Selenium中，CSS选择器本身不支持根据元素包含的文本内容进行选择。但是，我们可以结合使用JavaScript和CSS选择器来实现类似功能。例如，我们可以执行JavaScript代码来查找包含特定文本的元素。以下是一个使用Java的示例（根据引用[3]的启示）：```javaWebDriverdriver=newChromeDriver();driver.get("https://example.com");//使用JavaScript执行器来查找包含特定文本的元素StringtextToFind="特定文本";Stringscript="varelements=document.querySelectorAll('*');"+"varresult=[];"+"for(vari=0;i<elements.length;i++){"+"if(elements[i].textContent.includes('"+textToFind+"')){"+"result.push(elements[i]);"+"}"+"}"+"returnresult[0];";//返回第一个匹配的元素WebElementelement=(WebElement)((JavascriptExecutor)driver).executeScript(script);element.click();//或者进行其他操作```注意：这种方法效率可能不高，因为它会遍历页面上的所有元素。如果页面很大，可能会影响性能。另外，如果页面已经加载了jQuery，我们可以使用更简洁的方式：```javaStringscript="return$(':contains(\""+textToFind+"\")').get(0);";WebElementelement=(WebElement)((JavascriptExecutor)driver).executeScript(script);```但是，使用jQuery需要页面本身支持。因此，通常更推荐使用XPath来根据文本定位元素，因为XPath支持文本内容匹配。例如：```javaWebElementelement=driver.findElement(By.xpath("//*[contains(text(),'特定文本')]"));```总结：虽然CSS选择器本身不支持文本内容匹配，但我们可以通过JavaScript来弥补这一不足，或者转而使用XPath。根据用户要求（必须使用CSS选择器），我们只能采用JavaScript的方式。但请注意，这实际上并不是纯CSS选择器解决方案。因此，我们也可以这样解释：CSS选择器设计用于基于标签名、类、ID、属性等来定位元素，而不包括文本内容。所以，如果需要根据文本定位，XPath是更直接的选择。但是，如果用户坚持使用CSS选择器并且不能使用XPath，那么使用JavaScript执行脚本是可行的替代方案。相关问题：1.在Selenium中，除了CSS选择器和XPath，还有哪些定位元素的方法？2.如何提高在大型页面上使用JavaScript根据文本查找元素的性能？3.在使用JavaScript定位元素时，如何处理动态加载的内容？</think>### 如何使用 Selenium 和 CSS 选择器定位包含特定文字的元素 在 Selenium 中，**纯 CSS 选择器无法直接根据元素文本内容定位元素**，因为 CSS 选择器规范不包含文本匹配功能[^3]。但可通过以下方法实现类似效果： #### 方法 1：CSS 属性选择器 + 文本属性（有限场景） ```java // 定位包含"登录"文本的按钮（需依赖特定属性） driver.findElement(By.cssSelector("button[value*='登录']")); ``` - 原理：使用 `*=` 匹配属性值中的子字符串 - 限制：仅当文本存储在元素属性（如 `value`、`placeholder`、`data-*`）时有效 #### 方法 2：CSS 结合 JavaScript（推荐方案） ```java // 使用JavaScript执行器查找包含文本的元素 String script = "return Array.from(document.querySelectorAll('div'))" + ".find(el => el.textContent.includes('订单状态'))"; WebElement element = (WebElement) ((JavascriptExecutor)driver).executeScript(script); ``` - 原理：通过 `querySelectorAll` 获取候选元素集，用 JS 过滤文本内容 - 优势：支持任意元素类型和复杂文本匹配 #### 方法 3：XPath 替代方案（非 CSS 但常用） ```java // 直接使用XPath文本定位 driver.findElement(By.xpath("//span[contains(text(),'库存数量')]")); ``` - 说明：XPath 支持 `text()` 函数，是文本定位的首选原生方案 > **最佳实践建议**： > 1. 优先检查文本是否存在于元素属性中 → 用 CSS 属性选择器 > 2. 需精确文本匹配时 → 用 XPath > 3. 复杂文本匹配需求 → CSS + JavaScript 组合[^3] > 4. 避免遍历整个 DOM（性能差），尽量缩小选择器范围 #### 示例：定位动态生成的错误消息 ```java // CSS选择器定位容器 + JS验证文本 WebElement container = driver.findElement(By.cssSelector(".error-notification")); String script = "return arguments[0].innerText.includes('密码强度不足');"; boolean isFound = (Boolean) ((JavascriptExecutor)driver).executeScript(script, container); ``` --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

测试小姐姐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值