11z web测试方法与技术- 软件测试

最新推荐文章于 2024-04-19 16:52:10 发布

weixin_54698622

最新推荐文章于 2024-04-19 16:52:10 发布

阅读量203

点赞数 1

分类专栏：软件测试学习内容总结文章标签：软件测试 python

本文链接：https://blog.csdn.net/weixin_54698622/article/details/118931703

版权

软件测试学习内容总结专栏收录该内容

16 篇文章 1 订阅

订阅专栏

软件测试所有内容笔记正在陆续更新中，笔记已经在本地记录，全部为自己手动记录的笔记及总结，正在开始更新中，后续会逐步更新并完善到 软件测试学习内容总结 专栏。
本节内容为：web测试方法与技术

HTML 定义网页内容，
JavaScript 定义网页行为，
CSS定义网页的布局

1. html讲解

1. HTML 基本概念

什么是web

web就是world wide web 的缩写，称为全球广域网，俗称www
网站是由多个网页组合形成的一种服务
网页就是用 HTML 语言编写而成的一种文件。里面包含文字图片超链接声音视频……

什么是 HTML

超文本标记语言（Hyper Text Markup Language）
描述网页端语言

HTML发展

传输最简单的文字内容
可以表达文字内容之外的语言——HTML1.0
HTML1.0—XHTML1.0（过渡）—XHTML2.0（放弃）—HTML5

HTML 查看工具

浏览器 – 开发者工具 --F12

查看html，调试JavaScript脚本，修改css，查看网络数据，可以进行性能方面的测试。

Elements面板：可以对Web页面上的元素进行定位，并查看整个web页面的源码

2. HTML 基本结构

<!DOCTYPE html>  <!--申明文档类型-->
<html lang="en"> <!--根标签-->
<head>           <!--写给浏览器看的-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

3. HTML 基本标签

标签

双标签：<标签名称></标签名称>
单标签：<标签名/>

标签的属性

基本格式：<标签名属性1=“属性值1” 属性2=“属性值2”></标签名>
- 标签可以有多个属性
- 属性必须在开始标签中，位于标签名后
- 属性件不区分顺序
- 标签名与属性、属性与属性之间使用空格隔开
- 任何属性都有默认值，省略该属性表示使用默认值

HTML 全局属性

class：规定元素的类名
id：规定元素的唯一id
lang：设置元素中内容的语言代码
style：规定元素的行内样式
title：规定元素的额外信息

HTML 事件属性
HTML 事件属性 - 窗口事件

使 HTML 事件触发浏览器中的行为， eg：当用户点击某个 HTML 元素时启动一段JavaScript
适用于标签
- onblur：当窗口失去焦点时运行脚本
- onfoces：当窗口获得焦点时运行脚本
- onload：当文档加载时运行脚本

HTML 事件属性 - 表单事件

form表单内元素
- onblur：当窗口失去焦点时运行脚本
- onchange：当元素改变时运行脚本
- onfocus：当窗口获得焦点时运行脚本
- onreset：当表单重置时运行脚本。 HTML 5 不支持
- onselect：当选取元素时运行脚本
- onsubmit：当提交表单时运行脚本

HTML 事件属性 - 键盘事件

onkeydown：当按下按键时运行脚本
onkeypress：当按下并松开按键时运行脚本
onkeyup：当松开按键时运行脚本

HTML 事件属性 - 鼠标事件

onclick：当单击鼠标时运行脚本
ondblclick：当双击鼠标时运行脚本
onmousedown：当按下鼠标按键时运行脚本
onmousemove：当鼠标指针移动时运行脚本
onmouseseout：当鼠标指针移出元素时运行脚本
onmouseover：当鼠标指针移至元素之上时运行脚本
onmouseup：当松开鼠标按钮时运行脚本

HTML 事件属性 - 多媒体事件

onabort：当发生中止事件时运行脚本

标签

注释标签

标签：
作用：在源文档中插入注释。

文档标题标签

标签：<title></title>
作用：
- 定义浏览器工具栏中的标题
- 页面被添加到收藏夹时的标题
- 显示在搜索引擎结果中的页面标题

标题标签

标签：<h1>-<h6>
- 这是标题1
- 这是标题6
作用：
- 用来定义 HTML 标题
- <h1> 定义重要等级最高的标题。<h6> 定义重要等级最低的标题
属性：全局属性、事件属性

<h1 id=“site-text-logo” class=“text-logo”>社区</h1>

段落标签

标签：<p></p>
作用：标签定义段落
属性：全局属性、事件属性

<p class=‘lh’>…</p>

容器标签 - <span>

标签：<span></span>
作用：用于对文档中的行内元素进行组合，提供了一种将文本的一部分或者稳当的一部分独立出来的方式
属性：全局属性、事件属性

<span id=‘ember123’ class=‘ember-view’>…</span>

容器标签 - <div>

标签：<div></div>
作用：
- 定义 HTML 文档中的一个分隔区块或一个区域部分
- 元素经常与 CSS 一起使用，用来布局网页
属性：全局属性、事件属性

<div class=‘contents clearfix’>…</div>

图像标签

标签：<img />
作用：定义 HTML 页面中的图像
属性：
- src：规定显示图像的 URL （必须）
- alt：规定图像的替换文本（必须）
- title：鼠标悬停于图像时显示的文本
- width：图像的宽度
- height：图像的高度
- border：设置图像边框的宽度

<img alt width='32' heigh='32' src='/letter_avatar_proxy/v4/letter/c/4491bb/64.png' title='chan' class='avatar'/>

超链接标签

标签：<a></a>
作用：定义超链接，用于从一个页面链接到另一个页面
属性：全局属性、事件属性
- href：规定链接的目标 URL

<a href="/search" data-auto-route="true" title="搜索主题、帖子" id="search-button" class="icon btn-flat">...</a>

列表标签 - 无序列表

标签：<ul><li>...</li></ul>
作用：
- 定义无序列表
- <ul>标签与<li>标签一起使用，创建无序列表
属性：全局属性、事件属性

<ul>
    <li>...</li>
    <li>...</li>
</ul>

列表标签 - 有序列表

标签：<ol><li>...</li></ol>
作用：
- 定义了一个有序列表，列表排序以数字显示
- 使用<li>标签来定义列表选项
属性：全局属性、事件属性

<ol>
    <li>...</li>
    <li>...</li>
</ol>

表格标签

标签：
- 表格：<table></table>
- 行：<tr></tr>
- 单元格：<td></td> --表头单元格（由 th 元素创建）标准单元格（由 td 元素创建）
作用：定义表格
属性：全局属性、事件属性
- border：规定表格单元是否拥有边框

<table>
    <thead>
        <tr>
            <th>...</th> <!--表头-->
            <th>...</th>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
        </tr>
    </thead>
    <tbody>...</tbody>
</table>

表单域

标签：<form></form>
作用：创建供用户输入的 HTML 表单
属性：全局属性、事件属性
- action：指定接收并处理表单信息的服务器url地址
- method：表单数据的提交方式
- name：指定表单名称

<form id="hidden-login-form" method="post" action="/login" style="display:none;">...</form>

表单标签

标签：<input>
作用：规定了用户可以在其中输入数据的输入字段，输入字段可通过多种方式改变，取决于type属性
属性：全局属性、事件属性
- type：规定要显示的元素的类型 #type=“password”
- name：控件名称，name 相同则表示是同一组数据
- value：指定 <input> 元素 value 的值
- size：显示大小
- checked：是否被选中
- maxlength：控制输入的最大字符数量

type 属性

text：单行文本输入框（不换行的），多行用文本域标签
password：密码输入框
radio：单选框（配合name可以实现单选效果）
checkbox：复选框
button：普通按钮
submit：提交按钮
reset：重置按钮
image：图像形式的提交按钮
file：文件域，点击之后打开文件选择器

<input name="username" type="text" id="signin_username">
<input name="password" type="password" id="signin_password">
<input name="redirect" type="hidden">
<input type="submit" id="signin-button" value="登录">

文本域标签

标签：<textarea></textarea>
作用：定义一个多行的文本输入控件
属性：全局属性、事件属性
- cols：规定文本区域内可见的宽度
- disabled：规定禁用文本区域
- name：规定文本区域的名称
- readonly：固定文本区域为只读
- rows：规定文本区域内可见的行数
- placeholder：规定一个简短的提示，描述文本区域期望的输入值

<textarea cols="10" rows="6" placeholder='简短描述'></textarea>

下拉菜单

标签：<select><option>...</option></select>
作用：
- 用来创建下拉列表
- <select>元素中的<option>标签定义了列表中的可用选项
属性：全局属性、事件属性
- disabled：当该属性为true时，会禁用下拉列表
- multiple：当该属性为true时，可选择多个选项
- name：定义下拉列表的名称
- size：规定下拉列表中可见选项的数目

<select>
    <optgroup label="第一组">
        <option>选项1</option>
        <option>选项2</option>
    </optgroup>
    <option>选项3</option>
    <option>选项4</option>
</select>

2. javascript讲解

1. 简介

JavaScript是脚本语言
- 一种轻量级的编程语言
- 是可插入HTML页面的编程代码
- 插入HTML页面后，可由所有的现代浏览器执行

作用

直接写入 HTML 输出流 (直接改变 HTML 内容)
对事件的反应
改变 HTML 内容
改变 HTML 图像
改变 HTML 样式
验证输入

2. 用法

位置

脚本必须位于
可被放置在 HTML 页面的和部分中

引用方式

内部：<script>alert("我的第一个JavaScript");</script>
外部：<script src="myScript.js"></script> (外部的JS脚本中不能包含<script>标签)

查看外部引用的js脚本：在浏览器中F12，右击src链接，点击第一个Reveal in Sources panel，会在Sources面板展示源代码

3. 输出

显示数据

弹出警告框：window.alert()
将内容写到 HTML 文档中：document.write()
写入到浏览器的控制台：console.log()

F12,Console面板测试
window.alert(‘hello world’)
document.write(‘hello world’)
console.log(‘hello world’)

4. 基础语法

字面量

数字：
字符串：单引号，双引号
数组：[]
对象：{}
函数：function

变量

声明变量：var
赋值：=

操作符

算数运算符：= + - * /
赋值运算符：= += -=
比较运算符：< > == === !=

=== 指从内容到类型完全相同

函数

关键字：function
function myFunction(a,b){return a*b;}

5. 操作 HTML DOM

HTML DOM

文档对象模型：Document Object Model --HTML文件对象

标准流程图源码格式：Typora

下面的DOM操作需在浏览器中按F12进入Console操作

查找 HTML 元素

通过 id：var x=document.getElementById("xx"); #找到一个元素一般用id定位
通过标签名：var y=document.getElementsByTagName("p"); #找到一类元素
通过类名：var x=document.getElementsByClassName("xx") #找到一类元素

baidu.com
document.getElementById(‘su’)
document.getElementsByTagName(‘span’)
document.getElementsByClassName(‘btn’)

改变 HTML --eg：修改‘百度一下’的按钮

内容：document.getElementById(id).innerHTML=新的 HTML
属性：document.getElementById(id).attribute=新属性值
document.getElementById(id).value=新的value值

document.getElementById(‘su’).innerHTML=‘你好’ #修改input代码中的值
document.getElementById(‘su’).value=‘你好’ #修改界面显示额值

Cookie

读取：var x=document.cookie;

使用事件

当用户点击鼠标时：οnclick=JavaScript
当网页已加载时：οnlοad=JavaScript
当图像已加载时：οnunlοad=JavaScript
当鼠标移动到元素上时：οnmοuseοver=JavaScript
当输入字段被改变时：οnchange=JavaScript
当用户触发按键时：οnmοusedοwn=JavaScript

6. 操作浏览器 BOM

浏览器对象模型 (整个浏览器窗口对象)

Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口
所有 JavaScript 全局对象、函数以及变量均自动成为window对象的成员
HTML DOM 的 document 也是 window 对象的属性之一

浏览器窗口

获取浏览器窗口尺寸：
- window.innerHeight - 浏览器窗口的内部高度（包括滚动条）
- window.innerWidth - 浏览器窗口的内部宽度（包括滚动条）
打开新窗口：window.open()
关闭当前窗口：window.close()

用户屏幕 (整个电脑屏幕的大小)

可用的屏幕宽度：screen.availWidth
可用的屏幕高度：screen.availHeight

当前页面的地址 (eg：百度页面)

返回web主机的域名：location.hostname #“www.baidu.com”
返回当前页面的路径和文件名：location.pathname --> “/”
返回所使用的web协议：location.protocol -->“https:”

浏览器的历史

与在浏览器点击后退按钮相同：history.back()
与在浏览器点击向前按钮相同：history.forward()

3. css讲解

基础入门

什么是CSS

CSS指层叠样式表（Cascading Style Sheets）
样式通常存储在样式表中

为什么使用CSS？

样式定义如何显示HTML元素
为了解决内容与表现分离的问题
主要目的：可以让相同的一个页面在不同的浏览器当中呈现相同的样式

基础语法

CSS组成
在这里插入图片描述

h1 {color:blue; font-size:12px;}

选择器+样式声明
通过选择器选择一个元素，后面进行样式的声明，每一条声明由一个属性和对应的值组成，用分号隔开

查看web页面的css
F12，在Elements面板的右侧的Styles中可以查看css

CSS选择器

id选择器：#id {}
class选择器：.className {}
元素选择器：tag {}
属性选择器：[属性] {}

CSS创建

外部样式表：<link rel="stylesheet" type="text/css" href="mystyle.css"> #最常见的方式
内部样式表：

<style>
hr {color:sienna;}
p {margin-left:20px;}
</style>

内联样式：<p style="color:sienna;margin-left:20px;">这是一个段落</p> (只对当前p标签生效)

背景

background：简写属性，可以跟下面的所有值 (可以定义下面所有的值)
background-color：设置元素的背景颜色
background-image：把图像设置为背景
background-position：设置背景图像的起始位置
background-repeat：设置背景图像是否及如何重复

文本

color：设置文本颜色
text-align：对齐元素中的文本
text-decoration：向文本添加修饰
text-indent：缩进元素中文本的首行
vertical-align：设置元素的垂直对齐

字体

font：在一个声明中设置所有的字体属性 (可以设置所有的字体属性)
font-family：指定文本的字体系列
font-size：指定文本的字体大小
font-style：指定文本的字体样式
font-weight：指定字体的粗细

列表

list-style：把所有用于列表的属性设置在一个声明中 (简写的属性，可以指定下面的不同类型的值)
list-style-image：把图像设置为列表项标志
list-style-type：设置列表项值的类型

表格

border：设置表格边框
border-collapse：设置表格的边框是否被折叠成一个单一的边框或者隔开
width：定义表格的宽度
text-align：表格中的文本对齐
padding：设置表格中的填充

定位

static：没有定位，遵循正常的文档流对象
relative：相对定位，元素的定位是相对其正常位置
fixed：元素的位置相对于浏览器窗口是固定位置
absolute：绝对定位，元素的位置相对于最近的已定位父元素
sticky：粘性定位，基于用户的滚动位置来定位

盒子模型

Margin（外边距）：清除边框外的区域，外边框是透明的
Border（边框）：围绕在内边距和内容外的边框
Padding（内边距）：清除内容周围的区域，内边距是透明的
Content（内容）：盒子的内容，显示文本和图像

在这里插入图片描述

网页布局
在这里插入图片描述

头部区域—网页标题，logo
菜单导航区域–链接，引导用户跳转到其他页面
内容区域–主体内容
底部区域–版权信息，联系方式

4. web端常见bug解析

页面布局方面

页面一行内容超长展示错乱
更换设备布局错乱 #兼容测试

页面元素方面

输入域提示信息不明确
输入框包含HTML字符时出现异常

功能方面

功能不符合需求
提示信息错误
JS报错
更改不同步
- 登录后打开多个页面
- 在一个页面中操作修改内容
- 在另一个页面中查看
- 已经修改过的内容在另一个页面上没有体现
登录状态不同步
- 打开多个页面
- 其中一个页面登录成功
- 另一个页面刷新
- 没有同步为登陆状态

其他

页面请求失败
加载时间太长

查看Status Code 网站状态码
F12，点击Network，点击左下角Name中选项，右侧Headers中会显示

5. 某知名网站测试实战1

Web 企业微信实战1

【重点】
了解 web 基础知识
了解 web 项目测试流程
掌握需求分析方法

PPT：

企业微信官网：https://work.weixin.qq.com/
课堂资料: https://pan.baidu.com/s/1rhzbrSC6EYZkaBM9Bw7Oow 密码: luqi

web基础

什么是web

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

系统架构

B/S：Browser/Server （浏览器-服务器）
C/S：Client/Server （客户端-服务器）

web架构 – BS架构

界面层（User Interface layer） #用户访问的网页
业务逻辑层（Business Logic layer）
数据访问层（Data access layer）

网页

静态网页：和服务器没有数据交互 #包括图像视频
动态网页：网页数据可以和服务器进行数据交互 #url?=…

URL

Uniform Resource Locator，统一资源定位符
URL的格式：
- schema://host[:port] path [query # fragment ]

https://www.baidu.com:443/s?wd=
schema：协议类型；host：主机名；port：端口
path：资源在服务器上的相对位置
query：请求需要携带的参数（参数以key=value的形式，参数间用&隔开）

http 默认端口80，https-443

HTTP

HTTP 协议
HyperText Transfer Protocol
超文本传输协议

浏览器工作原理 #面试

问题：浏览器中输入百度首页网址，回车，发生了生么？

发送HTTP 请求，接受web服务器的响应并解析成web页面

DNS解析

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

web服务器

Apache
Tomcat
Nginx
IIS – 微软

项目背景

项目介绍
企业微信

模块介绍

项目流程

#面试题
结合简历里面的项目说项目的流程，大体分为以下步骤，到底是web,还是app要简单区分下
web 测试流程 #前五项为基本的功能测试

需求分析
测试计划编写
测试用例编写
用例执行
回归测试
兼容性测试
安全测试
走查验收（UI、产品）
测试总结报告

兼容性测试上面为基本的功能测试

需求分析?

需求文档
evernote:///view/21520833/s47/f48fb10e-0beb-4de7-ba52-2153423cab1c/f48fb10e-0beb-4de7-ba52-2153423cab1c/
需求评审
在这里插入图片描述

需求分析步骤

明确测试范围
明确功能点
明确业务流程
明确输出结果
分析异常流程
预估测试需要的时间和资源
evernote:///view/21520833/s47/f48fb10e-0beb-4de7-ba52-2153423cab1c/f48fb10e-0beb-4de7-ba52-2153423cab1c/

需求分析实战

企业微信web版
- 添加成员

测试计划编写

测试计划作用

方便宏观调控，进行相应资源配置
方便了解整个项目测试情况以及项目测试不同阶段的所有进行的工作

测试计划模板
evernote:///view/21520833/s47/f48fb10e-0beb-4de7-ba52-2153423cab1c/f48fb10e-0beb-4de7-ba52-2153423cab1c/

项目概述
测试目标
测试范围和重点
测试策略
4.1 功能测试
4.2 性能测试
4.3 自动化测试
项目里程碑
时间安排
测试资源
6.1 人力资源
6.2环境资源
风险列表

测试计划编写要点

5W+H 原则

why：为什么要进行这些测试
what：测试哪些方面，不同阶段的工作内容
when：测试不同阶段的起止时间
where：相应文档，缺陷的存放位置，测试环境等
who：项目有关人员组成，安排哪些测试人员进行测试
how：如何去做，使用哪些测试工具以及测试方法进行测试

测试计划编写实战

企业微信web版
添加成员
evernote:///view/21520833/s47/f48fb10e-0beb-4de7-ba52-2153423cab1c/f48fb10e-0beb-4de7-ba52-2153423cab1c/

6. 某知名网站测试实战2

Web 企业微信实战2

课程价值
掌握 web 测试用例设计方法
掌握 web 常用测试方法
了解 web 测试总结方法

PPT：

课堂资料: https://pan.baidu.com/s/1rhzbrSC6EYZkaBM9Bw7Oow 密码: luqi

1. 测试用例设计

面试必考
evernote:///view/21520833/s47/f48fb10e-0beb-4de7-ba52-2153423cab1c/f48fb10e-0beb-4de7-ba52-2153423cab1c/

提供网盘地址

在这里插入图片描述

设计步骤

划分功能模块
正向功能验证
单个功能项验证
功能之间交互验证
隐形需求

测试用例设计实战

企业微信web版
添加成员模块
在这里插入图片描述

evernote:///view/21520833/s47/f48fb10e-0beb-4de7-ba52-2153423cab1c/f48fb10e-0beb-4de7-ba52-2153423cab1c/

在这里插入图片描述

2. 测试用例评审

测试用例评审要点

测试用例的本身的描述是否清晰，是否存在二义性（歧义）
测试用例内容是否正确，是否与需求目标相一致
测试用例的期望结果是否确定、唯一
测试用例是否覆盖了所有的需求
测试用例是否具有可执行性
是否从用户层面来设计用户使用场景和业务流程的测试用例
场景测试用例是否覆盖最复杂的业务流程
用例设计是否包含了正面、反面的用例

3. web 测试用例设计总结?

evernote:///view/21520833/s47/f48fb10e-0beb-4de7-ba52-2153423cab1c/f48fb10e-0beb-4de7-ba52-2153423cab1c/
???
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MAAriHs9-1635878653258)(en-resource://database/7127:0)]

UI测试

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

搜索测试

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

表单测试

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

输入域测试

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

分页测试

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

交互性数据测试

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

链接测试

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

4. 测试执行

bug 定位

前端问题：查看源码
通过网络数据定位：抓取网络数据分析
- 响应数据错误，是后端问题
- 响应数据正确，前端显示错误，是前端问题
- 响应数据与自己操作的不一致，查询数据库确认
后台错误：根据后台日志文件查找错误

浏览器开发者工具

在这里插入图片描述

Elements 面板

定位元素
编辑元素
编辑元素样式

定位元素，修改元素的属性和样式
通过页面元素定位源代码：点击选中Element面板左侧的小箭头，然后点击页面中需要定位的元素。
通过源代码定位页面元素：右击源代码，点击 Scroll into view

Network 面板

清除缓存
模拟网络
查看网络数据
查看网络的依赖关系：shift + 鼠标悬停。绿色是之前要进行的请求，红色是之后要进行的请求
阻止请求：Ctrl + shift + p -> block -> 点击 +，输入要阻止的资源名称-> 点击 add，重新加载界面

红色按钮：抓包按钮
灰色按钮：清除抓到的包
Preserve log：选中则保存前面抓到的接口数据，不选则每次刷新都会清空前面的记录
Disable cache：选中则清除缓存；右击某个接口，点击清理缓存；长按上方刷新按钮，点击‘清空缓存并硬性重新加载’
No throttling：模拟网络状态；Offline断网

Name：抓到资源的URL
Method：请求方式
Status：状态码
Type：请求类型
右击点击‘Header Options’可以选择显示更多的内容
点击单个接口，查看详细信息

按住shift键，在接口上面移动，界面出现的红色的条，需要在当前接口后面执行，出现绿色的，则要在此接口之前先执行
最下面状态栏可以看出请求的总数，传输的数，完成的时间。

导出抓到的数据
右击点击‘Copy’可以选择其中需要的格式进行复制；
Copy as cURL：转换为curl 命令
Copy all as HAR：复制为js格式

阻止
Ctrl+shift+p，在弹出框输入‘block’，选择‘show requests blocking’
在下面出现的面板中点击‘+’，输入要阻止的资源名称，点击 add，重新加载界面。

兼容方案

浏览器兼容：重点是不同的内核
操作系统兼容
分辨率兼容

兼容测试要点

正向功能
界面展示

浏览器兼容
https://ceshiren.com/uploads/default/original/2X/4/4e95805910f83d7ffc78be11d68418fb836b93cc.jpeg
在这里插入图片描述

操作系统
在这里插入图片描述

https://ceshiren.com/uploads/default/original/2X/2/261002a54f9c46369c3f45e4935d806004da1da8.jpeg

分辨率
在这里插入图片描述

https://ceshiren.com/uploads/default/original/2X/e/e310457051e08c237c679b989d77a6e3f049bbc5.jpeg

浏览器：重点是不同的内核

兼容测试工具

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

https://ceshiren.com/uploads/default/original/2X/3/3a2b6ee70f12f35054ea8eda1ffe87431d4dd5c6.png

Toggle device toolbar

模拟移动设备界面
自定义设备
旋转屏幕
生成页面快照
显示标尺
缩放视图
限制网络流量和 CPU 占用率

Toggle device toolbar 小箭头旁边
在上方可以选择手机显示大小，旋转界面，显示百分比，网络控制，在更过选项中，可以选择截取全屏‘capture full size screenshot’，显示标尺‘show rules’

连接速度测试

web 页面响应时间
测试方法：浏览器开发者工具

Network面板中点击下方内容，右侧Timing

连接速度问题分析

排队时间太长
请求第一个字节的时间过长
内容下载缓慢

https://img-blog.csdnimg.cn/49fcc62d19e74b1293adec3daaa4dd45.png

负载测试

测量 Web 系统在某一负载级别上的性能，以保证 Web 系统在需求范围内能正常工作。
负载级别：某个时刻同时访问 Web 系统的用户数量、在线数据处理的数量
测试方法：性能测试工具 JMeter

压力测试

压力测试：测试 Web 应用系统会不会崩溃，在什么情况下会崩溃
测试方法：性能测试工具 JMeter

SQL注入

SQL 注入：将 SQL 语句添加到输入参数中，传递到服务端解析并执行的一种攻击手法
测试方法
- 输入域输入特殊的 SQL 语句
- 利用工具：AppScan、ZAP、Sqlmap

XSS跨站攻击

XSS 跨站攻击：恶意攻击者往 web 页面插入恶意脚本代码，而程序员对于用户输入内容未过滤，当用户浏览该页面时，嵌入其中的web里面的脚本代码会被执行，从而达到恶意攻击用户的特殊目的。
测试方法：输入域中加入 js 脚本语句

输入域安全测试

null
NULL
javascript

doucment.write("abc") <b>hello</b> 1’ order by 1 # 1' or '1'='1 ' or 1=1#

5. 测试总结

总结要点

人力投入
用例覆盖情况
Bug 的分类及数量统计
遗留 Bug 情况
测试风险
测试对象评估
测试结论

测试报告模板
在这里插入图片描述

课后作业

面试设计测试用例常见题目：

测试淘宝 web 版-购物车，列出测试点（xmind）

weixin_54698622

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
11z web测试方法与技术- 软件测试

软件测试所有内容笔记正在陆续更新中，笔记已经在本地记录，全部为自己手动记录的笔记及总结，正在开始更新中，后续会逐步更新并完善到软件测试学习内容总结专栏。本节内容为：web测试方法与技术...
复制链接

扫一扫