【郑州校区】XPath、CSS定位

目标

1. 掌握XPath定位策略

2. 掌握CSS定位策略

为什么要学习XPath、CSS定位？

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延伸[了解

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选择器定位

XPath与CSS类似功能对比

定位元素的另一种写法--延伸[了解

方法：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_)

【郑州校区】XPath、CSS定位

目标

1. 掌握XPath定位策略

2. 掌握CSS定位策略

为什么要学习XPath、CSS定位？

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延伸[了解

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选择器定位

XPath与CSS类似功能对比

定位元素的另一种写法--延伸[了解

方法：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_)