技术标签: 个人心得总结 自动化测试 sdk测试 前端测试 sdk
主要想分享一下有关前端测试的探索之路上遇到的难点和收获
作者:变优秀的小白
Github:关注YX-XiaoBai
爱好:Americano More Ice !
QQ学习交流群(new): 811792998
自从进入新的项目组后,最近几个月大部分迭代在做一些相关前端的测试,从
页面迭代
–>埋点测试
–>SDK测试
过程,由于之前对新项目架构及细节没有足够熟悉,只能一遍踩坑一遍沉淀,将一些没有考虑到的易错点和功能细节慢慢形成了一套新的测试体系,最终沉淀了目前对前端测试质量保证的方案。在此,会根据沉淀下来的 前端测试质量保证方案不断推进,以尽可能的保证前端测试质量,也可能有考虑不周到或不全面的地方,希望可以和大家分享交流。
先全局看下整个数据流的架构和层次结构,现在主要做了哪方面的质量保障:
SDK
由前端WEB-SDK
和后端SDK
构成,主要做了两件事情,前者主要提供了页面渲染,用于和C端
用户交互,其中包括了样式、行为js等等;后者主要提供了封装好的接口供前者使用,用于组装backend
提供的各种接口,完成面向C端
的接口封装。
下面就详细的铺开讲述各个维度的质量保证工作及完成情况
单元测试(数据处理层):指对软件中最小的可测试单元进行检查和验证
Jest
框架及后端使用go
内置的testing
内置单测框架接口测试(业务逻辑层):主要检查验证模块间的调用返回以及不同系统、服务间的数据交换
postman
等jemter
,常用的测试框架locust-boomer
、locust
等httprunner
、pytest
等UI测试(GUI界面层):UI层是用户使用产品的入口,所有功能通过这一层提供给用户,前端测试工作大多集中在这一层
charles
、mock
等puppeteer
、cypress
、selenium
等以上的性价比:按照测试金字塔模型以及投入/产出比,越向下,回报率越高;但是当项目趋于稳定后,在接口测试
和单元测试
完善度较高时,最上层的UI测试
占比将逐步扩大
UI自动化
维护成本高、性价比低,不对项目进行UI自动化
接口测试
、单元测试
不能真实反映用户的操作路径接口测试
、单元测试
不能真实反映用户的操作路径,存在发布A功能影响B功能的场景如现在的沙盒项目,项目稳定且回归场景过多
)具体为什么需要UI自动化的例子,可以参考待分享
维护成本过高,每次迭代改动页面时,就可能需要重写UI自动化脚本
如今项目中的UI自动化测试选择使用的框架为 puppeteer
,它是由 Chrome
维护的 Node
库,基于 DevTools
协议来驱动 chrome
或者 chromium
浏览器运行,支持 headless
和 non-headless
两种方式。官网提供了非常丰富的文档。
selenium
更轻量级,增加npm
包即可使用selenium
等待轮询更稳当、性能更佳chrome
原生支持,支持所有chrome
的api
预生成的数据
来替代调用外部接口生成数据
在用例中使用UI自动化脚本
实现交互操作越多则稳定性越低,尽量使用预置数据而不是实时生成它,速度更快,稳定性更高A用例
执行失败的脏数据就不会影响B用例
的执行虽然 SDK
中不做复杂的业务逻辑处理而且后端层面已实现API自动化测试,但是 SDK
将提供的多个 http
接口进行二次转换,转化过程就带来了各种数据的获取、组合、转换形成了一个新的 end-to-end
的接口,仅仅后端的接口自动化已经不可保障对上层接口的全覆盖,所以需要针对SDK
转化实现的接口进行自动化测试,才能做到更好的查漏补缺。
SDK层面
接口测试的质量?SDK
转化实现的接口完全覆盖业务逻辑?SDK
接口是通过http
方式到达SDK
后端,非js
单元测试,也非browser
功能测试,如何保证SDK
层面接口的覆盖率?istanbul
: 是业界比较易用的 js
覆盖率工具,它利用模块加载的钩子计算语句、行、方法和分支覆盖率,以便在执行测试用例时透明的增加覆盖率。它支持所有类型的 js
覆盖率,包括单元测试、服务端功能测试以及浏览器测试。得到的覆盖率结果类似下图所示。
单元测试在测试分层中处于金字塔最底层的位置,单元测试做的比较到位且完整的情况下,能过滤掉大部分的问题,这部分主要由开发负责编写
目前公司使用的是Jest
单测框架
XSS
与SQL
注入相似,XSS
是通过网页插入恶意JS
或者H5
脚本,主要用到的技术也是前端的HTML
和JavaScript
脚本。当用户浏览网页时,实现控制用户浏览器行为的攻击方式主要分为了下面三种类型
js
脚本url
插入js
脚本js
直接拿到参数输出到前端,未经过后端在测试中,使用h5脚本<img src="#" onerror=alert(document.cookie)>
运行代码,点击分享,发现页面源代码可以被修改,直接获取到了cookie
,这就是个明显XSS漏洞
的例子。get
与post
请求的xxs
漏洞测试方法类似类似
v-html
指令最终调用的是innerHTML
方法将指令的value
插入到对应的元素里。这就是造成xss
攻击的‘漏洞’了。下面是v-html
的源码:
// /vue/src/platforms/web/compiler/directives/html.js
export default function html (el: ASTElement, dir: ASTDirective) {
if (dir.value) {
addProp(el, 'innerHTML', `_s(${
dir.value})`)
}
}
导致xxs
的一些原因:
cookie
标记为http only
, 标记后Js
中的document.cookie
语句就不能获取到cookie
了Html
标签, 例如常见的h5标签
: <script>
, <iframe>
, <
; for <, > for >
等等js
事件的标签。例如 onclick=
, onfocus
,onerror
等等定义: SQL
注入是通过把SQL
命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL
命令
危害: 网页、数据被篡改,核心数据被窃取,数据库所在的服务器被攻击,变成傀儡主机
测试方法: 在用到查询的页面,输入查询条件and 1=1
等简单sql
,如果查询条件返回结果一致,标明未进行过滤,初步断定存在sql
注入漏洞等
此场景在现在是比较少见。
通过查看URL
的get
参数对那些类似明显的顺序数字 进行修改,看是否能越权访问。
单测也不能完全保证基础库的变更完全没有问题,伴随着业务层引入新版本的基础库,bug
会进一步带入到业务层,最终影响 C
端用户的正常使用
如何保障每次业务引入新版本基础库或升级版本做到全面回归,如何对基础库变更更加敏感
每次向 master
代码的提交或 merge
请求,针对关注 package.json
中是否有某个基础库版本变更,以便更精确的对版本库升级影响的功能着重地进行测试,做到前端代码变更的精确测试,可以避免相对黑盒测试
是否需要实现一个diff
小工具,在每次master
有package.json
的改动时及时通知测试负责人
如今有专门的报警钉钉群来实时监控线上问题,监控沙盒报警情况,如超过阀值报警、沙盒异常报警等,以便于及时发现问题、排查问题,以保证线上的稳定性
目前前端测试基本就是这样,UI自动化、Web安全测试、接口自动化等都已经实施落地了,当然也有些部分(如SDK层面接口测试)没有完全展开,需要后续不断地完善往更精确测试推进,才能更好的保证测试质量。测试过程中难免会有部分特殊场景没办法完全覆盖,或有不足的地方,只能逐步探索和沉淀来更全量的保证前端测试质量。
文章浏览阅读1k次。通过使用ajax方法跨域请求是浏览器所不允许的,浏览器出于安全考虑是禁止的。警告信息如下:不过jQuery对跨域问题也有解决方案,使用jsonp的方式解决,方法如下:$.ajax({ async:false, url: 'http://www.mysite.com/demo.do', // 跨域URL ty..._nginx不停的xhr
文章浏览阅读2k次。关于在 Oracle 中配置 extproc 以访问 ST_Geometry,也就是我们所说的 使用空间SQL 的方法,官方文档链接如下。http://desktop.arcgis.com/zh-cn/arcmap/latest/manage-data/gdbs-in-oracle/configure-oracle-extproc.htm其实简单总结一下,主要就分为以下几个步骤。..._extproc
文章浏览阅读1.5w次。linux下没有上面的两个函数,需要使用函数 mbstowcs和wcstombsmbstowcs将多字节编码转换为宽字节编码wcstombs将宽字节编码转换为多字节编码这两个函数,转换过程中受到系统编码类型的影响,需要通过设置来设定转换前和转换后的编码类型。通过函数setlocale进行系统编码的设置。linux下输入命名locale -a查看系统支持的编码_linux c++ gbk->utf8
文章浏览阅读750次。今天准备从生产库向测试库进行数据导入,结果在imp导入的时候遇到“ IMP-00009:导出文件异常结束” 错误,google一下,发现可能有如下原因导致imp的数据太大,没有写buffer和commit两个数据库字符集不同从低版本exp的dmp文件,向高版本imp导出的dmp文件出错传输dmp文件时,文件损坏解决办法:imp时指定..._imp-00009导出文件异常结束
文章浏览阅读143次。当下是一个大数据的时代,各个行业都离不开数据的支持。因此,网络爬虫就应运而生。网络爬虫当下最为火热的是Python,Python开发爬虫相对简单,而且功能库相当完善,力压众多开发语言。本次教程我们爬取前程无忧的招聘信息来分析Python程序员需要掌握那些编程技术。首先在谷歌浏览器打开前程无忧的首页,按F12打开浏览器的开发者工具。浏览器开发者工具是用于捕捉网站的请求信息,通过分析请求信息可以了解请..._初级python程序员能力要求
文章浏览阅读7.6k次,点赞2次,收藏6次。@Service标注的bean,类名:ABDemoService查看源码后发现,原来是经过一个特殊处理:当类的名字是以两个或以上的大写字母开头的话,bean的名字会与类名保持一致public class AnnotationBeanNameGenerator implements BeanNameGenerator { private static final String C..._@service beanname
文章浏览阅读6.9w次,点赞73次,收藏463次。1.前序创建#include<stdio.h>#include<string.h>#include<stdlib.h>#include<malloc.h>#include<iostream>#include<stack>#include<queue>using namespace std;typed_二叉树的建立
文章浏览阅读7.1k次。在Asp.net上使用Excel导出功能,如果文件名出现中文,便会以乱码视之。 解决方法: fileName = HttpUtility.UrlEncode(fileName, System.Text.Encoding.UTF8);_asp.net utf8 导出中文字符乱码
文章浏览阅读2.1k次,点赞4次,收藏23次。第一次实验 词法分析实验报告设计思想词法分析的主要任务是根据文法的词汇表以及对应约定的编码进行一定的识别,找出文件中所有的合法的单词,并给出一定的信息作为最后的结果,用于后续语法分析程序的使用;本实验针对 PL/0 语言 的文法、词汇表编写一个词法分析程序,对于每个单词根据词汇表输出: (单词种类, 单词的值) 二元对。词汇表:种别编码单词符号助记符0beginb..._对pl/0作以下修改扩充。增加单词
文章浏览阅读773次。我在使用adb.exe时遇到了麻烦.我想使用与bash相同的adb.exe shell提示符,所以我决定更改默认的bash二进制文件(当然二进制文件是交叉编译的,一切都很完美)更改bash二进制文件遵循以下顺序> adb remount> adb push bash / system / bin /> adb shell> cd / system / bin> chm..._adb shell mv 权限
文章浏览阅读6.8k次,点赞12次,收藏125次。1. 单目相机标定引言相机标定已经研究多年,标定的算法可以分为基于摄影测量的标定和自标定。其中,应用最为广泛的还是张正友标定法。这是一种简单灵活、高鲁棒性、低成本的相机标定算法。仅需要一台相机和一块平面标定板构建相机标定系统,在标定过程中,相机拍摄多个角度下(至少两个角度,推荐10~20个角度)的标定板图像(相机和标定板都可以移动),即可对相机的内外参数进行标定。下面介绍张氏标定法(以下也这么称呼)的原理。原理相机模型和单应矩阵相机标定,就是对相机的内外参数进行计算的过程,从而得到物体到图像的投影_相机-投影仪标定
文章浏览阅读2.2k次。文章目录Wayland 架构Wayland 渲染Wayland的 硬件支持简 述: 翻译一篇关于和 wayland 有关的技术文章, 其英文标题为Wayland Architecture .Wayland 架构若是想要更好的理解 Wayland 架构及其与 X (X11 or X Window System) 结构;一种很好的方法是将事件从输入设备就开始跟踪, 查看期间所有的屏幕上出现的变化。这就是我们现在对 X 的理解。 内核是从一个输入设备中获取一个事件,并通过 evdev 输入_wayland