您的位置: 首页  >  文章  >  Xpath、CSS定位

Xpath、CSS定位

分类: 文章 • 2024-10-01 15:46:53

Xpath定位

什么是Xpath

  1. XPath即为XML Path 的简称，它是一种用来确定XML文档中某部分位置的语言。
  2. HTML可以看做是XML的一种实现，所以Selenium用户可以使用这种强大的语言在Web应用中定位元素。

XML：一种标记语言，用于数据的存储和传递。 后缀.xml结尾
提示：Xpath为强大的语言，那是因为它有非常灵活定位策略

Xpath定位策略(方式)

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

方法：driver.find_element_by_xpath()

路径(绝对路径、相对路径)

绝对路径：从最外层元素到指定元素之间所有经过元素层级路径 ；如:/html/body/div/p[2]
提示：
1). 绝对路径以/开始
2). 使用Firebug可以快速生成，元素XPath绝对路径

相对路径：从第一个符合条件元素开始(一般配合属性来区分)；如：//input[@id=‘userA’]
提示：
1). 相对路径以//开始
2). 使用Friebug扩展插件FirePaht可快速生成，元素相对路径

提示：为了方便练习Xpath，可以在FireBug内安装扩展插件-FireFinder插件；
1). 火狐浏览器–>组件管理器–>搜索FireFinder

利用元素属性

说明：快速定位元素，利用元素唯一属性；
示例：//*[@id=‘userA’]

层级与属性结合

说明：要找的元素没有属性，但是它的父级有；
示例：//*[@id=‘p1’]/input

属性与逻辑结合

说明：解决元素之间个相同属性重名问题
示例：//*[@id=‘telA’ and @class=‘telA’]

Xpath-延伸

//*[text()=“xxx”] 文本内容是xxx的元素

//*[starts-with(@attribute,‘xxx’)] 属性以xxx开头的元素

//*[contains(@attribute,‘Sxxx’)] 属性中含有xxx的元素

CSS定位

什么是CSS？

  1. CSS（Cascading Style Sheets）是一种语言，它用来描述HTML和XML的元素显示样式；
    (css语言书写两个格式：
    1. 写在HTML语言中<style type="text/css">
    2. 写在单独文件中 后缀.css)
  2. 而在CSS语言中有CSS选择器(不同的策略选择元素)，在Selenium中也可以使用这种选择器；
    提示：
    1. 在selenium中极力推荐CSS定位，因为它比XPath定位速度要快
    2. css选择器语法非常强大，在这里我们只学习在测试中常用的几个

方法：driver.find_element_by_css_selector()

CSS定位常用策略 (方式)

  1. id选择器
    说明：根据元素id属性来选择
    格式：#id 如：#userA <选择id属性值为userA的所有元素>
  2. class选择器
    说明：根据元素class属性来选择
    格式：.class 如：.telA <选择class属性值为telA的所有元素>
  3. 元素选择器
    说明：根据元素的标签名选择
    格式：element 如：input <选择所有input元素>
  4. 属性选择器
    说明：根据元素的属性名和值来选择
    格式：[attribute=value] 如：[type=“password”] <选择所有type属性值为password的值>
  5. 层级选择器
    说明：根据元素的父子关系来选择
    格式：element>element 如：p>input <返回所有p元素下所有的input元素>
    提示：> 可以用空格代替 如：p input 或者 p [type=‘password’]

CSS延伸

  1. input[type^=‘p’] 说明：type属性以p字母开头的元素
  2. input[type$=‘d’] 说明：type属性以d字母结束的元素
  3. input[type*=‘w’] 说明：type属性包含w字母的元素

CSS总结

Xpath、CSS定位

XPath与CSS类似功能对比

Xpath、CSS定位

八种元素定位总结

  1. id
  2. name
  3. class_name
  4. tag_name
  5. link_text
  6. partial_link_text
  7. Xpath
  8. Css

说明：
1). WebDriver除了提供以上定位API方法(driver.find_element_by_xxx())
外，还提供了另外一套写法；
2). 调用find_element()方法，通过By来声明定位的方法，并且传入对应的方法和参数（了解-熟悉即可）

定位(另一种写法)-延伸【了解】

  • 导入By类
    导包：from selenium.webdriver.common.by import By
  • By类的方法
    方法：find_element(By.ID,“userA”)
    备注：需要两个参数，第一个参数为定位的类型由By提供，第二个参数为定位的具体方式
    示例：
    1. driver.find_element(By.CSS_SELECTOR,’#emailA’).send_keys(“[email protected]”)
    2. driver.find_element(By.XPATH,’//*[@id=“emailA”]’).send_keys(‘[email protected]’)
    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()
  • find_element_by_xxx()和find_element() 区别
    说明：通过查看find_element_by_id底层实现方法，发现底层也是调用的By类方法进行的封装；
    总结：虽然方法一样，但WebDriver推荐 find_element_by_xxx()这种方法

相关推荐