zoukankan      html  css  js  c++  java
  • 自动化测试-web页面元素的8种定位方法:

    一、通过Xpath定位

    1、绝对路径
    element = driver.find_element_by_xpath('/html/body/div/input[@value="查询"]')
    上述xpath定位表达式从html dom树的根节点(html节点)开始逐层查找,最后定位到“查询”按钮节点。路径表达式“/”表示跟节点。
    2、相对路径
    element = driver.find_element_by_xpath('//div[@value='查询']')
    上述xpath定位表达式中//表示从匹配选择的当前节点开始选择文档中的节点,而不考虑特面的位置。input[@value="查询"]
    表示定位value值为“查询”两个字的input页面元素。
     
    3、元素索引定位
    element=driver.find_element_by_xpath("//input[1]")
    索引号定位方式是根据该页面元素在页面中相同标签名之间出现的索引位置来进行定位。
    上述xpath定位表达式表示查找页面中第二个出现的input元素,即被测试页面上的“查询”按钮。
    注:
    使用上述的定位方式你会发现定位到两个元素,两个div标签下的input都被定位到了,
    如果想同时定位多个相同的input页面元素可以使用。将定位的多个元素存储到list中,
    然后根据list索引号获取想要的页面元素。但如果发现页面元素会经常增加或减少,就不建议使用索引号定位方式。
     
    4、xpath+节点属性定位
    By.xpath("//input[@id='kw1']")
    By.xpath("//input[@type='name' and @name='kw1']")
    By.xpath("//li/span[text()='角色设置']")
    被测试网页的元素通常会包含各种各样的属性值,并且很多属性值具有唯一性。
    若能确认属性值不常变并且唯一,
    强烈建议使用相对路径再结合属性的定位方式来编写xpath定位方式,
    使用此方法可以解决99%的页面元素定位问题。
    下面给出更多的定位实例
     
    预定位的页面元素 定位表达式实例 使用的属性值
    定位页面的第一张图片 //img[@href=""http://www.sogou.com] 使用img标签的属性href值
    定位第二个div中第一个input输入框 //div[@id="div2"]/input[@name="div2input"]或者//inuput[@name="div2input"]

    使用div变迁的name值

    使用input标签的name属性值

    定位第一个div中的第一个链接 //div[@id="div1"]/a[@href="http://www.sogou.com"]

    使用div标签的ID属性值

    使用a标签的href属性值

    定位页面的查询按钮 //input[@type="button"] 使用input标签的type属性值
    5、部分属性值匹配
    以。。。开头:By.xpath("//input[start-with(@id,'nice')]")
    以。。。结尾:By.xpath("//input[ends-with(@id,'nice')]")
    包含 。。。  :By.xpath("//li/span[contains(text(),"角色设置")]")
     
    6、使用前面所有方法的组合
    By.xpath("//input[@id='kw1]//input[start-with(@id,'nice')]/div[1]/form[1]")
     
    7、xpath,通过父节点获取其哥哥节点
    "//div[@id='D']/../div[1]"
    通过该节点的父节点来获得哥哥节点
     
    8、xpath轴 定位元素
    轴可以定义相对于当前节点的节点集。使用xpath定位方式可以根据再文档树中的元素相对位置关系进行页面元素定位。
    先找到一个相对好定位的元素,让它作为轴,根据它和要定位元素间的相对位置关系进行定位,可解决一些点定位难的问题。
    xpath轴常用关键字:
    xpath轴关键字 轴的含义说明 定位表达式实例 表达式解释
    parent 选择定钱节点的上一层父节点 //img[@alt='div2-img2']/parent::div 查找到属性alt的属性值为div2-img2的img元素,并基于该img元素的位置找到它上一级的div页面元素
    child 选择当前节点的下层所有子节点 //div[@id='div1']/child::img 查找到ID属性值为div1的div元素,并基于div的位置找到它下层节点中的img页面元素
    ancestor   选择当前节点所有上层节点 //img[@alt='div2-img2']/ancestor::div 查找到属性alt的属性值为div2-img2的img元素,并基于该img元素的位置找到它上级的div元素
    descendant 选择当前节点所有下层的节点(子,孙等) //div[@name='div2']/descendant::img 查找到属性name的属性值为div2的div元素,并基于该元素的位置找到它下级所有节点中的img页面元素
    following 选择当前节点之后显示的所有节点 //div[@id='div1']/following::img 查找到ID属性值为div1的div页面元素,并基于div的位置找到它后面节点中的img页面元素
    following-sibling 选择当前节点后续所有兄弟节点 //a[@href='http://www.sogou.com']/following-sibling::input 查找到链接地址为http://www.sogou.com的链接页面元素a,并基于链接的位置找到它后续兄弟节点中的input页面元素
    preceding 选择当前节点前面的所有节点 //img[@alt='div2-img2']/preceding::div 查找到属性alt的属性值为div2-img2的图片页面元素img,并基于图片的位置找到它前面节点中的div页面元素
    preceding-sibling 选择当前节点前面的所有兄弟节点 //input[@value='查询']/preceding-sibling::a[1] 查找到value属性值为“查询”的输入框页面元素,并基于该输入框的位置找到他前面同级节点中的第一个链接页面元素
    有时候我们会再轴后面加一个星号*, 便是通配符,如://input[@value="查询"]/preceding::*,它表示查找属性value的值为“查询”的输入框input元素前面所有的同级元素,但不包括input元素本身
     
     
    二、通过CSS定位
    1、绝对路径
    driver.find_element_by_css_selector('html > body > div >input[value="查询"]')
    上述CSS定位表达式使用绝对路径定位属性value的值为“查询”的页面元素。从CSS定位表达式可以看出,步间通过“>"分割,
    区别于XPATH路径中的正”/“,并且也不再使用@符号选择属性。
     2、相对路径
    driver.find_element_by_css_selector('input[value="查询"]')
    上述CSS表达式通过相对路径使用元素名称和元素的属性及属性值进行页面元素的定位。
    3、class名称定位
    driver.find_element_by_css_selector('css.spread')
    上述CSS定位表达式使用input页面元素的class属性名称spread来进行定位,用点(.)分割元素名与class属性名,点号后面是class属性名称
    4、ID属性值定位
    driver.find_element_by_css_selector('input#div1input')
    上述CSS定位表达式使用input页面元素的ID属性值div1input进行定位,使用#号分割元素名和ID属性值,#后面是ID属性值
    5、其他属性定位
    element = driver.find_element_by_css_selector('img[alt="div1-img1"]')
    element = driver.find_element_by_css_selector('img[alt="div1-img1"][href="http://www.sogou.com"]')
    表达式1和表达式2是等价的,都是定位第一个img元素
    表达式1:表示使用img页面元素的alt元素的属性值div1-img1进行定位。若定位的页面元素始终具有唯一的属性值,
         此定位方式可以解决很多频繁变动的页面元素
    表达式2:表示同时使用了img页面元素的alt和href属性进行页面元素的定位。
         在某些复杂的定位场景,可使用多个属性来确保定位元素的唯一性。
    6、属性值一部分定位
    1 element = driver.find_element_by_css_selector('a[href^="http://www.so"]')
    2 element = driver.find_element_by_css_selector('a[href$="gou.com"]')
    3 element = driver.find_element_by_css_selector('a[href*="sogou"]')
    1.表示匹配链接地址开始为http://www.so关键字串的链接元素,以字符^指明从字符串的开始匹配
    2.表示匹配链接地址结尾包含gou.com关键字串的链接元素,以字符$指明在字符串的结尾匹配
    3.表示匹配链接地址包含sogou关键字串的链接元素,以字符*指明在需要进行模糊查询
    7、查找第一个div下的第一个input元素
    1 element=driver.find_element_by_css_selector("div#div1>input#div1input")
    2 element=driver.find_elements_by_css_selector("div input")
    1.表达式1中的div#div1,表示在被测试网页上定位到ID属性值为div1的div页面元素,
    > 表示在以查找到的div元素的子页面元素中进行查找,input#div1input表示查找ID属性值为div1input的input页面元素,
    此方法可实现查找div下子页面元素的办法.
    2.表达式2表示匹配所有属于div元素后代的input元素,表达式中父元素div和子元素input中间需用空格分割,
    注意此表达式是定位一组input元素,并不是单个input元素
    8、使用伪类定位元素
    1 element=driver.find_element_by_css_selector("div#div1 :first-child") 
    2 element=driver.find_element_by_css_selector("div#div1 :nth-child(2)")
    3 element=driver.find_element_by_css_selector("div#div1 :last-child")
    4 element=driver.find_element_by_css_selector("input:focus")
    5 element=driver.find_elements_by_css_selector("input:enabled")
    6 element=driver.find_elements_by_css_selector("input:checked")
    7 element=driver.find_elements_by_css_selector("input:not([id])")
    伪类表达式是CSS语法支持的定位方式,前3个表达式特别注意的是在冒号前一定要有一个空格,否则定位不到想要定位的元素
    1.表达式1表示查找ID属性值为div1的div页面元素下的第一个子元素,根据被测试网页定位的是div下的input元素,
    first-child表示查找某个页面元素下的第一个子页面元素
    2.表达式2表示查找ID属性值为div1的div页面元素下的第二个子元素,参照被测网页,定位到的页面元素是一个链接元素
    3.表达式3表示查找ID属性值为div1的div页面元素下的最后一个子元素,根据被测试网页定位的是一个按钮元素;
    last-child表示的是查找某个页面元素下的最后一个子页面元素
    4.表达式4 表示查找当前获取焦点的input页面元素
    5.表达式5表示查找可操作的input元素
    6.表示查找处于勾选状态的checkbox页面元素
    7.表示查找所有无id属性的input页面元素
    9、查找同级兄弟元素
    1 element=driver.find_element_by_css_selector("div1#div1 > input + a") 
    2 element=driver.find_element_by_css_selector("div1#div1 > input + a + img") 
    3 element=driver.find_element_by_css_selector("div1#div1 > input + * + img") 
    4 element=driver.find_elements_by_css_selector("ul#recordlist > p~li")
    1.表达式1表示在ID属性值为div1的页面元素下,查找input页面元素后的同级的且相邻的链接元素a
    2.表达式2表示在ID属性值为div1的页面元素下,查找input元素和链接元素a后面相邻的图片元素img
    3.表达式3表示在ID属性值为div1的页面元素下,查找input页面元素和任意一种页面元素后面的同级且相邻的图片元素img,
    * 表示任意类型的一个页面元素,只能表示一个元素,
      如果想用此方法查找第一个div下的最后一个input元素,表达式写法为以下三种:
      1)div#div1 > input + * + * + input
      2)div#div1 > input + a + * + input
      3)div#div1 > input + a + img + input
    4.表达式4表示ID属性值为recordlist的ul页面元素下,查找p页面元素以后所有的li元素
    10、多元素选择器
    element=find_elements_by_css_selector("div#div1,input,a')
    上面的css表达式表示同时查找所有ID属性值为div1的div元素,所有的input元素,所有的a元素

    xpath与Css对比:xpath功能更强大一些,css定位比xpath定位快,速度快,语法更加简洁
     
    三、通过元素的id属性来定位元素——id是唯一标识(每个id都是不一样的):By.id("kw")
     
    以下可以属性不是绝对唯一,可以通过 find_elements...方法返回多个值
    四、通过元素的name属性来定位元素:driver.find_element_by_name("wd")
    五、通过元素的class属性来定位元素:driver.find_element_by_class_name("s_ipt")
    六、通过元素的标签名tag来定位元素: driver.find_element_by_tag_name("input")
    七+八、通过链接元素的文本内容来精确匹配和模糊匹配定位元素:
      driver.find_element_by_link_text("新闻")
      driver.find_element_by_partial_link_text("hao123")
  • 相关阅读:
    数据库架构的演变
    一个简单的跨库事务问题
    一个优美的架构需要考虑的几个问题
    铁道部新客票系统设计
    详细介绍软件架构设计的三个维度
    单代号网络图
    分库分表带来的完整性和一致性问题
    软件架构设计箴言理解
    设计高并发的电子商店
    mysql之索引补充
  • 原文地址:https://www.cnblogs.com/ybbybb/p/14279974.html
Copyright © 2011-2022 走看看