A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 我是楠楠 黑马粉丝团   /  2019-9-11 15:40  /  791 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

【郑州校区】XPath、CSS定位

目标
1. 掌握XPath定位策略
2. 掌握CSS定位策略
为什么要学习XPathCSS定位?
1. 如果要定位的元素没有id、name、class属性,该如何进行定位?
2. 如果通过name、class、tag_name无法定位到唯一的元素,该如何进行定位?

示例:
<input  type="submit"  value="提交"  />
什么是XPath
1. XPath即为XML  Path的简称,它是一门在  XML  文档中查找元素信息的语言。
2. HTML可以看做是XML的一种实现,所以Selenium用户可以使用这种强大的语言在Web应用中定位元素。

XML:一种标记语言,用于数据的存储和传递。  后缀.xml结尾
<?xml  version="1.0"  encoding="UTF-8"  ?>
<node>
<db  id="db"  desc="三条边的长度都一样">
<b1>3</b1>
<b2>3</b2>
<b3>3</b3>
<expect>等边三角形</expect>
</db>
<dy>
<b1>4</b1>
<b2>4</b2>
<b3>5</b3>
<expect>等腰三角形</expect>
</dy>
</node>
XPath定位方式之所以强大,是因为它有非常灵活的定位策略
2. XPath定位策略(方式)
1. 路径-定位
2. 利用元素属性-定位
3. 属性与逻辑结合-定位
4. 层级与属性结合-定位
XPath定位方法
element  =  driver.find_element_by_xpath(xpath)
2.1路径定位(绝对路径、相对路径)
绝对路径:从最外层元素到指定元素之间所有经过元素层级的路径
file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml11364\wps16.png1). 绝对路径以/html根节点开始,使用/来分隔元素层级; 如 :/html/body/div/fieldset/p[1]/input                           2). 绝对路径对页面结构要求比较严格,不建议使用
相对路径:匹配任意层级的元素,不限制元素的位置
1). file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml11364\wps17.png相对路径以//开始
2). 格式://input 或者 //*
练习
需求:打开注册A.html页面,完成以下操作
1). 使用绝对路径定位用户名输入框,并输入:admin
2). 暂停2秒
3). 使用相对路径定位用户名输入框,并输入:123
2.2利用元素属性
说明:通过使用元素的属性信息来定位元素
格式://input[@id='userA']    或者    //*[@id='userA']
练习
需求:打开注册A.html页面,完成以下操作
1).利用元素的属性信息精确定位用户名输入框,并输入:admin
2.3属性与逻辑结合
说明:解决元素之间个相同属性重名问题
格式://*[@name='tel'  and  @class='tel']
练习
需求:打开注册A.html页面,完成以下操作
1).使用属性与逻辑结合定位策略,在test1对应的输入框里输入:admin
2.4层级与属性结合
说明:如果通过元素自身的信息不方便直接定位到该元素,则可以先定位到其父级元素,然后再找到该元素格式://*[@id='p1']/input
练习
需求:打开注册A.html页面,完成以下操作
1).使用层级与属性结合定位策略,在test1对应的输入框里输入:admin
2.5 XPath-延伸
//*[text()="xxx"】  文本内容是xxx的元素
//*[contains(@attribute,'xxx')]   属性中含有xxx的元素
//*[starts-with(@attribute,'xxx')]    属性以xxx开头的元素
2.6XPath-总结
1.  XPath定位策略有哪些?
1. CSS定位
1.1 什么是CSS定位?
1. CSS(Cascading  Style  Sheets)是一种语言,它用来描述HTML元素的显示样式;

2. 在CSS中,选择器是一种模式,用于选择需要添加样式的元素;
3. 在Selenium中也可以使用这种选择器来定位元素。提示:
1. 在selenium中推荐使用CSS定位,因为它比XPath定位速度要快
2. css选择器语法非常强大,在这里我们只学习在测试中常用的几个
CSS定位方法
element  =  driver.find_element_by_css_selector(css_selector)
1.1 CSS定位常用策略 (方式)
1. id选择器
2. class选择器
3. 元素选择器
4. 属性选择器
层级选择器
id选择器
说明:根据元素id属性来选择格式:#id
例如:#userA  <选择id属性值为userA的元素>
class选择器
说明:根据元素class属性来选择格式:.class
例如:.telA  <选择class属性值为telA的所有元素>
元素选择器
说明:根据元素的标签名选择格式:element
例如:input  <选择所有input元素>
属性选择器
说明:根据元素的属性名和值来选择
格式:[attribute=value]        element[attribute=value]
例如:[type="password"]  <选择type属性值为password的元素>
练习
需求:打开注册A.html页面,完成以下操作
1). 使用CSS定位方式中id选择器定位用户名输入框,并输入:admin
2). 使用CSS定位方式中属性选择器定位密码输入框,并输入:123456
3). 使用CSS定位方式中class选择器定位电话号码输入框,并输入:18600000000
使用CSS定位方式中元素选择器定位注册按钮,并点击

层级选择器
说明:根据元素的父子关系来选择
格式1:element1>element2元素
例如1:p[id='p1']>input
通过element1来定位element2,并且element2必须为element1的直接子
<定位指定p元素下的直接子元素input>

格式2:element1  element2
例如2:p[id='p1']  input
CSS延伸[了解
QQ截图20190911153559.png
1.1 CSS总结
1.  常用的CSS定位选择器有哪些?
1. 八种元素定位方式分类-汇总
1. id、name、class_name:为元素属性定位
2. tag_name:为元素标签名称
3. link_text、partial_link_text:为超链接定位(a标签)
4. XPath:为元素路径定位
5. CSS:为CSS选择器定位
XPathCSS类似功能对比
1.png
定位元素的另一种写法--延伸[了解
方法:find_element(by=By.ID,  value=None)
备注:需要两个参数,第一个参数为定位的类型由By提供,第二个参数为定位的具体方式
示例:
1. driver.find_element(By.CSS_SELECTOR,  '#emailA').send_keys("123@126.com")
2. driver.find_element(By.XPATH,  '//*[@id="emailA"]').send_keys('234@qq.com')
3. driver.find_element(By.ID,  "userA").send_keys("admin")
4. driver.find_element(By.NAME,  "passwordA").send_keys("123456")
5. driver.find_element(By.CLASS_NAME,  "telA").send_keys("18611111111")
6. driver.find_element(By.TAG_NAME,  'input').send_keys("123")
7. driver.find_element(By.LINK_TEXT,  '访问  新浪  网站').click()
8. driver.find_element(By.PARTIAL_LINK_TEXT,  '访问').click()
导入By
导包:from  selenium.webdriver.common.by  import  By

class  By(object): """
Set  of  supported  locator  strategies. """

ID  =  "id"
XPATH  =  "xpath" LINK_TEXT  =  "link  text"
PARTIAL_LINK_TEXT  =  "partial  link  text" NAME  =  "name"
TAG_NAME  =  "tag  name" CLASS_NAME  =  "class  name" CSS_SELECTOR  =  "css  selector"
1.1 find_element_by_xxx()find_element() 区别
说明:通过查看find_element_by_id底层实现方法,发现底层是调用find_element方法进行的封装;
def  find_element_by_id(self,  id_): """Finds  an  element  by  id.
:Args:
-  id\_  -  The  id  of  the  element  to  be  found.
:Usage:
driver.find_element_by_id('foo')
"""
return  self.find_element(by=By.ID,  value=id_)

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马