电子商城Web自动化测试实战

师资培训

霍格沃兹测试开发 ceshiren.com

大纲

• Web 自动化测试实战
• Web 自动化测试技术与体系

Web 自动化测试实战

师资培训

安装 Selenium 库

pip 命令来安装 Selenium 库：

pip install selenium

访问百度验证环境

1. 创建项目。
2. 编写代码打开百度首页。

import time
# 导入selenium 包
from selenium import webdriver

# 创建一个 Chromdriver 的实例。Chrome()会从环境变量中寻找浏览器驱动
driver = webdriver.Chrome()
# 打开网址
driver.get("https://ceshiren.com/")
# 强等10s 秒
time.sleep(10)

课堂练习

1. 安装 Selenium。
2. 配置 chromedriver。
3. 编写访问ceshiren论坛的自动化脚本验证环境。

Selenium IDE

• 介绍
• 安装
• 录制脚本并导出
• 回放验证脚本

Selenium IDE 介绍

Selenium IDE 安装

1. 下载 Selenium IDE CRX 文件 保存在熟悉的位置。

2. 打开 Google Chrome 浏览器。

3. 导航至 扩展程序 ，或从菜单中选择 更多工具 --> 扩展程序。

4. 请确保右上角的 开发者模式 选项已启用。

5. 单击页面左上角的 加载已解压的扩展程序 按钮。

6. 浏览到您保存 CRX 文件的文件夹并选择该文件夹。然后点击 选择文件夹 来安装。

7. 完成安装后，Selenium IDE 图标将出现在 Chrome 的工具栏上。

录制场景

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

课堂练习

1. 打开测试人论坛。
2. 输入搜索关键字：Selenium。
3. 打开第一个帖子链接。
4. 标题文本断言。
5. 录制脚本导出。
6. 脚本回放验证。

用例结构

Allure2 介绍

• Allure 是由 Java 语⾔开发的⼀个轻量级，灵活的测试报告⼯具。
• Allure 多平台的 Report 框架。
• Allure ⽀持多语⾔，包括 python、JaveScript、PHP、Ruby 等。
• 可以为开发/测试/管理等人员提供详尽的的测试报告，包括测试类别、测试步骤、日志、图片、视频等。
• 可以为管理层提供高水准的统计报告。
• 可以集成到 Jenkins 生成在线的趋势汇总报告。

Allure2 报告展示

github 地址：https://github.com/allure-framework/allure2

Allure2 安装

1. 安装 Java，需要配置环境变量。
2. 安装 Allure ，需要配置环境变量。
3. 安装插件
   • Python：pip install allure-pytest。
   • Java：Maven插件安装。

Allure2 下载与安装

1. 先下载 Allure 源码包到本地。
   • 下载地址 1
   • 下载地址 2
     • mac/linux: 下载 tar
     • windows: 下载 zip
2. 配置环境变量：解压后将 bin 目录加入 PATH 环境变量。

详细安装步骤参考：https://ceshiren.com/t/topic/3386

Allure 环境验证

• 执行命令验证环境

# 环境验证
allure --version

插件安装-Python

• 安装 Python 插件 allure-pytest
  • 执行命令：pip install allure

# linux/mac
> pip list |grep allure
allure-pytest         x.xx.x

# windows
> pip list |findstr allure
allure-pytest         x.xx.x

生成测试报告流程

使用 Allure2 运行方式-Python

• 使用 --alluredir 参数生成测试报告。

# 在测试执行期间收集结果
pytest [测试用例/模块/包] --alluredir=./result/  (—alluredir这个选项 用于指定存储测试结果的路径)

# 生成在线的测试报告
allure serve ./result

高级定位CSS

css 选择器概念

• css 选择器有自己的语法规则和表达式
• css 定位通常分为绝对定位和相对定位
• 和Xpath一起常用于UI自动化测试中的元素定位

css 定位场景

• 支持web产品
• 支持app端的webview

css 相对定位的优点

• 可维护性更强
• 语法更加简洁
• 解决各种复杂的定位场景

# 绝对定位
$("#ember63 > td.main-link.clearfix.topic-list-data > span > span > a")
# 相对定位
$("#ember63 [title='新话题']")

css 定位的调试方法

• 进入浏览器的console
• 输入:
  • $("css表达式")
  • 或者$$("css表达式")

css基础语法

//在console中的写法
// https://www.baidu.com/
//标签名
$('input')
//.类属性值
$('.s_ipt')
//#id属性值
$('#kw')
//[属性名='属性值']
$('[name="wd"]')

css关系定位

//在console中的写法
//元素,元素
$('.bg,.s_ipt_wr,.new-pmd,.quickdelete-wrap')
//元素>元素
$('#s_kw_wrap>input')
//元素 元素
$('#form input')
//元素+元素，了解即可
$('.soutu-btn+input')
//元素1~元素2，了解即可
$('.soutu-btn~i')

css 顺序关系

//:nth-child(n)
$('#form>input:nth-child(2)')
//:nth-of-type(n)
$('#form>input:nth-of-type(1)')

css 语法总结

• 基本语法
• 关系语法
• 顺序语法

测试框架-参数化

参数化

• 通过参数的方式传递数据，从而实现数据和脚本分离。
• 并且可以实现用例的重复生成与执行。

参数化应用场景

• 测试登录场景
  • 测试登录成功，登录失败(账号错误，密码错误)
  • 创建多种账号: 中⽂文账号，英⽂文账号
• 普通测试用例方法
  • Copy 多份代码 or 读⼊入参数?
  • 一次性执⾏多个输⼊入参数

def test_param_login_ok():
    # 登录成功
    username = "right"
    password = "right"
    login(username,password)

def test_param_login_fail():
    # 登录失败
    username = "wrong"
    password = "wrong"
    login(username,password)

参数化实现方案

• pytest 参数化实现方法
• 装饰器：@pytest.mark.parametrize

@pytest.mark.parametrize("username,password",[["right","right"], ["wrong","wrong"]])
def test_param(username,password):
    login(username,password)

参数化：单参数情况

• 单参数，可以将数据放在列表中

search_list = ['appium','selenium','pytest']

@pytest.mark.parametrize('name',search_list)
def test_search(name):
    assert name in search_list

参数化：用例重命名-添加 ids 参数（中文）

@pytest.mark.parametrize("test_input,expected",[
    ("3+5",8),("2+5",7),("7+5",12)
],ids=["3和5相加","2和5相加","7和5相加"])
def test_mark_more(test_input,expected):
    assert eval(test_input) == expected

# 创建conftest.py 文件 ，将下面内容添加进去，运行脚本
def pytest_collection_modifyitems(items):
    """
    测试用例收集完成时，将收集到的用例名name和用例标识nodeid的中文信息显示在控制台上
    """
    for i in items:
        i.name=i.name.encode("utf-8").decode("unicode_escape")
        i._nodeid=i.nodeid.encode("utf-8").decode("unicode_escape")

Web 自动化测试技术与体系

企业需求

• 针对普通用户使用的 C 端产品（通常也有 App）
  • 豆瓣
  • 淘宝
• 定制性比较强的 B 端产品
  • OA 系统
  • 风控系统

招聘需求

• 字节跳动招聘需求:
  • 薪资: 25K+
  • 要求: 精通 Web 自动化测试工具 Selenium

工作需求

• 自动化测试用例设计能力
• 工具使用能力
• 解决问题能力

教学思路

• 教学大纲：运用5W1H法设计课程内容。
• 虚拟实验室：让学生在动手练习过程中有切实体会，帮助老师减轻教学负担。

教学大纲设计

什么是 5W1H？

Web 自动化测试的基本介绍

Web 功能测试场景

Web 自动化测试场景

Web 自动化测试的价值与收益

Web 自动化测试应用场景

• 针对业务进行冒烟以及回归测试
• 用户体验级别的测试
• 多浏览器兼容性测试

Web 自动化测试何时使用

• 基本的功能测试体系已经成熟。
• 团队具备一定的技术功底。

Web 自动化测试如何学习

知识体系

课程设计特点

• 由浅入深、循序渐进
• 理论与实践结合
• 技术与业务结合

Web 自动化测试 （初级）

学习收益

• 搭建 Web 自动化所需基本环境
• 了解 Web 自动化基本功能的使用
• 了解 selenium IDE 的基本使用
• 能够上手编写 Web 自动化测试入门脚本

Web 自动化测试 （中级）

学习收益

• 解决自动化测试数据记录问题。
• 解决 Web 自动化测试痛点问题：
  • 元素定位不到
  • 用例的可维护性问题
  • 用例执行效率低问题

Web 自动化测试 （高级[选修]）

学习收益

• 掌握绕过扫码、滑块、短信校验等认证方法的自动化测试方案。
• 掌握 Page Object 设计模式，实现测试用例的良好分层。
• 解决用例爆炸问题。

在企业中Web自动化测试常见痛点（部分）

• 元素定位不到
• 用例的可维护性问题
• 用例执行效率低问题

【虚拟实验室】

• 教学痛点：
  • 被测系统不稳定。
  • 授课的知识点无法和被测产品很好的融合。
  • 老师备课准备工作繁多。
  • 学生缺少切实的感受与体验。

虚拟实验室体验-元素定位不到

https://vip.ceshiren.com/#/ui_study

• 接下来将以此系统为被测产品，让学生切实感受到元素定位不到的问题以及对应的解决方案与技术。