Web 自动化测试

霍格沃兹测试开发学社

ceshiren.com

Web 自动化测试场景

什么时候可以做 UI 自动化测试

业务流程不频繁改动
UI 元素不频繁改动
需要频繁回归的场景
核心场景等

Web 自动化测试相关技术

Selenium：支持多语言，行业内最火最主流
Pytest：最好用最全面的单元测试框架
Allure：测试报告

Selenium 简介

官方网站

https://www.selenium.dev/
简介
- 用于 web 浏览器测试的工具
- 支持的浏览器包括 IE，Firefox，Safari，Chrome，Edge 等
- 使用简单，可使用 Java，Python 等多种语言编写用例脚本
- 主要由三个工具构成：WebDriver、IDE、Grid

Selenium 原理

Selenium 环境配置步骤

准备好 Python 环境
准备好 selenium 依赖
driver 的下载与配置（Selenium 4.11 版本后不需要手动配置）
在代码中 import 对应的依赖

Selenium 的安装

前提：
- 配置好 python 环境
- 配置好 pip 工具
安装： pip install selenium

Driver 的下载与配置步骤

下载浏览器对应的 driver，谷歌浏览器和火狐浏览器选一个即可。
- 官方链接
配置 driver 的环境变量
重启命令行工具，验证是否配置成功

1. chromedriver 下载

chromedriver 下载
- 确定与浏览器匹配的 driver 版本
- 根据使用的操作系统下载相应的 chromedriver
淘宝镜像：
- https://npm.taobao.org/mirrors/chromedriver/

2. chromedriver 环境变量配置

Windows详细配置步骤：
- https://ceshiren.com/t/topic/58

3. 验证配置 chromedriver 是否成功

重启命令行
输入：chromedriver --version
出现 chromedriver 版本信息则配置成功 -->

geckodriver 配置

下载 geckodriver
- 没有 chromedriver 类似的对应关系，默认下载最新的 driver 版本
- 根据使用的操作系统下载相应的 geckodriver
- 淘宝镜像：https://registry.npmmirror.com/binary.html?path=geckodriver/
配置步骤与谷歌浏览器的相同
输入 geckodriver --version，验证是否配置成功。

课堂练习

完成 Selenium 环境配置

在 Python 中的使用

# 谷歌浏览器演示

# 导入selenium 包
from selenium import webdriver

# 创建一个 Chromdriver 的实例
driver = webdriver.Chrome()
# 打开网址
driver.get("https://www.baidu.com/")
# 关闭driver
driver.quit()

# 火狐浏览器演示

# 导入selenium 包
from selenium import webdriver

# 创建一个 Geckodriver 的实例。Firefox()会从环境变量中寻找浏览器驱动
driver = webdriver.Firefox()
# 打开网址
driver.get("https://www.baidu.com/")
# 关闭driver
driver.quit()

课堂练习

运行第一个 web 自动化脚本

Selenium IDE 用例录制

使用场景：
- 刚开始入门 UI 自动化测试
- 团队代码基础较差
- 技术成长之后学习价值不高

Selenium IDE 的下载以及安装

官网：https://www.selenium.dev/
Chrome 插件：https://chrome.google.com/webstore/detail/selenium-ide/mooikfkahbdckldjjndioackbalphokd
Firefox 插件：https://addons.mozilla.org/en-US/firefox/addon/selenium-ide/
注意：Chrome 插件在国内无法下载，Firefox 可以直接下载。

启动

安装完成后，通过在浏览器的菜单栏中点击它的图标来启动它：
如果没看到图标，首先确保是否安装了 Selenium IDE 扩展插件
通过以下链接访问所有插件
- Chrome: chrome://extensions
- Firefox: about:addons

Selenium IDE 常用功能

新建、保存、打开
开始和停止录制
运行 8 中的所有的实例
运行单个实例
调试模式
调整案例的运行速度
要录制的网址
实例列表
动作、目标、值
对单条命令的解释
运行日志

录制场景

打开百度首页。
输入搜索关键字：Selenium。
找到 Selenium 官网打开。
标题文本断言。
录制脚本导出。
脚本回放验证。

课堂练习

打开测试人社区。
输入搜索关键字：Selenium。
打开第一个帖子链接。
标题文本断言。
录制脚本导出。
脚本回放验证。

其他常用功能

用例管理
保存和回放

课堂练习

保存测试人社区录制的脚本

Selenium IDE 脚本导出

Java
Python

标准的用例结构

用例标题
前提条件
用例步骤
预期结果
实际结果

用例标题	类型	前提条件	用例步骤	预期结果	实际结果
搜狗搜索功能	正例	进入搜狗首页	1. 输入搜索关键词 2.按下回车键	1. 搜索成功 2. 搜索结果列表包含关键字

用例结构对比

	自动化测试用例	作用
用例标题	测试包、文件、类、方法名称	用例的唯一标识
前提条件	setup、setup_class（Pytest）	测试用例前的准备动作，比如读取数据或者 driver 的初始化
用例步骤	测试方法内的代码逻辑	测试用例具体的步骤行为
预期结果	assert 实际结果 = 预期结果	断言，印证用例是否执行成功
实际结果	assert 实际结果 = 预期结果	断言，印证用例是否执行成功
后置动作	teardown、teardown_class（Pytest）	脏数据清理、关闭 driver 进程

Web 自动化用例生成

脚本步骤：
- 访问搜狗网站
- 搜索框输入“霍格沃兹测试开发”
- 点击搜索按钮

# Generated by Selenium IDE
import pytest
import time
import json
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.support import expected_conditions
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities


class TestSearch():
    def setup_method(self, method):
        self.driver = webdriver.Firefox()
        self.vars = {}

    def teardown_method(self, method):
        self.driver.quit()

    def test_search(self):
        self.driver.get("https://www.sogou.com/")
        self.driver.set_window_size(921, 692)
        self.driver.find_element(By.ID, "query").click()
        self.driver.find_element(By.ID, "query").send_keys("霍格沃兹测试开发")
        self.driver.find_element(By.ID, "stb").click()

课堂练习

导出测试人社区搜索脚本

脚本优化

# Generated by Selenium IDE
import pytest
import time
import json
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.support import expected_conditions
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities


class TestSearch():
    def setup_method(self, method):
        self.driver = webdriver.Firefox()
        # 添加全局隐式等待
        self.driver.implicitly_wait(5)

    def teardown_method(self, method):
        self.driver.quit()

    def test_search(self):
        self.driver.get("https://www.sogou.com/")
        self.driver.set_window_size(921, 692)
        self.driver.find_element(By.ID, "query").click()
        self.driver.find_element(By.ID, "query").send_keys("霍格沃兹测试开发")
        self.driver.find_element(By.ID, "stb").click()
        # 等待界面加载
        time.sleep(5)
        # 获取搜索结果中元素的文本信息
        res = self.driver.find_element(By.ID, "sogou_vr_30000000_0").get_attribute("text")
        print(res)
        # 添加断言
        assert "霍格沃兹测试开发" in res
        # 查看界面展示
        time.sleep(5)

课堂练习

优化测试人社区搜索脚本

生成测试报告

# Generated by Selenium IDE
import allure
import pytest
import time
import json
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.support import expected_conditions
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities

@allure.feature("搜狗搜索功能")
class TestSearch():
    def setup_method(self, method):
        self.driver = webdriver.Firefox()
        # 添加全局隐式等待
        self.driver.implicitly_wait(5)

    def teardown_method(self, method):
        self.driver.quit()

    @allure.story("正向搜索")
    def test_search(self):
        with allure.step("打开浏览器进入搜狗首页"):
            self.driver.get("https://www.sogou.com/")
        with allure.step("设置浏览器窗口尺寸"):
            self.driver.set_window_size(921, 692)
        with allure.step("点击搜索框元素"):
            self.driver.find_element(By.ID, "query").click()
        with allure.step("搜索框中输入搜索关键词"):
            self.driver.find_element(By.ID, "query").send_keys("霍格沃兹测试开发")
        with allure.step("点击搜索按钮"):
            self.driver.find_element(By.ID, "stb").click()
        # 等待界面加载
        time.sleep(5)
        # 获取搜索结果中元素的文本信息
        with allure.step("搜索结果中包含搜索关键词"):
            res = self.driver.find_element(By.ID, "sogou_vr_30000000_0").get_attribute("text")
            print(res)
            # 添加断言
            assert "霍格沃兹测试开发" in res
        # 查看界面展示
        time.sleep(5)

课堂练习

生成测试人社区搜索脚本测试报告

浏览器控制

模拟功能测试中对浏览器的操作

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

打开网页

get 方法打开浏览器

from selenium import webdriver
import time

def window_start():
    # 实例化chromedriver
    driver = webdriver.Chrome()
    # 打开网站
    driver.get('http://www.ceshiren.com')
    # 等待一秒
    time.sleep(1)

if __name__ == '__main__':
    window_start()

刷新

refresh 方法刷新页面

from selenium import webdriver
import time

def window_refresh():
    # 实例化chromedriver
    driver = webdriver.Chrome()
    # 打开网站
    driver.get('http://www.ceshiren.com')
    # 等待一秒
    time.sleep(1)
    # 刷新网页
    driver.refresh()
    # 等待一秒
    time.sleep(1)

if __name__ == '__main__':
    window_refresh()

回退

用 back 方法回退到上一个界面

from selenium import webdriver
import time
from selenium.webdriver.common.by import By

def window_back():
    # 实例化chromedriver
    driver = webdriver.Chrome()
    # 打开网站
    driver.get('http://www.ceshiren.com')
    # 等待一秒
    time.sleep(1)
    driver.find_element(By.XPATH,"//*[@id='ember35']").click()
    # 等待一秒
    time.sleep(1)
    # 返回上一个界面
    driver.back()
    # 等待一秒
    time.sleep(1)

if __name__ == '__main__':
    window_back()

最大化

maximize_window 方法使窗口最大化

def max_window():
    # 实例化chromedriver
    driver = webdriver.Chrome()
    # 打开网站
    driver.get('http://www.ceshiren.com')
    # 等待一秒
    time.sleep(1)
    # 屏幕最大化
    driver.maximize_window()
    # 等待一秒
    time.sleep(1)

if __name__ == '__main__':
    max_window()

最小化

minimize_window 方法使窗口最小化

from selenium import webdriver
import time

def min_window():
    # 实例化chromedriver
    driver = webdriver.Chrome()
    # 打开网站
    driver.get('http://www.ceshiren.com')
    # 等待一秒
    time.sleep(1)
    # 屏幕最小化
    driver.minimize_window()
    # 等待一秒
    time.sleep(1)

if __name__ == '__main__':
    min_window()

浏览器操作总结

课堂练习

完成浏览器控制练习

Web 自动化测试常见定位

Selenium 提供了八种定位方式：https://www.selenium.dev/documentation/webdriver/elements/locators/

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

Selenium 常用定位方式

id 定位：driver.find_element(By.ID, "ID属性对应的值")
name 定位：driver.find_element(By.NAME, "Name属性对应的值")
css selector 定位：driver.find_element(By.CSS_SELECTOR, "css表达式")
xpath 定位：driver.find_element(By.XPATH, "xpath表达式")
link 定位：driver.find_element(By.LINK_TEXT,"文本信息")

Web 自动化测试实战练习

被测产品
需求说明
练习思路

被测产品

测试人论坛是一个致力于软件测试行业技术交流和分享的社区网站。我们可以找到大量关于软件测试行业的文章、博客、问答、视频、课程等内容，包括自动化测试、性能测试、安全测试、测试开发等方向。

需求说明

完成测试人网站搜索功能的 Web 自动化测试。
- 编写测试用例：搜索
- 编写测试断言

实战思路

测试用例分析

用例标题	前提条件	用例步骤	预期结果	实际结果
测试人搜索功能	进入测试人论坛首页	1. 点击搜索按钮 2. 输入搜索关键词 3. 点击搜索按钮	1. 搜索成功 2. 搜索结果列表包含关键字

课堂练习

编写测试人社区搜索脚本，完成断言
手动编写元素定位表达式

"""
__author__ = '霍格沃兹测试开发学社'
__desc__ = '更多测试开发技术探讨，请访问：https://ceshiren.com/t/topic/15860'
"""
# 结合pytest测试框架
# 用例标题=文件名+类名+方法名
import time

from selenium import webdriver
from selenium.webdriver.common.by import By


class TestCeshiren:
    def test_search(self):
        """
        前提条件： 进入测试人论坛的搜索页面
        测试步骤： 1. 输入搜索关键词
                  2. 点击搜索按钮
        预期结果/实际结果
        :return:
        """
        # 打开浏览器
        driver = webdriver.Chrome()
        driver.implicitly_wait(3)
        # 打开被测地址
        driver.get("https://ceshiren.com/search?expanded=true")
        # 定位到搜索输入框，并输入搜索内容
        driver.find_element(By.CSS_SELECTOR, "[placeholder='搜索']").send_keys("appium")
        # 定位到搜索按钮，并点击
        driver.find_element(By.CSS_SELECTOR, ".search-cta").click()
        #断言
        web_element=driver.find_element(By.CSS_SELECTOR, ".topic-title")、
        assert "appium" in web_element.text.lower()

课堂练习

优化测试人搜索脚本
- 前置：setup
  - 初始化浏览器驱动
- 后置：teardown
  - 关闭浏览器

from selenium import webdriver
from selenium.webdriver.common.by import By


class TestCeshirenLinear:

    # 前置处理：初始化
    def setup(self):
        self.browser = webdriver.Chrome()
        self.browser.implicitly_wait(10)
        self.browser.maximize_window()

    # 后置处理：收尾
    def teardown(self):
        self.browser.quit()

    # 测试用例
    def test_search(self):

        # 访问测试人社区
        self.browser.get("https://ceshiren.com/")

        # 点击搜索按钮
        search_button = self.browser.find_element(By.ID, "search-button")
        search_button.click()

        # 输入搜索关键词
        search_input = self.browser.find_element(By.ID, "search-term")
        search_input.clear()
        search_input.send_keys("hogwarts")

        # 点击搜索结果项
        result_items = self.browser.find_elements(By.CSS_SELECTOR, "div.user-titles")
        top_item = result_items[0]
        top_item_name = top_item.find_element(By.CSS_SELECTOR, "span.name").text
        top_item.click()

总结

Web 自动化的环境配置和用例录制
Web 自动化脚本编写

Web 自动化测试

目录

Web 自动化测试场景

什么时候可以做 UI 自动化测试

Web 自动化测试相关技术

Selenium 简介

Selenium 原理

Selenium 环境配置步骤

Selenium 的安装

Driver 的下载与配置步骤

1. chromedriver 下载

2. chromedriver 环境变量配置

3. 验证配置 chromedriver 是否成功

geckodriver 配置

课堂练习

在 Python 中的使用

课堂练习

Selenium IDE 用例录制

Selenium IDE 的下载以及安装

启动

Selenium IDE 常用功能

录制场景

课堂练习

其他常用功能

课堂练习

Selenium IDE 脚本导出

标准的用例结构

用例结构对比

Web 自动化用例生成

课堂练习

脚本优化

课堂练习

生成测试报告

课堂练习

浏览器控制

打开网页

刷新

回退

最大化

最小化

浏览器操作总结

课堂练习

Web 自动化测试常见定位

Selenium 常用定位方式

Web 自动化测试实战练习

被测产品

需求说明

实战思路

测试用例分析

课堂练习

课堂练习

总结