Web应用测试

--- title: Web应用测试 tags: Web应用, 测试 description: 陈冉飞小组. slideOptions: # 簡報相關的設定 transition: 'fade' # 換頁動畫 --- ## 软件测试调研 # Web应用测试 #### 陈冉飞小组  --- ### 目录 * Web应用介绍 * Web应用测试背景 * Web应用测试概念 * Web应用测试种类 * Web应用测试工具 * Web应用测试工具简单应用 ---- ### 调研汇报的整体思路 ![](https://i.imgur.com/9H3bigf.png) --- ### Web应用 ------ #### 定义 - 在网页服务器上执行的应用程序，和在基於操作系统运行的计算机软件不同 - Web 应用通过有效的网路连接即可在浏览器中使用 ---- ### Web应用 ------ #### 生命周期 1. 搜集相关资讯，了解客户需求 2. 规划网站地图和线框 3. 设计和排版 4. 开发 5. 测试、审查、启动 6. 维护与更新 --- ### Web应用测试背景几个案例 * 华中师范大学生命科学院网站 * 双十一的淘宝 * 选课时候的中南大学教务管理系统 * 打印考试信息的中国研究生招生信息网 * 2015国家电网公司人力资源部招聘平台 * 2014携程网的网站安全隐患 ---- ### Web应用测试背景界面UI测试、功能测试的案例 - 华中师范大学生命科学院网站  ![](https://i.imgur.com/zjj7z6Z.png) 描述： - 界面：不美观，页面很像刚学html的初学者搭建的前端，又像web应用快照的快速版(百度 -> 百度快照 -> 快速版) - 功能：部分功能缺失，检索组件异常 ---- ### Web应用测试背景性能测试的案例 - 双十一的淘宝 ``` 2020年11月11日消息，双十一开场10分钟后，支付宝交易额突破2.5亿元。不过多名网友反映，正式开始10分钟后，天猫和淘宝页面打开缓慢、在线支付也十分拥堵，直至后来出现瘫痪状态，不仅是支付页面打不开，连已买到的商品也无法查看, 用户和商家们都表示无论是买还是卖都受到很大影响。 ``` ---- ### Web应用测试背景性能测试的案例 - 抢课期间的我校教务系统 ``` 每个学期选课之初，每个中南选课人必然面临访问中南大学教务管理系统速度慢，甚至面临中南大学教务管理系统崩溃问题，影响学员选课。而这个问题在各大高校间普遍存在。 ``` ![image alt](https://img.moegirl.org.cn/common/e/e8/Bdad7667341d4f559d73dee1dab86263_th.jpeg) ---- ### Web应用测试背景性能测试的案例 - 中国研究生招生信息网 ``` 2019年12月14日是打印准考证的第一天，然而今早，很多考生反应“研招网崩溃了”，有的考生无法登录，有的考生无法下载准考证。很多学生就吐槽，毕竟一个国家性网站为何会经常崩溃呢，每年到了大型考试的时候，网站都会出现异常，然而每年的双十一那么多人购物下单，也没见阿里巴巴的服务器瘫痪，很多人对国家的网站特别不满意。 ``` ![](https://i.imgur.com/IMzFfxk.png) ![](https://i.imgur.com/TogTDvO.png) ---- ### Web应用测试背景兼容性测试的案例 - 2015国家电网公司人力资源部招聘平台 ``` 因网站搭建时未提前进行兼容性测试，导致实际使用时产生了一系列问题，只能另外发布通知进行补救 ``` ![](https://i.imgur.com/KeDvrqp.png) ---- ### Web应用测试背景网络安全测试的案例 - 2014携程网 ``` 携程将用于处理用户支付的服务接口开启了调试功能，使部分向银行验证持卡所有者接口传输的数据包均直接保存在本地服务器。 ``` ![](https://i.imgur.com/IeEhsKN.png) --- ### Web应用测试  - 定义：Web测试是软件测试的一部分，是针对Web应用的一类测试 - 目的：可以尽可能地多发现浏览器端和服务器端程序中的错误并及时加以修正 - 作用：在网页部署上生产环境前檢測應用中隐含的 Bug ---- ### Web应用测试种类 - 界面测试(UI测试) - 功能测试 - 性能测试 - 可靠性测试 - 客户端兼容性测试 ---- #### Web应用测试种类 ![](https://i.imgur.com/hoFRSPm.png) ---- #### Web应用测试种类 - 界面测试(UI测试) 定义： ``` 测试用户界面的功能模块的布局是否合理、整体风格是否一致、各个控件的放置位置是否符合客户使用习惯，此外还要测试界面操作便捷性、导航简单易懂性，页面元素的可用性，界面中文字是否正确，命名是否统一，页面是否美观，文字、图片组合是否完美等。 ``` ---- #### Web应用测试种类 - 界面测试(UI测试) 包括：  ``` · 整体界面测试：整个Web应用系统的页面结构设计 · 图形测试：图片、动画、边框、字体、颜色、背景、按钮等 · 内容测试：Web应用系统提供信息的正确性、准确性和相关性 · 导航测试： · 不同的用户接口控制之间，例如按钮、对话框、列表和窗口等 · 不同的连接页面之间 · 表格测试：验证表格是否设置正确 ``` ---- #### Web应用测试种类 - 功能测试定义： ``` 根据产品特性、操作描述和用户方案，测试一个产品的特性和可操作行为以确定它们满足设计需求。只需考虑需要测试的各个功能，不需要考虑整个软件的内部结构及代码 ``` ---- #### Web应用测试种类 - 功能测试包括： ``` · 链接测试 · 表单测试 · cookies测试 · 数据库测试 · 数据校验 ``` ---- #### Web应用测试种类 - 性能测试定义： ``` 通过自动化的测试工具模拟多种正常、峰值以及异常负载条件来对系统的各项性能指标进行测试 ``` ---- #### Web应用测试种类 - 性能测试包括： ``` · 连接速度测试 · 压力测试 · 负载测试 · 并发测试 · 配置测试 ``` ---- #### Web应用测试种类 - 可靠性测试定义： ``` 通过在有使用代表性的环境下执行软件，已证实软件需求是否正确实现。 ``` #### Web应用测试种类 - 可靠性测试包括： ``` · 浏览器可靠性测试 · 服务器可靠性测试 ``` ---- #### Web应用测试种类 - 客户端兼容性定义： ``` 测试web应用系统在不同的硬件平台、软件系统（操作系统，数据库，数据本身）上运行是否正常，测试其相互配合程度，优秀的软件需要保证其平台无关性，使用户充分感受到软件的友好 ``` ---- #### Web应用测试种类 - 客户端兼容性包括： ``` · 平台测试 · 浏览器测试 · 分辨率测试 · 打印测试 · 组合测试 ``` --- ### Web应用测试工具种类  - 最基本的 - 网页测试工具 - 界面测试(UI测试)工具 - 功能测试[接口(API)自动化测试]工具 - 性能测试工具 - 可靠性测试工具 - 兼容性测试工具 ---- #### Web应用测试工具 - 网页测试工具种类 - Chrome 开发者工具 - FireFox 开发者工具 ---- ### Web应用测试工具[浏览器工具] ------ #### F12 网页测试 F12 常用于网站界面测试、调试，分析网页所出现的问题，查看 HTML 元素、查看响应事件等方面。 ---- #### F12 网页测试 - Elements（页面元素）：查看网页页面的所有元素，修改元素的代码与属性，查看元素的属性、CSS属性、监听事件以及端点等等。 - Console（控制台）：当网页的JS代码中使用了console.log( )函数时，该函数输出的日志信息会在控制台中显示。 - Sources（源代码）：网页界面所涉及到的所有源代码包括样式、CSS、图片、 JS 文件等 ---- #### F12 网页测试 - Network（网络）：查看请求地址、URL、响应状态码（Status）、响应数据类型（Type）、响应 - 数据大小（Size）、响应时间（Time）、重要相关区域的请求耗时（Waterfall） ---- ### Web应用测试工具[浏览器工具] ------ #### Chrome开发者工具 Chrome开发者工具(Chrome DevTools)是一套内置于Google Chrome中的 Web 开发和调试工具，可用来对网站进行迭代、调试和分析。 ---- #### Chrome开发者工具 ![](https://developers.google.com/web/tools/chrome-devtools/images/panels/elements.png) ---- ### Web应用测试工具[浏览器工具] ------ #### FireFox 开发者工具 Firefox 开发者工具是指 Firefox 集成的一系列 Web 开发者工具，可用于在 PC 和移动设备上对 HTML、CSS 及 JavaScript 进行测试，编辑和调试。 ---- #### FireFox 开发者工具 ![image alt](https://media.prod.mdn.mozit.cloud/attachments/2018/12/10/16369/25185822c2389a3fe5eae3743264051e/landingPage_Debugger.png) --- ### Web应用测试工具 - 界面测试 - Selenium - AirtestIDE - Katalon Studio ---- ### Web应用测试工具 ------ #### Selenium Selenium 是一套网页自动化测试框架，可以使用官方的 Selenium IDE编写 Selenese 脚本(一种 Selenium 的特殊测试脚本语言)，在浏览器中进行测试，也提供多种热门语言的 SDK，可以透过代码操控浏览器进行网页测试。 ---- #### Selenium Tools - WebDriver - IDE - Grid ---- #### Selenium SDK Selenium 的核心是 WebDriver，它是编写可以在许多浏览器中互换运行的指令集的接口。 - Java - Python - C# - Ruby - JavaScript - Kotlin ---- #### Example ![](https://i.imgur.com/Ivcnxs5.png) ---- #### Output ![](https://i.imgur.com/WgUQMt5.jpg) ---- #### Selenium IDE Selenium IDE 是在 Chrome 和 Firefox 的扩展插件，提供录制、回放浏览器操作，与 WebDriver 相比，不需要寫代碼，除了快速方便外也能让初学者快速上手 Selenium 的脚本格式。 ---- #### Selenium IDE ![](https://www.selenium.dev/selenium-ide/img/home/locators.png) ---- ### Web应用测试工具 ------ #### AirtestIDE 网易出品的一款基于图像识别和poco控件识别的一款跨平台的UI自动化测试工具。 - 自动化脚本录制、一键回放、报告查看，轻而易举实现自动化测试流程 - 基于图像识别，可以通过屏幕截图的方式获取想要操作的区域 - 基于poco控件，可以通过控件的name、id等信息来定位目标控件，再调用函数方法对控件进行不同的操作 ---- ### Web应用测试工具 ------ #### Katalon Studio - 功能强大且全面的自动化解决方案，可用于测试 API、Web、移动和桌面应用程序 - 支持包括 Windows 和 Linux 在内的多个平台 - 基于 Selenium 和 Appium 测试框架，并集成这些框架的优点 - 集成了 Eclipse 部分功能，同时也支持界面化编码 --- ### Web应用测试工具 - 功能测试 ------ #### 接口(API)自动化测试工具软件测试中，单独对测试接口（API）是非常有必要且有成效的。我们可以自写接口的自动化测试脚本，各语言也有各种现成的开源框架，但若是不熟悉开发语言的测试者，同样也有不少接口自动化测试工具可供使用，推荐 Postman 及 SoapUI，还有最近很热门的 Swagger。 ---- ### 功能测试[接口(API)自动化测试]工具 - Postman - SoapUI - Swagger ---- ### 功能测试[接口(API)自动化测试]工具 ------ #### Postman - 提供功能强大的 Web API 和 HTTP 请求的调试 - 能够发送任何类型的HTTP请求 (GET, POST, PUT, DELETE…) - 能附带任何数量的参数和Headers - 提供测试数据和环境配置数据的导入导出 ---- ### 功能测试[接口(API)自动化测试]工具 ------ #### SoapUI - 通过 SOAP/HTTP 来检查、调用、实现 Web Service 的功能/负载/符合性测试 - 完整的自动化测试解决方案，提供了业界领先的技术和标准的支持 - 包含 SOAP 和 REST 的 Web 服务、JMS 企业消息层，数据库，以及丰富的互联网应用 ---- ### 功能测试[接口(API)自动化测试]工具 ------ #### Swagger - 遵循 OpenAPI Specification（OpenAPI 规范，也简称 OAS） - 只需要少量的注解，Swagger 就可以根据代码自动生成 API 文档，很好的保证了文档的时效性 - 跨语言性，支持 40 多种语言 - 呈现出来的是一份可交互式的 API 文档，可以直接在文档调试 API，省去了准备复杂的调用参数的过程 ---- #### Swagger Example ![image alt](https://static1.smartbear.co/swagger/media/images/tools/opensource/swagger_ui.png?ext=.png) ---- #### Swagger Example Swagger 会产生一份基於 OpenAPI 标准的 JSON，可以利用其他工具产生 HTML 档。 ![](https://i.imgur.com/ckX6mFc.png) ---- ### 功能测试工具 ------ #### MaxQ - 一个轻量级的 Web 功能测试工具 - 以自动录制 WebBrowser 提交的请求包，并随时回放 - 录制来自前端向服务器发出的业务请求，不是录制前端页面的操作过程 ---- ### 功能测试工具 ------ #### Fiddler - 记录所有客户端和服务器的 HTTP 和 HTTPS 请求 - 允许监视，设置断点，甚至修改输入输出数据 - 包含了一个强大的基于事件脚本的子系统，并且能使用 .NET 语言进行扩展 - 只能在 Windows 下使用 ---- ### 功能测试工具 ------ #### Canoo WebTest - 开源的 Web 应用的自动化测试工具 - 访问要测试的应用并验证返回结构，生成详细的测试结果报表 ---- ### 功能测试工具 ------ #### SOAPtest - 提供了一套完整的针对 Web service 的测试工具 - 通过来源于 WSDL 文档中自动创建的测试套件，完成测试的执行 - 测试服务对并发请求的响应，而且可以确认测试负载是否导致产生功能上的问题 - 效仿服务组件、接受客户发送的适当请求和处理服务器的响应 --- ### Web应用测试工具 - 性能测试工具通过自动化的测试工具模拟多种正常、峰值以及异常负载条件来对系统的各项性能指标进行测试。常见的性能测试工具 * LoadRunner * Jmeter * Locust ---- #### 性能测试工具比较 ![](https://i.imgur.com/P2OA76k.png) ---- #### Web应用测试工具[性能测试工具] - Load Runner - Apache JMeter ---- #### LoadRunner - 一种预测系统行为和性能的负载测试工具。通过以模拟上千万用户实施并发负载及实时性能监测的方式来确认和查找问题。 - LoadRunner 能最大限度地缩短测试时间，优化性能和加速应用系统的发布周期 - 可适用于各种体系架构的自动负载测试，能预测系统行为并评估系统性能 - 价格昂贵，功能丰富且全面 - 目前只支持 Windows 平台 ---- #### Web应用测试工具[性能测试工具] ------ #### Apache JMeter - Apache JMeter 是 Apache 组织开发的基于 Java 的压力测试工具 - 最初被设计用于Web应用测试，但后来扩展到其他测试领域 - 可以用于对服务器、网络或对象模拟巨大的负载，测试它们的强度和分析整体性能 ---- ### Web应用测试工具[兼容性测试工具] - 待测试项目在不同的操作系统平台上正常运行 - 待测试项目能在同一操作系统平台的不同版本上正常运行 - 待测试项目能在指定的硬件环境中正常运行 - 待测试项目能在不同的网络环境中正常运行 Web兼容性测试类型主要有：操作系统、浏览器、分辨率和网速方面兼容性测试 ---- ### Web应用测试工具[兼容性测试工具] ------ #### IETest - 一个免费的 Web 浏览器调试工具 - 可以模拟出不同的 JS 引擎来帮助程序员设计效果统一的代码 - 可以在独立的标签页中开启不同版本的 IE，可以满足大部分 IE 浏览器兼容性的测试 ---- ### Web应用测试工具[兼容性测试工具] ------ #### SuperPreview - 微软发布的网页开发调试工具 - 自带多种元素查看工具，如箭头、移动、辅助线、对比等 - 可以对比 IE6/IE7/IE8 不同表现效果 ---- ### Web应用测试工具[兼容性测试工具] ------ #### Viewlike.us 可查看网站在不同分辨率下的显示情况，支援的分辨率： - 800X600 - 1024X768 - 1152X864 - 1280X800 - 1400X900 - 1600X1200 - 1920X1200 ---- ### Web应用测试工具[兼容性测试工具] ------ #### Browserling - 提供 Web 应用程序和站点跨浏览器的实时交互测试 - 测试可以跨运行在真实机器上的真实浏览器进行 - 提供了出色的API支持、专用服务器和出色的工具 - 允许使用者比较屏幕截图，并指出与交互式浏览有关的设计问题 - 附带 Chrome、Firefox、Opera 和 Safari 扩展，方便跨浏览器测试 ---- ### Web应用测试工具[兼容性测试工具] ------ #### Browsershots - 允许在任何浏览器和任何操作系统中测试网站 - 可以使用自定义选项运行跨浏览器测试，如浏览器版本、操作系统、颜色深度、屏幕分辨率、Flash启用/禁用等 - 当跨多个浏览器测试web应用程序时，显示测试结果需要花费太多的时间，有时甚至会显示超时错误 ---- ### Web应用测试工具[兼容性测试工具] ------ #### Experitest - 可在大量浏览器和操作系统组合上提供持续测试，检查应用程序是否如预期的那样工作 - 通过运行 Selenium 和 Appium 测试脚本，它允许在1000多个浏览器、操作系统和设备之间自动化跨浏览器测试 --- ### Web测试工具应用 ---- ### Web测试工具应用[浏览器工具] ------ #### F12进行网页测试 ![](https://i.imgur.com/p6iS9qD.png) ---- ### Web测试工具应用 ------ #### Selenium IDE ![](https://i.imgur.com/uMwgHkW.png) --- ## Highlights * 基于==思维导图==和==流程图==所确定的清晰的调研思路和团队分工分配 * 具备各式各样的 ==丰富的案例==引出Web应用测试的背景 * 收集==全面的== Web 应用测试工具以及分类。 * 完整、认真的对几个常用、经典的测试工具==进行实践并测试==。 ---- ![](https://i.imgur.com/Xnl6yKZ.png) --- ### Thank you! :sheep:

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.