02元素定位详解（By定位）

最新推荐文章于 2024-02-21 19:37:51 发布
最新推荐文章于 2024-02-21 19:37:51 发布
阅读量846 收藏 5
点赞数 1
分类专栏： UI自动化 文章标签： python chrome 爬虫
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41549643/article/details/129396412
版权

目录

常用元素定位方式

为什么要学习元素定位方式

  1. 让程序操作指定元素，必须先找到此元素
  2. 程序不像人类用眼睛直接定位到元素
  3. webDriver提供了八种定位元素的方式。
Selenium
对应的Python方法
idfind_element(By.ID,“id”)
namefind_element(By.NAME,“name”)
class namefind_element(By.CLASS_NAME,“class name”)
tag namefind_elemnt(By.TAG_NAME,“input”)
link textfind_element(By.LINK_TEXT,“text”)
partial link textfind_element(By.PARTIAL_LINK_TEXT,“partailtext”)
xpathfind_element(By.XPATH,“//div[@name=‘name’]”)
css selectorfind_element(By.CSS_SELECTOR,“#id”)

使用BY模块定位

  1. 导入By类
    • from selenium.webdriver.common.by import By
  2. By类的方法
    • 示例：find_element(By.ID,“id”)
    • 需要两个参数，第一个参数为定位的类型，由By提供，第二个参数为定位的具体方式。

定位方式总结

  1. id、name、class_name、tag_name：根据元素的标签或元素的属性来进行定位
  2. link_text\partial_link_text:根据超链接的文本来进行定位（a标签）
  3. xpath:为元素路径定位
  4. css:为css选择器定位（样式定位）

1、ID定位

说明：HTML规定id属性在整个HTML文档中必须是唯一的，id定位就是通过元素的id属性来定位元素；
前提：元素有id属性
id定位方法：find_element(By.ID,“id”)
实行案例-1需求：打开百度首页（https://www.baidu.com/），通过id定位，搜索框输入内容“id定位演示”

from selenium import  webdriver
from selenium.webdriver.common.by import By
from time import sleep

driver = webdriver.Chrome()
driver.get('https://www.baidu.com/')

driver.find_element(By.ID,'kw').send_keys('id定位演示')

sleep(2)
driver.quit()

2、name定位

说明：HTML规定name属性来指定元素名称，name的属性值在当前文档中可以不是唯
一的，name定位就是根据name属性来定位。
前提：元素有name属性
name定位方法：find_element(By.NAME,“name”)
实行案例-2需求：打开百度首页（https://www.baidu.com/），通过name定位，搜索框输入内容“name定位演示”

from selenium import  webdriver
from selenium.webdriver.common.by import By
from time import sleep

driver = webdriver.Chrome()
driver.get('https://www.baidu.com/')

driver.find_element(By.NAME ,'wd').send_keys('name定位演示')

sleep(2)
driver.quit()

3、class_name定位

说明：HTML规定class来指定元素的类名，class定位就是根据class属性来定位，用法
和name,id类似。
前提：元素有class属性
class_name定位方法：find_element(By.CLASS_NAME，“class_name”)
实行案例-3需求：打开百度首页（https://www.baidu.com/），通过class定位，搜索框输入内容“class定位演示”

from selenium import  webdriver
from selenium.webdriver.common.by import By
from time import sleep

driver = webdriver.Chrome()
driver.get('https://www.baidu.com/')

driver.find_element(By.CLASS_NAME ,'s_ipt').send_keys('class定位演示')

sleep(2)
driver.quit()

4、tag_name定位

说明：HTML本质就是由不同的tag(标签)组成，而每个tag都是指同一类，所以tag定位效
率低，一般不建议使用；tag_name定位就是通过标签名来定位。
tag_name定位方法：find_elemnt(By.TAG_NAME,“input”
实现案例-4需求：打开百度首页（https://www.baidu.com/），通过tag定位input标签，搜索框输入内容“tag_name定位演示”

from selenium import  webdriver
from selenium.webdriver.common.by import By
from time import sleep
driver = webdriver.Chrome()
driver.get('https://www.baidu.com/')

driver.find_element(By.TAG_NAME, 'input').send_keys('tag_name定位演示')
sleep(2)
driver.quit()
#这里搜索到的input标签太多，运行是定位不到的，仅做演示

5、link_text定位

说明：link_text定位于前面4个定位有所不同，它专门用来定位超链接文本（文本值）
前提：定位的元素是链接标签（a标签）
link_text定位方法：find_element(By.LINK_TEXT,“text”)
实现案例-5需求：打开百度首页（https://www.baidu.com/），通过link_text(链接文本"hao123"）定位到hao123按钮，并进行点击操作

from selenium import  webdriver
from selenium.webdriver.common.by import By
from time import sleep

driver = webdriver.Chrome()
driver.get('https://www.baidu.com/')

driver.find_element(By.LINK_TEXT,"hao123").click()

sleep(2)
driver.quit()

6、partial_link_text定位

说明：partial_link_text定位是对link_text定位的补充，partial_link_text为模糊匹配；link_text为全部匹配。
前提:定位的元素是链接标签（a标签）
partial_link_text定位方法：find_element(By.PARTIAL_LINK_TEXT,“partailtext”)
通过传入a标签你局部文本或全部文本来定位元素，要求输入的文本能够唯一找到这个元素
实现案例-6需求：打开百度首页（https://www.baidu.com/），通过link_text(链接文本“hao”）定位到hao123按钮，并进行点击操作

from selenium import  webdriver
from selenium.webdriver.common.by import By
from time import sleep

driver = webdriver.Chrome()
driver.get('https://www.baidu.com/')

driver.find_element(By.LINK_TEXT,"hao").click()

sleep(2)
driver.quit()

7、元素组定位

元素组定位方式：find_elements(By.xxx,“xxx”)

  1. 查找返还定位所有符合条件的元素
  2. 返还的定位元素格式为列表格式
    说明：
    列表数据格式的读取需要指定下标（下标从0开始）
    案例要求：打开读书屋登录界面（http://43.139.38.222:18001/user/login.html），通过元素组定位输入用户名和密码
from selenium import  webdriver
from selenium.webdriver.common.by import By
from time import sleep

driver = webdriver.Chrome()
driver.get('http://43.139.38.222:18001/user/login.html')
eles = driver.find_elements(By.TAG_NAME, 'input') #这里element需要使用复数
user = eles[1].send_keys('19162274227')
pwd = eles[2].send_keys('123456')

sleep(2)
driver.quit()
#这里整个逻辑是：运行一共定位到5个input标签，这里分别取下标为1和2对应手机号和密码的input标签

xpath和css定位

为什么要学习xpath和css定位

  1. 在实际项目中标签没有id/name/class属性

  2. id/name/class属性值为动态获取，随着刷新或加载而变化

    **xpath、css定位可以解决以上两类问题**

xpath定位

xpath概述：–位置定位（路径方式）

  1. xpath即为xml path的简称，它是一种用来确定XML文档中某部分位置的语言。
  2. HTML可以看你做是XML的一种实现，所以selenium用户可以使用这种强大的语言来定位元素
  3. xpath为强大的语言，是因为它有非常灵活的定位策略

定位方法：find_element(By.XPATH,“//div[@name=‘name’]”)

xpath定位策略（方式）

  1. 路径定位–绝对路径、相对路径
  2. 利用元素熟悉性定位
  3. 层级与属性结合定位
  4. 属性与逻辑定位结合

1、路径定位（绝对/相对路径）

绝对路径：从最外层元素到指定元素之间所有经过元素层级路劲；如/html/body/div/p[2]
提示：

  • 绝对路径是以/开始
  • 通过浏览器查看元素属性，右击复制xpath快速生成

相对路径：从第一个符合条件元素开始（一般配合属性来区分）；如//*[@id=“searchKey”]
提示：

  • 相对路径以//开始
  • 通过浏览器查看元素属性，右击复制xpath快速生成
  • 语法：//标签名[@属性=’属性值‘]

2、利用元素属性

快速定位元素，利用元素唯一属性
示例：find_element(By.XPATH,“//input[@id=‘kw’]”)
案例要求：打开论百度首页（https://www.baidu.com/），通过xpath定位搜索框，输入“xpath定位”

from selenium import  webdriver
from selenium.webdriver.common.by import By
from time import sleep

driver = webdriver.Chrome()
driver.get('https://www.baidu.com/')

driver.find_element(By.XPATH,"//input[@id='kw']").send_keys('xpath定位')

sleep(2)
driver.quit()

3、层级与属性结合

要找到的元素没有属性，但是它的父级有；
示例：find_element(By.XPATH,“//label[@id=‘btnSearch’]/i”)
案例要求：打开读书屋首页（'http://43.139.38.222:18001/）直接点击搜索图标
在这里插入图片描述

from selenium import  webdriver
from selenium.webdriver.common.by import By
from time import sleep

driver = webdriver.Chrome()
driver.get('http://43.139.38.222:18001/')

driver.find_element(By.XPATH,"//label[@id='btnSearch']/i").click()

sleep(2)
driver.quit()

4、属性与逻辑结合

解决元素之间相同属性重名问题；
示例：//input[@id=‘name’ and class=‘pwd’]

css定位

css概述：

  1. css是有一种语言，它用来描述HTML和XML的元素显示样式
  2. css语言中有css选择器，在selenium中也可以用这种选择器来进行元素定位
  3. css定位方式比xpath快，而且css的语法非常强大，所以非常推荐这种方式定位
    定位方法：

css点位策略（方式）

  1. id选择器
  2. class选择器
  3. 元素选择器
  4. 属性选择器
  5. 层级选择器

ID选择器

根据元素id属性来选择
格式：**#id属性值 **如：#kw选择id属性值为kw 的所有元素）
案例要求：打开百度首页（https://www.baidu.com/），通过css定位，输入
“css定位”

from selenium import  webdriver
from selenium.webdriver.common.by import By
from time import sleep

driver = webdriver.Chrome()
driver.get('https://www.baidu.com/')

driver.find_element(By.CSS_SELECTOR,"#kw").send_keys('css定位')

sleep(2)
driver.quit()

class选择器

根据元素class属性来选择
格式：**.class属性值 **如：#kw选择class属性值为kw 的所有元素）
案例要求：打开百度首页（https://www.baidu.com/），通过class定位，输入
“class定位”

from selenium import  webdriver
from selenium.webdriver.common.by import By
from time import sleep

driver = webdriver.Chrome()
driver.get('https://www.baidu.com/')

driver.find_element(By.CSS_SELECTOR,".s_ipt").send_keys('class定位')

sleep(2)
driver.quit()

元素选择器

根据元素标签名来选择
格式：element 如：input ==>find_element(By.CSS_SELECTOR,“input”)（选择所有input元素）

属性选择器

根据元素的属性名和值来选择（一般不考虑id和class属性，i的属性用#id值，clsss属性用.class值）
格式：[attribute = value] 如：
案例要求：打开百度首页（https://www.baidu.com/），通过属性定位，输入
“属性定位”

from selenium import  webdriver
from selenium.webdriver.common.by import By
from time import sleep

driver = webdriver.Chrome()
driver.get('https://www.baidu.com/')

driver.find_element(By.CSS_SELECTOR,"[name='wd']").send_keys('属性定位')

sleep(2)
driver.quit()

层级选择器

根据元素的父子关系来选择
格式：element>element 如：label> i(返还所有p元素下所有i元素
提示：>可以用空格代替，如input 或者p [type = ‘password’
案例要求：打开读书屋首页（http://43.139.38.222:18001），通过层级定位，方式一：实现定位搜索按钮，方式二:实现定位搜索框并输入文字

from selenium import  webdriver
from selenium.webdriver.common.by import By
from time import sleep

driver = webdriver.Chrome()
driver.get('http://43.139.38.222:18001/')

driver.find_element(By.CSS_SELECTOR,"label i").click()
#方式二：
#driver.find_element(By.CSS_SELECTOR,"div [name='searchKey']").send_keys("利用标签/[属性='属性值']定位搜索框输入这段文字")
sleep(2)
driver.quit()

总结

选择器例子描述
#id#wkid选择器，选择id="wk"的所有元素
.class.wkclass选择器，选择class="wk"的所有元素
elementinput选择所有input元素
[attribute=value][type=“password”]选择type="password"的所有元素
element>elementp>input选择所有父元素为p的input元素

下拉列表的定位

下拉列表定位

下拉列表常见的前端表现形式：Select+Option 和 ul+li

Select类型的下拉框

案例1：https://kyfw.12306.cn/otn/leftTicket/init?linktypeid=wf，定位发车时间中的日期

from selenium import  webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import Select
from time import sleep

driver = webdriver.Chrome()
driver.get('https://kyfw.12306.cn/otn/leftTicket/init?linktypeid=wf')

eles = driver.find_element(By.ID,"cc_start_time")
#1.用Select类方法select_by_visible()定位选项
Select(eles).select_by_visible_text("18:00--24:00")
#2.select_by_value
Select(eles).select_by_value("18002400")
#3.select_by_index
Select(eles).select_by_index("4")

sleep(2)
driver.quit()

ul+li类型的下拉框

待补充。。。。。。。。。。

元素常用属性与方法

webElement常用属性和方法

待补充。。。。。。。。。。

案例

待补充。。。。。。。。。。

婕拉的夺命花
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
UI自动化元素定位
wx20150418的博客
05-25 955
单元素定位 find_element() 8中元素定位方法： 1、id定位：使用元素的id属性定位 2、name定位：使用元素的name属性定位 3、class定位： 使用元素的class属性定位 class属性值中有空格时，使用全部class属性值定位时，空格必须使用点代替 class属性值有空格时，可以以空格来分隔class属...
selenium中By类的使用，By类中的8种元素定位方法
公子清羽的博客
09-19 5609
#引用By类要先导入 from selenium.webdriver.common.by import By # self.driver.find_element_by_id() # upper() 方法将字符串中的小写字母转为大写字母。 #getattr()方法获取对象的属性值 def locator(self, name, value): #return self.driver.find_element(name, value) #self..
元素定位方式
kegev587shuai的博客
05-21 144
ActionChains(driver).drag_and_drop_by_offset(目标元素, x轴坐标, y轴坐标).perform()1.CSS选择器就是HTML的一种匹配模式,用于绑定页面样式,标签选择器,类选择器,id选择器,子选择器,包含选择器,选择器分组。ActionChains(driver).drag_and_drop(原始元素,目标元素).perform()ActionChains(对象).move_to_element(元素).perform()
【selenium】八大元素定位方式｜xpath css id name...
最新发布
weixin_40772077的博客
02-21 1320
当某个元素的各个属性及其组合都不足以定位时，那么可以利用其兄弟节点或者父节点等各种可以定位的元素进行定位。根据元素的id属性来定位元素 前端规范的话id是唯一的，但是如果不唯一,html也不会报错。多属性 By.cssSelector标签名[属性1='属性值'][属性2='属性值');单属性 By.cssSelector("标签名[属性名='属性值']");从根开始找---(根目录) 从最开始的元素(html)找当前元素的路径。根据元素的name属性来定位元素 name在html中不是唯一的。
元素定位的八种方法
hhdjd6666的博客
06-23 1万+
元素定位的八种方法
Selenium之tag_name定位
dpl12的博客
10-31 1万+
tag_name元素定位方式 1、说明：tag_name是通过标签名称来定位的，如<a>:a标签。 2、方法： driver.find_element_by_tag_name("标签名") 3、注意：如果页面中存在多个相同的标签，默认返回第一个标签元素。 4、案例：打开优设导航的百度搜索界面，完成以下操作： 使用tag_name定位，百度搜索框中输入：优设导航的百度搜索 ...
自动化（二）——八种元素定位方法
热门推荐
CloserSide的博客
10-14 1万+
自动化（二）一、元素定位1）如何元素定位二、元素定位方式1）id定位2）name定位3)class_name定位4）id、name、class_name的区别 一、元素定位 目标：掌握id、name、class_name、tag_name、link_text、partial_link_text、XPath、CSS八种定位方式 为什么要掌握元素定位？ 让程序操作指定元素，就必须线找到此元素 1）如何元素定位 谷歌浏览器，按F12出现右侧的检查栏，点击鼠标，然后再点击页面中的元素，则可以找到该元素的组成代
记录——关于tag_name元素定位获取其他元素
m0_67901237的博客
09-13 786
得到所有标签相同的元素，可以使用列表遍历的形式，对具体的元素做操作。1.tag_name标签定位：相同标签时，默认获取第一个标签。1.1.默认情况下tag_name定位第一个元素。2.1当有多个相同标签时，使用........。2.获取其他元素的方法..........
CSS中的元素定位方法详解
09-25
主要介绍了CSS中的元素定位方法详解,是CSS入门学习中的基础知识,需要的朋友可以参考下
css position 设置元素的定位方式详解
09-24
下面小编就为大家带来一篇css position 设置元素的定位方式详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解css 定位与定位应用
12-01
定位的定义： 在CSS中关于定位的内容是：position:relative | absolute | static | fixed ...选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进
自动化测试之八大元素定位方式（python3.10+selenium4）
Little_Carter的博客
02-04 7715
元素的定位是自动化测试核心。要操作一个对象，首先要识别定位或找到这个对象。为了实现网页整体布局，我们先要知道，一个元素，是如何定位到页面上的某个位置的，这就是元素定位。
将元素定位到可视区域
Wancc123的博客
06-07 378
将元素定位到可视区域
ByTagName的动态属性
cyzfd_sunshine的博客
01-06 652
getElementById和getElementByTagName的区别： 1. getElementById前面只能加document； 2.getElementById只能找一个元素，getElementByTagName是一堆元素的集合，访问时，用[ ] 3.getElementByTagName后面添加一些（用innerHTML），再去访问，就可以找到了。   #list{...
html+css之定位
renshaoqi的博客
12-23 291
文章目录一 标准流(Normal Flow)二 position 定位2.1 static 静态定位2.2 relative 相对定位 一 标准流(Normal Flow) 默认情况下，元素都是按照 normal flow (标准流、常规流、正常流、文档流[document flow])进行排布的 从左到右，从上到下按顺序进行排布 默认情况下，元素互相之间不存在层叠现象 margin、padding 定位 在标准流中，可以使用 margin、padding 对元素进行定位 其中 margin 还可以设
2-1-动态方法：ByTagName()
xuman0927的博客
04-18 452
var oUl = document.getElementById('list');        静态方法    找到一个元素 var aLi = oUl.getElementsByTagName('li');      动态方法     元素的集合 多个 在用 TagNasme 的时候，必须要加上：[ ]像数组一样的访问形式 window.onload = function
元素定位方法
黎明^o^
01-22 4343
id定位 语法：find_element_by_id() 例子： 根据上图我们可以看出，百度输入框是一个叫<input>的标签（HTML基础知识），里面有类型(type)、class、name、id，首页我们以id作为查询项，进行元素定位。 因为我们没有做任何操作，所有该打开只是自动打开浏览器并查找元素，下图表示查找到了元素。find_element_by_id表示以id查找。 name定位 语法：find_element_by_name() 例子： ...
10_Python3.6+selenium2.53.6自动化测试_通过by_tag_name定位百度输入框
dengachao的专栏
08-07 728
一、实现功能 1、通过by_tag_name定位百度输入框 2、输入关键字“Python3.6+selenium2.53.6自动化测试”点击查询 二、实现代码（参考代码因页面不至一个input，代码跑不通） #coding:utf-8 from selenium import webdriver import time ''' 1、通过tag_name定位百度输入框 2、输入关键字“P...
python-selenium -- xpath定位方法详解
06-06
XPath是一种XML文档的定位方法，也可以用于HTML文档的定位，Selenium中也可以使用XPath来定位网页元素。下面是使用XPath定位元素的详细步骤： 1. 打开浏览器并访问网页： ```python from selenium import webdriver driver = webdriver.Chrome() driver.get("http://www.example.com") ``` 2. 使用XPath定位元素： ```python # 通过元素id定位 element = driver.find_element_by_xpath('//*[@id="element_id"]') # 通过元素name定位 element = driver.find_element_by_xpath('//*[@name="element_name"]') # 通过元素class定位 element = driver.find_element_by_xpath('//*[@class="element_class"]') # 通过元素标签名定位 element = driver.find_element_by_xpath('//tag_name') # 通过元素属性定位 element = driver.find_element_by_xpath('//*[@attribute_name="attribute_value"]') # 通过元素文本内容定位 element = driver.find_element_by_xpath('//*[text()="text_content"]') # 通过元素部分文本内容定位 element = driver.find_element_by_xpath('//*[contains(text(), "text_content")]') ``` 3. 对元素进行操作： ```python # 输入文本 element.send_keys("text_input") # 点击元素 element.click() # 获取元素文本 print(element.text) # 获取元素属性值 print(element.get_attribute("attribute_name")) ``` 注意事项： - XPath定位需要用到浏览器的开发者工具，在开发者工具中可以查看元素的XPath路径。 - XPath路径中的引号需要用不同类型的引号包裹，例如在单引号内使用双引号包裹。 - 如果XPath路径中包含斜杠（/），则需要使用双斜杠（//）或者使用单引号包裹整个XPath路径。 - 在XPath路径中没有找到元素时，会抛出NoSuchElementException异常。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值