元素定位方法

最新推荐文章于 2025-12-02 15:55:42 发布

原创最新推荐文章于 2025-12-02 15:55:42 发布 · 483 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #前端 #javascript

本文探讨了前端开发中用于元素定位的两种主要方法：XPath 和 CSS 选择器。XPath 提供了一种强大的路径表达式来查找XML或HTML文档中的元素，而CSS选择器则使用简洁的语法来定位页面样式。通过理解这两种定位方式，开发者可以更有效地在自动化测试和页面交互中选取目标元素。

xpath定位：

知识点:
属性: 包括但不限于id、name、class还有href、style等等
      xpath是可以覆盖id、class、name等定位！当然可以覆盖tagname的定位//tag_name
语法: [@属性名='属性值'] 要结合路径法
示例:
    //*[@id='username']  #id属性可以用//*
    //input[@name='username']  #容易重复的属性建议缩小搜索范围
    //div[@class='el-input el-input--normal']  #class在xpath中要写所有值！不能写一个来定位有多个类的元素
    //input[@placeholder="请输入用户名"]  #所有元素都可以用
    /html//input[@placeholder="请输入用户名"]
    //*[@width>'700']  运算符
    
# 逻辑运算符 and，一般不用or来放大范围
//*[@id='alert' and @value='alert']

知识点:xpath的函数
starts-with(@属性名,'属性开头的值')  #start有个s
    示例://*[starts-with(@id,'userna')]
contains(@属性名,'属性包含的值')     #contain有个s
    示例://*[contains(@id,'userna')]
#有没有ends-with 有！但selenium没有实现！xpath是有的，看xpath的官方语法的时候要注意不一定都实现的
text()='文本的值'  #替代link_text方法，覆盖，非A标签也可以定位
    示例: //*[text()='系统登录']
contains(text(),'文本包含的值')   #替代partial_link_text方法

知识点:轴定位，用min.html来演示，这个html比较小，容易观察，也可以适当修改，观察效果。
//*[@id='alert']/..  找父节点
//*[@id='alert']/ancestor::div  #找所有先辈div的，儿子有明显的特征，找它的上代。
                                #上代本身没有可定位的属性
//*/attribute::id  #找到所有含有id属性的标签


//*[@id='prompt']/preceding::div   #包含//*[@id='prompt']元素的标签都不含在内
//*[@id='prompt']/preceding::input
//*[@id='alert']/preceding::div  #没有的
//*[@id='alert']/preceding::head #有了！

css语法：

认识css的基础语法
   id    #id的值
   class  .class的值
   tag   标签名
   组合   tag_name#id_value.class_Value1.class_value2

1. 当id的值是数字开头的时候（可以用其他的方式来定位，name属性、其他属性等等）
    #71h7fJ  定位不到
    右键copy的时候转换成  #\37 1h7fJ
2. 复制并不100%可靠，关键还是要定位到（把表达式放到浏览器中1of1）

知识点:CSS的属性
    [属性名=属性值]
    XXXXX[属性名~=属性值]  包含  这种selenium不支持（只支持属性值完全匹配，失去了包含的意义
    [属性名^=属性值]  开始
    [属性名$=属性值]  结尾
    [属性名*=属性值]  包含
    input:nth-child(2)  #父节点下的第二个元素是input，注意跟xpath的区别，比xpath复杂之处
    p:first-child     #父节点下的第一个子元素是p
    em:last-child     #em是父节点下的最后一个子元素
    em:nth-last-child(1)   #em是父节点下的最后一个子元素
    input:nth-last-child(2)  #父节点下的倒数第二个子元素是input的
    ！！！css不能直接替代link_text的做法（link_text根据text来定位）

知识点:webdriver

'''
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
sleep(2)
driver.minimize_window()  #最小化
sleep(2)
driver.fullscreen_window() #全屏
sleep(2)
driver.set_window_size(800,600) #设置窗口大小
sleep(2)
driver.maximize_window()  #最大化
sleep(2)
driver.get('http://121.41.14.39:8088/index.html#/')
print('tilte:',driver.title)
print('name:',driver.name)  #浏览器类型
print('current_url:',driver.current_url)  #当前的url
print('size',driver.get_window_size()) #{'width': 1552, 'height': 840}
print('position',driver.get_window_position()) #{'x': -8, 'y': -8}
print('rect',driver.get_window_rect()) #矩形{'height': 840, 'width': 1552, 'x': -8, 'y': -8}
driver.save_screenshot('1017.png')  #截图，推荐用png
print('pagesource:',driver.page_source)