web自动化测试(一)之web控件定位

常见控件定位方法

定位方式 含义描述
id(重点) id 属性对应的值
class name(重点)) class 属性对应的值
name(重点) name 属性对应的值
css selector(重点) css 表达式
xpath(重点 ) xpath表达式
link text(不常用,不稳定) 查找其可见文本与搜索值匹配的锚元素
partial link text 查找其可见文本包含搜索值的锚元素。如果多个元素匹配,则只会选择第一个元素。
tag name 标签名称

一、id定位

  • id定位语法格式: driver.find_element(By.ID, “ID属性对应的值”)
    web自动化测试(一)之web控件定位_第1张图片
# 导入依赖
from selenium import webdriver
import time
from selenium.webdriver.common.by import By

class TestHogwarts():
    def test_id(self):
        # 创建driver
        self.driver = webdriver.Chrome()
        self.driver.maximize_window()
        self.driver.implicitly_wait(5)
        # 打开百度网站
        self.driver.get('http://www.baidu.com')
        # 点击输入框
        self.driver.find_element(By.ID, "kw").click()
        # 等待两秒
        time.sleep(2)

二、name定位

  • name定位语法格式: driver.find_element(By.ID, “name属性对应的值”)
    web自动化测试(一)之web控件定位_第2张图片
# 导入依赖
from selenium import webdriver
import time

class TestHogwarts():
    def test_id(self):
        # 创建driver
        self.driver = webdriver.Chrome()
        self.driver.maximize_window()
        self.driver.implicitly_wait(5)
        # 打开百度网站
        self.driver.get("https://www.baidu.com/")
        # 点击输入框
        self.driver.find_element_by_id("kw").click()
        # name定位,输入“霍格沃兹测试开发”
        self.driver.find_element_by_name("wd").send_keys("霍格沃兹测试开发")
        # 等待两秒
        time.sleep(2)

三、class name定位

  • class name定位语法格式: driver.find_element(By.ID, “class name属性对应的值”)
    web自动化测试(一)之web控件定位_第3张图片
# 导入依赖
from selenium import webdriver
import time

class TestHogwarts():
    def test_id(self):
        # 创建driver
        self.driver = webdriver.Chrome()
        self.driver.maximize_window()
        self.driver.implicitly_wait(5)
        # 打开百度网站
        self.driver.get("https://www.baidu.com/")
        # 点击输入框
        self.driver.find_element_by_id("kw").click()
        # 输入“霍格沃兹测试开发”
        self.driver.find_element_by_name("wd").send_keys("霍格沃兹测试开发")
        # 点击百度
        self.driver.find_element_by_class_name("s_btn").click()
        # 等待两秒
        time.sleep(2)

四、Css Selector定位

XPath 可以定位绝大多数元素,但是它采用从上到下的遍历模式,速度并不快,而 css_selector 采用样式定位,速度要优于 XPath,而且语法更简洁。

下面是 Selenium 使用 css_selector 的例子,css_selector 找到 class 属性为logo-big的元素:

driver.find_element_by_css_selector('.logo-big')
选择器 例子 例子描述
.class .intro 选择 class = “intro” 的所有元素
#id #firstname 选择 id= "firstname " 的所有元素
* * 选择所有元素
element p 选择所有p元素
element,element div,p 选择所有div元素和选择所有p元素
element element div p 选择所有div元素内部的所有p元素
element>element div>p 选择父元素为div元素的所有p元素
element+element div+p 选择紧接在div元素之后的所有p元素
  • 格式: driver.find_element(By.CSS_SELECTOR, “css 表达式”)
# 在console中的写法
# 元素,元素(选择所有bg、s_ipt_wr、new-pmd、quickdelete-wrap的元素)
$('.bg,.s_ipt_wr,.new-pmd,.quickdelete-wrap')
# 元素>元素(选择父元素id为s_kw_wrap元素下的所有input元素)
$('#s_kw_wrap>input')
# 元素 元素(选择所有form元素内部的所有input元素)
$('#form input')
# 元素+元素,了解即可(class为soutu-btn和input元素是相邻的兄弟的元素)
$('.soutu-btn+input')
# 元素1~元素2,了解即可(class为soutu-btn和i元素不是相邻的兄弟的元素)
$('.soutu-btn~i')

CSS 顺序关系

类型 格式
父子关系+顺序 元素 元素
父子关系+标签类型+顺序 元素 元素
web自动化测试(一)之web控件定位_第4张图片
$(".left_nav>div:nth-child(2)")

web自动化测试(一)之web控件定位_第5张图片

# .Header代表的是class为Header
# div:nth-child(1)代表的是Header下的第一个div标签,因为Header下的所有元素的都是div标签,所以使用的是nth-child(1)
# ul:nth-of-type(2)代表的是第一个div标签下的第二个ul标签,因为第一个div标签下的元素不是一样,所以使用的是nth-of-type(2)
# li:nth-child(6)代表的是ul元素下的第6个li标签,因为都是li标签,所以使用的是nth-child
$(".Header>div:nth-child(1)>ul:nth-of-type(2)>li:nth-child(6)")

五、XPath定位

1、XPATH定义的概念

  • XPath 是一门在 XML 文档中查找信息的语言
  • XPath 使用路径表达式在 XML 文档中进行导航
  • XPath 的应用非常广泛
  • XPath 可以应用在UI自动化测试

2、xpath运用场景

  • web自动化测试
  • app自动化测试

3、xpath 基础语法

表达式 结果
/ 从该节点的子元素选取
// 从该节点的子孙元素选取
* 通配符
nodename 选取此节点的所有子节点
选取当前节点的父节点
@ 选取属性
# 整个页面
$x("/")
# 页面中的所有的子元素
$x("/*")
# 整个页面中的所有元素
$x("//*")
# 查找页面上面所有的div标签节点
$x("//div")
# 查找id属性为site-logo的节点
$x('//*[@id="site-logo"]')
# 查找节点的父节点
$x('//*[@id="site-logo"]/..')

4、xpath 顺序关系

  • xpath通过索引直接获取对应元素
# 获取此节点下的所有的li元素
$x("//*[@id='ember21']//li")
# 获取此节点下【所有的节点的】第一个li元素
$x("//*[@id='ember21']//li[1]")

5、xpath 高级用法

  • [last()]:选取最后一个
  • [@属性名=‘属性值’ and @属性名=‘属性值’]:与关系
  • [@属性名=‘属性值’ or @属性名=‘属性值’]:或关系
  • [text()=‘文本信息’]:根据文本信息定位
  • [contains(text(),‘文本信息’)]:根据文本信息包含定位
  • 注意:所有的表达式需要和[]结合
# 选取最后一个input标签
//input[last()]
# 选取属性name的值为passward并且属性pwd的值为123456的input标签
//input[@name='passward' and @pwd='123456']
# 选取属性name的值为passward或属性pwd的值为123456的input标签
//input[@name='passward' or @pwd='123456']
# 选取所有文本信息为'霍格沃兹测试开发'的元素
//*[text()='霍格沃兹测试开发']
# 选取所有文本信息包'霍格沃兹'的元素
//*[contains(text(),'霍格沃兹')]
# 选取第二个input元素
//input[2]
# 选取前2个input元素
input[postion()<3]
# 选取所有value属性为text的元素
//*[@value='text']

六、link text定位与 partial link text定位

元素中会出现文字,比如下面的分类,可以利用这段文字进行定位:
web自动化测试(一)之web控件定位_第6张图片

driver.find_element_by_link_text('欢迎光临测试人社区')

也可以采用部分匹配方式,不必写全,可写成“欢迎光临”、“欢迎光临测试人社区”、“测试人”

driver.find_element_by_partial_link_text('测试人社区')

七、Tag标签定位

DOM 结构中,元素都有自己的 tag 标签,比如 input 标签, button 标签, anchor 标签等等,每一个 tag 标签拥有多个属性,比如 id, name, value class,等等。下面的高亮部分就是 tag 标签:
web自动化测试(一)之web控件定位_第7张图片
可以使用 tag 标签进行定位:

driver.find_element_by_tag_name('input')

你可能感兴趣的:(WEB自动化测试,前端,python,chrome)