用户端Web测试方法与技术

目录：

1. WEB 测试概念
2. WEB 测试的价值
3. WEB 测试学习路线
4. WEB 基础知识
5. html讲解
6. javascript讲解
7. css讲解
8. web项目测试流程
9. web测试设计思路
10. web端常见bug解析
11. Litemall购物车功能测试用例设计
12. 浏览器开发者工具
13. web兼容测试策略
14. Litemall购物车功能测试执行

1.WEB 测试概念 

• WEB 测试是软件测试的一部分
• 是针对 WEB 应用的一类测试

2.WEB 测试的价值 

• WEB 应用程序以其方便、快速、易操作等特点成为软件开发的重点
• WEB 能够吸引尽可能多的用户并对其长时间关注是网站追求的主要目标
• 对网页功能的正确性、有效性和完善性提出了较高的要求

3.WEB 测试学习路线 

 4.WEB 基础知识

什么是 WEB?

• WEB（World Wide Web）：全球广域网，也称为万维网
• 技术视角：布局设计、代码编写、数据库建立、网络平台选择
• 用户视角：使用浏览器上网时所浏览的网页

系统架构

• B/S：Browser/Server：B/S架构模式是指将应用程序的用户界面（前端）以Web浏览器的形式呈现，而应用程序的业务逻辑和数据存储（后端）则在服务器上运行。B/S架构通过浏览器作为客户端来访问服务器上的应用程序，从而实现了跨平台和跨设备的访问，无需在客户端安装应用程序。常见的Web应用程序如在线购物网站、社交媒体平台等，都是基于B/S架构。
• C/S：Client/Server：C/S架构模式是指应用程序分为两个主要组件：客户端和服务器端。客户端是指在用户计算机上安装的软件应用程序，用于提供用户界面和与用户的交互。服务器端是指运行在服务器上的应用程序，负责处理客户端发送的请求并回复相应的数据和结果。C/S架构通常用于需要较高性能、较复杂业务逻辑和数据处理的应用程序，例如大型企业级软件、网络游戏等。

WEB 架构

• 界面层（User Interface layer）
• 业务逻辑层（Business Logic Layer）
• 数据访问层（Data access layer）

网页

• 静态网页：和服务器没有数据交互
• 动态网页：网页数据可以和服务器进行数据交互

 URL（统一资源定位符）

• URL 的格式
  • schema :// host [ : port] path [query # fragment ]
  • schema：指定访问资源的协议或协议扩展，例如https、http、ftp等。
  • host：指定资源所在的主机名或IP地址。
  • port：可选项，指定用于访问资源的端口号，默认为协议默认的端口号。例如，http协议的默认端口是80，https协议的默认端口是443。
  • path：指定资源在服务器上的路径。
  • query：可选项，用于向服务器传递参数的字符串，通常以键值对的形式出现，多个参数之间用&分隔。例如，?key1=value1&key2=value2。
  • fragment：可选项，指定资源中的片段标识符，用于标识资源内部的具体位置或锚点。
• URI：统一资源标志符，在某一规则下能把一个资源独一无二地标识出来

浏览器工作原理 

DNS 解析

• DNS（Domain Name System，域名系统）
• 使用户更方便的访问互联网，而不用去记住能够被机器直接读取的 IP 数串

DNS（Domain Name System，域名系统）是互联网中用于将易于记忆的域名（如www.example.com）转换为对应的IP地址（如192.0.2.1）的系统。

在互联网上，每个设备都需要一个唯一的IP地址来进行通信。然而，IP地址是一串数字，很难记忆。为了使用户更方便地访问互联网资源，DNS系统被引入到互联网中。

DNS系统由许多DNS服务器组成，这些服务器存储着域名和对应的IP地址之间的映射关系。当用户在浏览器中输入一个域名时，浏览器会发送一个DNS请求到本地的DNS服务器。

本地DNS服务器首先会查看自己的缓存，看是否有这个域名对应的IP地址。如果没有，本地DNS服务器就会向根域名服务器发送一个请求。

根域名服务器知道整个DNS系统的层次结构，并向本地DNS服务器提供一个顶级域名服务器的地址。然后，本地DNS服务器会向顶级域名服务器发送一个请求。

顶级域名服务器知道下一级域名服务器的地址，它会向本地DNS服务器提供对应的下一级域名服务器的地址。这个过程会一直迭代下去，直到找到负责管理该域名的DNS服务器。

最终，这个负责管理该域名的DNS服务器会将域名对应的IP地址发送给本地DNS服务器。本地DNS服务器会将这个IP地址存储在缓存中，并将它返回给用户的浏览器。

用户的浏览器会使用获取到的IP地址来建立与服务器的连接，然后获取相应的网页内容。

通过DNS解析，用户不需要记住复杂的IP地址，只需要输入易于记忆的域名，就能访问到互联网上的各种资源。DNS系统在互联网的正常运作中起着至关重要的作用。

5.html讲解

尚硅谷前端html+css零基础教程，2023最新前端开发html5+css3视频_哔哩哔哩_bilibili

6.javascript讲解

尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版_哔哩哔哩_bilibili

7.css讲解

尚硅谷前端html+css零基础教程，2023最新前端开发html5+css3视频_哔哩哔哩_bilibili

8.web项目测试流程

1. 需求分析：这一步涉及对项目需求进行仔细的分析和理解。这包括了解项目的目标、功能需求、非功能需求以及项目背景等。这个阶段的目标是确定测试范围、测试环境、测试策略以及测试数据。
2. 测试计划编写：在这个阶段，测试团队将制定一个详细的测试计划。测试计划应该包括测试的目标、范围、进度、预算、风险和测试策略。
3. 测试用例设计：在这个阶段，测试人员将根据需求文档和产品代码设计测试用例。测试用例包括测试步骤、预期结果和回归标准。通常使用测试用例管理工具（如Jira、TestRail等）来管理测试用例。
4. 用例执行：测试人员根据测试计划和测试用例执行测试。这通常包括功能测试、性能测试、安全测试、兼容性测试等。
5. 回归测试：回归测试是确保新的代码没有破坏已有的功能。在每个代码提交或代码变更之后，测试团队都会执行回归测试以确保新的代码没有影响到已有的功能。
6. 走查验收：在所有测试都通过后，测试团队会对应用程序进行走查，以确保没有遗漏的测试，并且应用程序符合需求。
7. 测试总结报告：在测试结束后，测试团队会编写一个详细的测试总结报告，其中包括测试结果、测试总结、问题和建议。

9.web测试设计思路

UI 测试

• 界面风格统一，与 UI 设计原型图一致
• 界面文案正确
• 提示、警告或错误说明描述准确
• 切换窗口大小，将窗口缩小后，页面是否按比例缩小或出现滚动条，页面是否正确显示
• 所有的图片是否都被正确装载
• 在不同的浏览器、分辨率下图片是否能正确显示

搜索测试

• 如果支持模糊查询，搜索名称中任意一个字符是否能搜索到
• 比较长的名称是否能查到
• 输入系统中不存在的与之匹配的条件
• 不同查询条件之间来回选择，是否出现页面错误
• 查询条件的组合测试

表单测试

• 表单按钮功能正常实现
• 下拉列表数据完整、正确，可以正常选择，是否支持模糊匹配
• 文件上传大小、尺寸、格式、数量、文件内容规则验证
• 表单提交，删除，修改后是否有提示信息
• 浏览器的前进、后退、刷新按钮，是否会造成数据重现或页面报错
• 提交表单是否支持回车键和 Tab 键
• 数据重复检验
• 提交的数据是否能正确保存到数据库中

输入域测试

• 输入类型检验
• 输入长度检验
• 必填项检验
• 重复性检验
• 空格检查
• 安全性检查

分页测试

• 没有数据时界面展示情况
• 翻页后数据展示情况
• 分页的总页数及当前页数显示是否正确
• 是否能正确跳转到指定的页数

交互性数据测试

• 前台的数据操作是否对后台产生相应正确的影响
• 用户的权限，是否随着授权而变化

链接测试

• 是否能够直接链接查看
• 是否有权限控制
• 是否直接执行，并返回相应结果页 

10.web端常见bug解析（可以写个博客，积累见过的bug）

• 页面布局方面
• 页面元素方面
• 功能方面
• 其他

页面布局方面

• 页面一行内容超长展示错乱:
• 更换设备布局错乱

页面元素方面

• 输入域提示信息不明确

• 输入框包含 HTML 字符时出现异常

功能方面

• 功能不符合需求

• 提示信息错误

• JS 报错

• 更改不同步

  • 登录后打开多个页面
  • 在一个页面中操作修改内容
  • 在另一个页面中查看
  • 已经修改过的内容在另一个页面上没有体现
• 登录状态不同步
  • 打开多个页面
  • 其中一个页面登录成功
  • 另一个页面刷新
  • 没有同步为登录状态

其他

• 页面请求失败

• 加载时间太长

11.Litemall购物车功能测试用例设计

略

12.浏览器开发者工具

开发者工具打开方式：

• 工具目录 –> 开发者工具
• 右击页面任何位置 –> 审查元素
• F12

Network 面板

• 记录网络活动
• 清除缓存
• 模拟网络
• 查看网络数据
• 筛选资源

 

记录网络活动

1. 停止记录网络请求
2. 清除记录
3. 保存跨页面加载的请求

清除缓存

1. 禁用浏览器缓存
2. 手动清除浏览器缓存
3. 清空缓存并硬性重新加载（ctrl+f5）

 

 模拟网络

1. 离线模拟
2. 慢速网络模拟

查看网络数据

• Name：资源名称以及 URL 路径
• status：Http 状态码/文字解释
• Type：请求资源的类型
• Initiator：解释请求是怎么发起的
• Size：服务器提供的响应头加上响应主体的总大小
• Time：从请求开始到响应中最后一个字节接收的总持续时间
• Waterfall：每个请求活动的可视细分

 筛选资源

• 显示过滤器
• 按资源类型筛选

13.web兼容测试策略

• 浏览器兼容
• 操作系统兼容
• 分辨率兼容

浏览器兼容 

 操作系统

分辨率

 兼容测试工具

• IETester：可以方便的解决IE浏览器的兼容问题
• Browsershots：一个在线测试工具，支持很多浏览器
• 开发者工具 - Toggle device toolbar

14.Litemall购物车功能测试执行

略