UI自动化测试介绍

1.什么是自动化测试

由程序代替人工进行系统校验的过程

1.1自动化测试能解决什么

• 回归测试（冒烟测试）

针对之前老的功能进行测试  （通过自动化的代码来实现）

针对上一个版本的问题的回归

• 兼容性测试

web实例化不同的浏览器驱动相当于于对不同的浏览器进行操作，从而解决浏览器的兼容性测试问题

• 性能测试

通过一些工具模拟多个用户实现并发操作

• 提高工作效率，保障品质质量

1.2自动化测试的优点

• 自动化测试能在较短的时间内执行更多的测试用例
• 自动化测试能减少人为的错误‘
• 自动化测试能克服手工的局限性
• 可以重复执行

1.3自动化测试的误区

可以完全代替手动测试

一定比手工测试厉害

可以发现更多的BUG

适用于所有的功能

1.4自动化测试分类

• web自动化测试
• 移动app自动化
• 接口自动化
• 单元测试-自动化测试
• 安全测试（渗透测试）
• 桌面应用自动化测试
• 嵌入式设备自动化测试

2 什么是UI自动化测试

UI通过对web应用以及app应用进行自动化测试的过程

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

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

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

手工测试完成之后才能做自动化测试（通过手动测试能清楚的知道自动化测试的步骤以及结果）

2.3UI自动化测试所属分类

• 黑河测试（功能测试） ------UI自动化测试

• 白盒测试（单元测试）

• 灰盒测试（接口测试）

1、V1     通过手工测试完成之后，有十个功能。   

2、 针对V1版本的十个功能，进行自动化的代码编写

3、V2  增加了十个功能（总共有20个功能）， v2版本的测试过程当，新增的10个功能手工测试。针对老的10个功能就可以通过自动化来进行回归测试。

 

---

二、web自动化测试基础

1. web自动化框架

1.1 主流的web自动化工具

• QTP 由惠普公司开发的一款自动化工具，支持web、桌面的自动化测试。 收费的商用工具。
• selenium 主要用来做web自动化测试的，开源的免费的工具。
• root framework 自动化测试平台。通过它可以实现web自动化测试、接口自动化测试、桌面的自动化测试。

1.2 selenium特点

selenium中文名是硒，就是用来做web自动化测试的

• 开源软件: 源代码开放，但是不一定免费

• 跨平台: 平台指操作系统。 linux、windows、 mac操作系统

• 支持多种浏览器：firefox、chrome、 ie、edge、opera、safari

• 支持多语言：python\java\C#\js\Ruby\PHP

• 成熟稳定功能强大：被大公司使用。google、华为、百度、腾讯

  后续大家在选择自动化工具的时，这几个特点就是选择工具的依据。

1.3 selenium发展史

selenium 1.0

• selenium IDE

  • 是firefox的一款插件，通过它可以记录用户的操作并生成对应的自动化脚本。

• selenium grid 通过grid可以将脚本下发到不同的电脑在不同的浏览器上面执行。

 

selenium RC

由JS封装的一个工具，用来对浏览器进行操作的。

• selenium 2.0

  • selenium 1.0 + webdriver

  • 针对浏览器的操作都是通过webdriver来实现的。

  • 支持的语言更多

• selenium 3.0

  • 删除了selenium RC

  • 全面支持java8

  • 支持macOS，支持safari浏览器

  • 支持微软最新的EDGE浏览器，支持更多的浏览器

 

如何确认selenium安装完成：可以通过pip show selenium进行查看

 

3. 元素定位

• id定位
• name定位
• class_name定位
• tag_name定位
• link_text定位
• partail_link_text定位
• xpath定位
• css定位

3.1 ID定位

• 通过元素的ID属性值来进行元素定位  ，在html标准规范中 ID值是唯一的

  说明： 元素要有ID属性

• 定位方法： find_element_by_id(id) # id参数表示的是id的属性值

# 通过ID定位到用户名输入框并在用户名输入框中输入admin
driver.find_element_by_id("userA").send_keys("admin")
# 通过ID定位到密码输入框并在密码输入框中输入123456
driver.find_element_by_id("passwordA").send_keys("123456")

3.2 name定位

• 通过元素的name属性值为进行元素定位 name属性值 在HTML页面中，是可以重复的。

  说明：元素要有name属性

• 定位方法: find_element_by_name(name) # name 参数表示的是name的属性值

# 通过name定位用户名，输入admin
driver.find_element_by_name("userA").send_keys("admin")
# 通过name定位密码， 输入123456
driver.find_element_by_name("passwordA").send_keys("123456")

3.3 class_name定位

• 通过元素的class属性值进行元素定位 class属性值是可重复的

  说明：元素必须要有class属性

• 定位方法： find_element_by_class_name(class_name) # class_name参数表示的是class的其中一个属性值

# 1).通过class_name定位电话号码A，并输入：18611111111
driver.find_element_by_class_name("telA").send_keys("18611111111")
# 2).通过class_name定位电子邮箱A，并输入：123@qq.com
driver.find_element_by_class_name("dzyxA").send_keys("123@qq.com")

3.4 tag_name定位

• 通过元素的标签名称进行定位，   在同一个html页面当中，相同标签元素会有很多。

  这种定位元素的方式不建议大家在工作当中使用。

• 定位方法: find_element_by_tag_name(tag_name) # tag_name表示的是元素的标签名称。

  如果有重复的元素，定位到的元素默认都是第一个元素

3.5 link_text定位

• 通过超链接的全部文本信息进行元素定位 ,主要用来定位a标签
• 定位方法： find_element_by_link_text(link_text) # link_text参数代表的是a标签的全部文本内容。

# 通过linu_text定位到新浪网站并点击
# driver.find_element_by_link_text("新浪").click()
driver.find_element_by_link_text("访问 新浪 网站").click()

3.6 partial_link_text定位

• 通过超链接的局部文本信息进行元素定位，主要用来定位a标签
• 定位方法：find_element_by_partial_link_text(partial_link_text) # partial_link_text表示的是a标签 的局部文本内容

# 通过partial_link_text定位到新浪网站并点击
driver.find_element_by_partial_link_text("访问 新浪 网站").click()

3.7 定位一组元素

• 定位一组元素的方法:

  find_elements_by_id(id)    

  find_elements_by_tag_name(tag_name)

• 定位一组元素返回的值是一个列表

可以通过下标来使用列表中的元素

# 使用tag_name定位密码输入框(第二个input标签)，并输入：123456
elements = driver.find_elements_by_tag_name("input")
elements[2].send_keys("123456")

3.8 xpath定位

定位方法: find_element_by_xpath(xpath) # xpath表达式

按Ctrl+F 可以在搜索框对xpath和css表达式进行校验

• 路径定位

绝对路径 表达式是以 /html开头，元素的层级之间是以 / 分隔

相同层级的元素可以使用下标，下标是从1开始.

需要列出元素所经过的所有层级元素 , 工作当中， 一般不使用绝对路径

例：/html/body/div/fieldset/form/p[1]/input

 

相对路径   匹配任意层级的元素，  是以  //tag_name或者//* 开头

也可以使用下标，下标是从1开始。

例子：//p[5]/button

# 通过xpath的绝对路径定位用户名输入框并输入admin
driver.find_element_by_xpath("/html/body/div/fieldset/form/p/input").send_keys("admin")
# 等待3S
time.sleep(3)
# 通过xapth的相对路径定位密码输入框并输入123
driver.find_element_by_xpath("//form/p[2]/input").send_keys("123")

• 属性定位

//*或者//tag_name //*[@attribute='value'] # attribute表示的是元素的属性名，value表示的是元素对应属性值

如果使用class的属性进行元素定位，需要用到class里面所有的值

# 利用元素的属性信息精确定位用户名输入框，并输入：admin
driver.find_element_by_xpath("//*[@placeholder='请输入用户名']").send_keys("admin")

• 属性与逻辑结合

//* 或者//tag_name 开头 //*[@attribute1='value1' and @attribute2='value2']

# 使用属性与逻辑结合定位策略，在test1对应的输入框里输入：admin
driver.find_element_by_xpath("//input[@name='user' and @class='login']").send_keys("admin")

• 属性与层级结合

是以//*或者//tag_name开头 //p[@id='pa']/input

在任意层给当中，都可以结合属性来使用

# 使用层级与属性结合定位策略，在test1对应的输入框里输入：admin
driver.find_element_by_xpath("//p[@id='p1']/input").send_keys("admin")

3.9 css定位

CSS定位元素的方法： find_element_by_css_selector(css_selector) # css_selector表示的是CSS选择器表达式

• id选择器

表达式： #id # 表示通过元素的ID属性进行元素选择 id 表示的的id属性的属性值

• class选择器

表达式： .class  .表示通过元素的class属性进行元素选择， class表示的class属性的其中一个属性值

# 通过css的id选择器定位用户名输入框，输入admin
driver.find_element_by_css_selector("#userA").send_keys("admin")
# 通过css的class选择器定位电子邮箱输入框，输入123@qq.com
driver.find_element_by_css_selector(".emailA").send_keys("123@qq.com")

• 元素选择器

就是通过元素标签名称来选择元素 。表达式： tag_name 不推荐使用

• 属性选择器

就是通过元素的属性来选择元素。 表达式：[attribute='value'] #attribute 表示的是属性名称，value表示的是属性值

如果使用的是class属性，需要带上class的全部属性值

# 通过css的元素选择器定位用户名输入框，输入admin
driver.find_element_by_css_selector("input").send_keys("admin")
# 通过css的属性选择器定位电子邮箱输入框，输入123@qq.com
driver.find_element_by_css_selector("[class='emailA dzyxA']").send_keys("123@qq.com")

• 层级选择器

• 父子层级关系选择 器

  • 表达式： element1>element2 通过element1来找element2，并且element2是element1的直接子元素

• 隔代层级关系选择器

• 表达式： element1 element2 通过element1来找element2，并且element2是element1的后代元素

  # 通过css的层级选择器定位用户名输入框输入admin
  driver.find_element_by_css_selector(".zc #userA").send_keys("admin")

   

CSS扩展

• input[type^='value'] input表示标签名称，type表示属性名称， value表示的文本内容

  查找元素type属性值是以value开头的元素

• input[type$='value'] input表示标签名称，type表示属性名称， value表示的文本内容

  查找元素type属性值以value结尾的元素

• input[type*='value'] input表示标签名称，type表示属性名称， value表示的文本内容

  查找元素type属性值包含value的元素

4. 元素操作及浏览器操作方法

1. 元素操作

• 点击操作   element.click()
• 输入操作   element.send_keys('xxx')
• 清楚操作   element.clear()

driver = webdriver.Chrome()
driver.get("file://D:/BaiduNetdiskDownload/02讲义 笔记 软件/09、UI自动化测试及黑马头条项目实战/UI自动化/UI自动化/web自动化工具集合/pagetest/注册A.html")
driver.find_element(By.ID, 'userA').send_keys("userA")
driver.find_element(By.ID, 'passwordA').send_keys('password')
driver.find_element(By.CSS_SELECTOR, '.telA').send_keys('10086')
driver.find_element(By.XPATH, "//*[@name='emailA']").send_keys("123@qq.com")
# 修改电话号码
time.sleep(3)
driver.find_element(By.ID, 'userA').clear()
driver.find_element(By.ID, 'userA').send_keys("186000000")
time.sleep(3)
driver.quit()

2.浏览器操作

1. maximize_window() 最大化浏览器窗口 --> 模拟浏览器最大化按钮</font>  实例化浏览器驱动之后，就可以调用窗口最大化的方法

2. set_window_size(width, height) 设置浏览器窗口大小 --> 设置浏览器宽、高(像素点)

3. set_window_position(x, y) 设置浏览器窗口位置 --> 设置浏览器位置

   x,y是一个坐标点，通过此坐标点确定浏览器最左上角的位置，以此确定浏览器在屏幕上的位置。

   x, y不能超过屏幕的分辨率大小

4. back() 后退 --> 模拟浏览器后退按钮

5. forward() 前进 --> 模拟浏览器前进按钮

6. refresh() 刷新 --> 模拟浏览器F5刷新

7. close() 关闭当前窗口 --> 模拟点击浏览器关闭按钮

8. quit() 关闭浏览器驱动对象 --> 关闭所有程序启动的窗口

10. title 获取页面title

11. current_url 获取当前页面URL