【WEB自动化测试】-定位元素的八种方式

叁歲伎倆 2023-10-13 10:40 17阅读 0赞

## 一、自动化测试能解决什么问题 ##

*  解决-回归测试
 *  解决-压力测试
 *  解决-兼容性测试
 *  提高测试效率，保证产品质量

回归测试：项目在发新版本之后，对项目之前的功能进行验证

压力测试：可以理解多用户同事去操作软件，统计软件服务器处理多用户登录的能力

兼容性测试：不同浏览器（IE，Firefox，Chrome）等等。

## 二、什么是WEB自动化测试 ##

概念：让程序代替人工自动验证web项目功能的过程

### 2.1 什么WEB项目适合做自动化测试 ###

*  需求变动不频繁
 *  项目周期长
 *  项目需要回归测试

### 2.2 Web自动化测试在什么阶段开始 ###

*  功能测试完毕(手工测试)

### 2.3 Web自动化测试所属分类 ###

>  *  黑盒测试(功能测试)
>  *  白盒测试(单元测试)
>  *  灰盒测试(接口测试)

web自动化测试属于黑盒测试

## 三、自动化测试工具 ##

### 3.1 主流的Web自动化测试工具 ###

*  QTP

QTP是一个商业化的功能测试工具，收费，支持web，桌面自动化测试

*  Selenium

Selenium是一个开源的web自动化测试工具，免费，主要做功能测试

### 3.2 什么是Selenium？ ###

Selenium是一个用于web应用程序的自动化测试工具。

安装：pip3 install selenium

#### 3.2.1 Selenium特点 ####

*  开源软件：源代码开放可以根据需要来增加工具的某些功能
 *  跨平台：linux、windows、mac
 *  支持多种浏览器：Firefox，Chrome，IE、Edge，Opera、Safari等
 *  支持多种语言：Python、java、C\#、JavaScript、Ruby、PHP等
 *  成熟稳定：目前已经被google、百度、腾旭等公司广泛使用
 *  功能强大、能够实现类似商业工具的大部分功能，因为开源性，可实现定制化功能

## 四、元素定位 ##

4.1 为什么要使用元素定位

要使用web自动化操作元素，必须首先找到此元素

4.2 定位工具

F12键(开发者工具)

4.3 定位元素时依赖于什么？

1. 标签名

2.属性

3. 层级

4. 路径

4.4 定位方式

1.  id
2.  name
3.  class\_name:使用元素的class属性定位
4.  tag\_name:标签名称<标签名 .../>
5.  link\_text：定位超链接 a 标签
6.  partial\_link\_text:定位超链接 a 标签 模糊
7.  xpath：基于元素路径
8.  css：元素选择器

## 五、通过ID定位元素 ##

#获取浏览器对象
    driver = webdriver.Chrome()
    #打开URL
    url = r"http://localhost:8001/backend/page/login/login.html"
    driver.get(url)
    #定位元素
    username = driver.find_element(By.ID, "username")
    # 清空控件内容
    username.clear()
    #input控件输入内容
    username.send_keys("admin")
    # 退出浏览器驱动
    driver.quit()

## 六、name定位 ##

> name定位就是根据元素name属性来定位。HTML文档中name的属性值是可以重复的
> 
> 前提：元素有name属性

user = driver.find_elements(By.NAME, 'user')

## 七、class\_name定位 ##

> class\_name定位就是根据元素class属性来定位。HTML文档中class的属性值是可以重复的
> 
> 前提：元素有class属性

user = driver.find_elements(By.CLASS_NAME, 'user')

## 八、tag\_name定位(了解) ##

通过元素的标签来定位，标签名也就是元素名

driver.find_elements(By.TAG_NAME, 'input')

## 九、link\_text定位 ##

> 定位超链接标签，只能使用精准匹配(a标签的全部文本内容)

driver.find_element(By.LINK_TEXT, '登录 百度').click()

## 十、partial\_link\_text定位 ##

定位超链接标签，可以使用模糊匹配(a标签的可以唯一定位的部分文本内容)

driver.find_element(By.PARTIAL_LINK_TEXT, '百度').click()

## 十一、xpath定位 ##

### 11.1 xpath常用的定位策略 ###

1.  路径
    
    1.  绝对路径：语法 以单斜杠开头逐级开始编写，不能跳级。如 /html/body/div/p\[1\]/input
    2.  相对路径：以双斜杠开头，双斜杠后面跟元素名称，不知元素名称可以使用 \* 代替

如：//input //\*

2. 路径结合属性：在xpath中，所有属性必须使用@符号修饰 如：//\*\[@id='id值'\]

3. 路径结合逻辑(多个属性)：

语法：//\*\[@id='id值' and @属性='属性值'\]

driver.find_element(By.XPATH, "//input[@id='username' and @placeholder='账号']")

4. 路径结合层级

语法：//\*\[@id='父级id属性'\]/input

**提示：**

1. 一般建议使用指定标签名称，不使用 \* 代替，\*效率比较慢

2. 无论是绝对路径还是相对路径。/后面必须为元素的名称或者\*

3. 能使用相对路径就不要使用绝对路径。

### 11.2 Xpath扩展 ###

1. //\*\[text()='XXX'\] \#定位文本值等于XXX的元素

提示：一般适合p标签，a标签

2. //\*\[contains(@属性,'xxx')\] \#定位属性包含xxx的元素

提示：contanins为关键字，不可更改

3. //\*\[starts-with(@属性,'xxx')\] \#定位属性以xxx开头的元素

提示：starts-with为关键字，不可更改

## 十二、CSS定位 ##

### 12.1 什么是CSS定位 ###

1.  CSS（Cascading Style Sheets)是一种语言，它用来描述HTML元素的显示样式
2.  在CSS中，选择器是一种模式，用于选择需要添加样式的元素；
3.  在Selenium中也可以使用这种选择器来定位元素

提示：

1. 在selenium中推荐使用CSS定位，因为它比XPATH定位速度快

2. CSS选择器语法非常强大。只列举常用的几种

CSS定位方法

driver.find_element(By.CSS_SELECTOR,css_selector)

### 12.2 css定位常用策略(方法) ###

> 1.id选择器
> 
> 2. class选择器
> 
> 3. 元素选择器
> 
> 4. 属性选择器
> 
> 5. 层级选择器

### 12.3 id选择器 ###

> 说明：根据元素id属性选择,元素必须有id属性
> 
> 格式：\#id
> 
> 例如：driver.find\_element(By.CSS\_SELECTOR, "\#username")
> 
> \#username <选择id属性值为username的元素>

### 12.4 class选择器 ###

> 说明：根据元素class属性来选择
> 
> 格式：.class (注：前面是英文点)
> 
> 例如：driver.find\_element(By.CSS\_SELECTOR, ".el-input\_\_inner")
> 
> .el-input\_\_inner <选择class属性为el-input\_\_inner的所有元素>

### 12.5 元素选择器 ###

> 说明：根据元素名称来选择
> 
> 格式：element
> 
> 例如：driver.find\_element(By.CSS\_SELECTOR, "input")

### 12.6 属性选择器 ###

> 说明：根据属性来选择
> 
> 格式：\[属性名=属性值\]
> 
> 例如：driver.find\_element(By.CSS\_SELECTOR, "\[placeholder='账号'\]")

### 12.7 层级选择器 ###

> 说明：根据层级来选择
> 
> 格式：1. 父子层级关系：父层级策略>子层级策略
> 
> 2. 祖辈后代层级关系：祖辈策略 后代策略 (注中间为空格)
> 
> 提示：>与空格的区别，>后面跟的元素必须为子元素，空格则不用，可以为祖辈后代
> 
> 例如：driver.find\_element(By.CSS\_SELECTOR, "div>input\[id='password'\]")
> 
> driver.find\_element(By.CSS\_SELECTOR, "div input\[id='password'\]")
> 
> driver.find\_element(By.CSS\_SELECTOR, 'div.el-form-item\_\_content>button')

### 12.8 CSS延伸定位方法 ###

1. 标签名\[属性名^="属性值开头部分内容"\]：根据给出的属性值开头的内容定位

2. 标签名\[属性名&="属性值结尾部分内容"\]：根据给出的属性值结尾的内容定位

3. 标签名\[属性名\*="属性值任意部分内容"\]：根据给出的属性值任意的内容定位