web UI自动化介绍

一、web UI自动化介绍

1.1 执行UI自动化测试前提

1. 业务流程不频繁改动
2. UI 元素不频繁改动，界面稳定
3. 需要频繁回归的场景
4. 多平台运行，组合遍历型、大量重复的任务s

业界使用较多的web UI自动化工具是 Selenium

1.2 Selenium介绍以及知识点梳理

支持多语言，行业内最火最主流

• 用于web浏览器测试的工具

• 支持的浏览器包括IE，Firefox，Safari，Chrome，Edge等

• 使用简单，可使用Java，Python等多种语言编写用例脚本

• 主要由三个工具构成：WebDriver、IDE、Grid

• 能力建设——初级

Selenium 的架构：

brower

webdriver

selenium

client多语言

chrome

IE

FireFox

chromedriver

IEdriver

GeckoDriver

selenium

python

java

ruby

在客户端通过各种语言调用selenium库，selenium 调用对应的浏览器驱动，通过浏览器驱动去操作浏览器进行各种操作。

形式	章节	描述
知识点	Web 自动化测试价值与体系	价值体系 技术选型 学习路线
知识点	环境安装与使用	selenium、 chromedriver、 firefox geckodriver
知识点	自动化用例录制	selenium IDE、录制、回放、基本使用
知识点	自动化测试用例结构分析	录制代码解析，代码结构优化
知识点	web 浏览器控制	打开网页、刷新、回退、最大化、最小化
知识点	常见控件定位方法	id name css xpath link 定位
知识点	强制等待与隐式等待	介绍 selenium 经典的三种等待方式
知识点	常见控件交互方法	点击，输入，清空，获取元素文本、尺寸等属性信息
实战	测试人论坛搜索功能自动化测试	用例设计、用例编写、断言

• 中级

  形式	章节	描述
  知识点	高级定位-css	css 使用场景、语法
  知识点	高级定位-xpath	xpath 使用场景、语法
  知识点	显式等待高级使用	显式等待原理与使用
  知识点	高级控件交互方法	右键点击、页面滑动、表单填写等自动化动作
  知识点	网页 frame 与多窗口处理	多窗口，多 frame 下的窗口识别与切换
  知识点	文件上传弹框处理	文件上传的自动化与弹框处理机制
  知识点	自动化关键数据记录	行为日志、截图，page source
  实战	电子商务产品实战	用例设计、日志封装、测试报告
  训练营	知名产品web自动化测试实战	用例设计、日志封装、测试报告

• 高级

  形式	章节	描述
  知识点	浏览器复用	利用远程调试技术实现自动化登录
  知识点	Cookie 复用	利用 cookie 复用实现自动化登录
  知识点	page object 设计模式	page object 模式的发展历史介绍、六大设计原则
  知识点	异常自动截图	测试用例失败时自动截图
  知识点	测试用例流程设计	测试装置的应用，套件级别的初始化与清理、用例级别的初始化与清理
  实战	电子商务产品实战	page object 设计模式应用、BasePage 封装、基于 page object 模式的测试用例编写
  训练营	web自动化测试进阶实战	page object 设计模式应用、BasePage 封装、基于 page object 模式的测试用例编写

• 拓展

  1. selenium高级用法

  形式	章节	描述
  知识点	selenium 多浏览器处理	chrome、firefox 等浏览器的自动化支持
  知识点	执行 javascript 脚本	使用 selenium 直接在当前页面中进行 js 交互
  知识点	selenium option 常用操作	selenium option 的介绍与使用
  知识点	capability 配置参数解析	capability 用法 ，firefox chrome 等浏览器的专属 capability

  2. 新一代前端测试框架

  形式	章节	描述
  知识点	cypress 测试框架介绍	web 自动化测试框架 cypress

二、Selenium 学习

2.1 基础

2.1.1 环境安装与基础使用

1. 准备好Python环境(百度python安装教程)

2. 准备好selenium依赖

   pip install selenium

3. driver的下载与配置（以chrome为例）

   1. 下载chrome的webdriver

      官方链接：

      https://www.selenium.dev/documentation/en/webdriver/driver_requirements/

      淘宝镜像，下载更快

      https://npm.taobao.org/mirrors/chromedriver/

      在下载时需要 选择与浏览器对应的版本，如果找不到完全一样的，可以选取个最相近的，一般大版本相同也是可以正常使用的

   2. 配置环境变量

      为了能够直接使用webdriver，而不是使用时去写死webdriver的地址，需要将webdriver所在的文件夹路径加到 环境变量(PATH)中

   3. 验证

      打开一个cmd命令行，输入：chromedriver --version ，可以看到版本信息则说明chromedriver环境变量配置成功

4. 在代码中import对应的依赖并打开百度

   基本使用

   from time import sleep
   
   from selenium import webdriver
   # 初始化浏览器驱动，这里选择Chrome浏览器，需要配置好webdriver的环境变量
   driver = webdriver.Chrome()
   # 浏览器打卡百度
   driver.get('http://www.baidu.com')
   sleep(10)
   # 关闭浏览器
   driver.close()
   

   运行脚本能成功打开百度则说明配置成功

2.1.2 web浏览器控制

在初始化driver后可以使用以下方法对浏览器进行控制

初始化driver即：diver = webdriver.Chrome

然后使用driver调用以下方法：

方法	使用场景	操作
get	web自动化测试第一步	打开浏览器
refresh	模拟浏览器刷新	浏览器刷新
back	模拟退回步骤	浏览器退回
maximize_window	模拟浏览器最大化	最大化浏览器
minimize_window	模拟浏览器最小化	最小化浏览器

from time import sleep
from selenium import webdriver
# 初始化浏览器驱动，这里选择Chrome浏览器，需要配置好webdriver的环境变量
driver = webdriver.Chrome()
# 浏览器打卡百度
driver.get('https://ceshiren.com/')
sleep(3)
# 刷新页面
driver.refresh()
driver.get('http://www.baidu.com')
# 浏览器返回操作
driver.back()
sleep(1)
# 最小化窗口
driver.minimize_window()
sleep(1)
driver.maximize_window()
sleep(1)
# 关闭浏览器
driver.close()

2.1.3 常见控件的八大定位方式

2.1.3.1 八大定位方式介绍

控件的定位方式很多，但常用的只有以下四种：id、name、xpath、css selector ，后续会详细介绍

方式	描述	使用方法
id（重点）	id 属性对应的值	driver.find_element(By.ID, “ID属性”)
name（重点）	name 属性对应的值	driver.find_element(By.NAME, “Name属性对应的值”)
xpath（重点）	xpath表达式	driver.find_element(By.XPATH, “xpath表达式”)
css selector（重点）	css 表达式	driver.find_element(By.CSS_SELECTOR, “css表达式”)
link text	查找其可见文本与搜索值匹配的锚元素	driver.find_element(By.LINK_TEXT,“文本信息”)
partial link text	查找其可见文本包含搜索值的锚元素。 如果多个元素匹配，则只会选择第一个元素。
class name	class 属性对应的值	driver.find_element(By.CLASS_NAME,‘el-submenu__title’)
tag name	标签名称	很少用

使用格式：

# 示例，两种方式作用一模一样
# 官方建议使用下面的方式
driver.find_element_by_id("su")
driver.find_element(By.ID, "su")  # 推荐你使用

• 通过ID定位：driver.find_element(By.ID, "ID属性对应的值")

  import time
  from selenium import webdriver
  from selenium.webdriver.common.by import By
  driver = webdriver.Chrome()
  driver.get('https://ceshiren.com/')
  # 强制等待3秒，等待元素加载完毕
  time.sleep(3)
  # 点击类别
  ele = driver.find_element(By.ID,'ember24').click()
  time.sleep(30)
  

2.1.3.2 NAME、ID定位

• name定位格式：driver.find_element(By.NAME, "Name属性对应的值")
• id定位格式：driver.find_element(By.ID, "ID对应的值")

2.1.3.3 css_selector定位

• 格式： driver.find_element(By.CSS_SELECTOR, "css表达式")
• 复制绝对定位
• 编写 css selector 表达式（后面章节详细讲解）

2.1.3.4 通过XPATH定位

• 格式： driver.find_element(By.XPATH, "xpath表达式")

• chrome复制绝对定位

• 编写 xpath 表达式（后面章节详细讲解）

  

2.1.4 强制等待与隐式等待

​ 在chrome打开网页的时候，有时候由于网络加载、渲染等问题，无法定位到元素，需要等待元素加载渲染，否则会出现异常的报错，比如找不到元素等。

​ 等待元素加载分为以下三种：强制等待、隐式等待、以及显示等待

2.4.1 强制（直接）等待

• 原理：直接在操作元素前添加sleep() 函数直接等待几秒，让元素加载成功

• 缺点：难以确定元素加载的具体等待时间，时间短了无法定位到元素，时间长了影响执行效率，可以通过隐式等待解决

2.4.2 隐式等待

• 原理：设置一个等待时间，轮询查找（默认0.5秒）元素是否出现，如果没出现就抛出异常

• 隐式等待相比强制等待更智能，在脚本中我们一般看不到等待语句，但是它会在每个页面加载的时候自动等待；隐式等待只需要声明一次，一般在打开浏览器后进行声明.

  声明之后对整个drvier的生命周期都有效，后面不用重复声明。

 driver.implicitly_wait(3)

• 缺点：

  • 元素可以找到，使用点击等操作，出现报错

  • 原因：

    • 页面元素加载是异步加载过程，通常html会先加载完成，js、css其后，导致进行交互操作时失败
    • 元素存在与否是由HTML决定，元素的交互是由css或者js决定
    • 隐式等待只关注元素能不能找到，不关注元素能否点击或者进行其他的交互

2.4.3 显式等待

• 原理：在最长等待时间内，轮询，是否满足结束条件

• 格式: WebDriverWait(driver实例, 最长等待时间, 轮询时间).until(结束条件)

  def wait_until():
      driver = webdriver.Chrome()
      driver.get("https://vip.ceshiren.com/#/ui_study")
      WebDriverWait(driver, 10).until(
          expected_conditions.element_to_be_clickable(
              (By.CSS_SELECTOR, '#success_btn')))
      driver.find_element(By.CSS_SELECTOR, "#success_btn").click()
  

2.4.4 总结

类型	使用方式	原理	适用场景
直接等待	time.sleep(等待时间))	强制线程等待	调试代码，临时性添加
隐式等待	driver.implicitly_wait(等待时间)	在时间范围内，轮询查找元素	解决找不到元素问题，无法解决交互问题
显式等待	WebDriverWait(driver实例, 最长等待时间, 轮询时间).until(结束条件)	设定特定的等待条件，轮询操作	解决特定条件下的等待问题，比如点击等交互性行为

2.1.5 常见控件的交互方法

• 点击 click()

  # 点击百度搜索框
  driver.find_element(By.ID,"kw").click()
  

• 输入 send_keys('xx')

  # 输入"霍格沃兹测试开发"
  driver.find_element(By.ID,"kw").send_keys("霍格沃兹测试开发")
  

• 清空 clear()

  # 清空搜索框中信息
  driver.find_element(By.ID,"kw").clear()
  

• 获取元素属性信息

  • 目的：根据这些信息进行断言或者调试

  • 获取元素信息的方法

    • 获取元素文本
    • 获取元素的属性（html的属性值）

    # 获取元素文本
    driver.find_element(By.ID, "id").text
    # 获取这个元素的name属性的值
    driver.find_element(By.ID, "id").get_attribute("name")
    

2.1.6 练习1-测试人论坛搜索自动化

测试人搜索功能测试—进入测试人论坛首页(https://ceshiren.com)

1. 点击搜索按钮
2. 输入搜索关键词
3. 输入回车进行搜索

预期结果判断：

1. 搜索成功
2. 搜索结果列表包含关键字

from time import sleep

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions
from selenium.webdriver.support.wait import WebDriverWait


class TestCeshirenSearch:
    def setup_class(self):
        # 初始化driver并打开首页
        self.driver = webdriver.Chrome()
        self.driver.get('https://ceshiren.com')
        # 设置 隐式等待,整个测试期间只需要设置一次
        self.driver.implicitly_wait(5)

    def teardown_class(self):
        sleep(3)
        # 关闭 浏览器
        self.driver.close()

    def test_search(self):
        # 点击搜索 按钮
        self.driver.find_element(By.ID, 'search-button').click()
        # 在搜索输入框输入pytest
        self.driver.find_element(By.ID, 'search-term').send_keys('pytest')
        
        # 显示等待5秒，直到 搜索结果 按钮可点击
        WebDriverWait(self.driver, 5).until(
            expected_conditions.element_to_be_clickable(
                self.driver.find_element(By.CSS_SELECTOR, '.results')
            )
        )
        # 查看搜索结果 并根据 结果中是否包含搜索的元素进行 断言
        el_topic_list = self.driver.find_element(By.CSS_SELECTOR, ".topic-list-body")
        topic_title_text = el_topic_list.text
        assert 'pytest' in topic_title_text

2.2 进阶

HTML中常用标签，定位方式一般选取 css定位 或者xpath 定位，需要对html中常用标签有一定的了解，以下是一些基本的标签

标题：
、
、
、
、
、
、