结合了工作经验，写出了这篇文章，全是干货和经验分享。用您5分钟时间阅读完，希望能对您有帮助！
相信很多人都喜欢用浏览器看网页，虽然网民不是专业人员，但是对界面效果的印象是很重要的。如果你注重这方面的测试，那么验证应用程序是否易于使用就非常重要了。很多人认为这是测试中最不重要的部分，但是恰恰相反界面对不懂技术的客户来说那相当关键，慢慢体会就会明白的。
Web界面设计中，对各种元素（如按钮、单选框、复选框、列表框、超连接、输入框等等）的设计是非常重要的。
一、搜索功能
若查询条件为输入框，则参考输入框对应类型的测试方法
1、功能实现：
（1）如果支持模糊查询，搜索名称中任意一个字符是否能搜索到
（2）比较长的名称是否能查到
（3）输入系统中不存在的与之匹配的条件
（4）用户进行查询操作时，一般情况是不进行查询条件的清空，除非需求特殊说明。
2、组合测试：
（1）不同查询条件之间来回选择，是否出现页面错误（单选框和多选框最容易出错）
（2）测试多个查询条件时，要注意查询条件的组合测试，可能不同组合的测试会报错。
二、添加、修改功能
1、特殊键：
（1）是否支持Tab键
（2）是否支持回车键
2、提示信息：
不符合要求的地方是否有错误提示
3、唯一性：
字段唯一的，是否可以重复添加，添加后是否能修改为已存在的字段（字段包括区分大小写以及在输入的内容前后输入空格，保存后，数据是否真的插入到数据库中，注意保存后数据的正确性）
4、数据 正确性：
（1）对编辑页的每个编辑项进行修改，点击保存，是否可以保存成功，检查想关联的数据是否得到更新。
（2）进行必填项检查（即是否给出提示以及提示后是否依然把数据存到数据库中；是否提示后出现页码错乱等）
（3）是否能够连续添加（针对特殊情况）
（4）在编辑的时候，注意编辑项的长度限制，有时在添加的时候有，在编辑的时候却没（注意要添加和修改规则是否一致）
（5）对于有图片上传功能的编辑框，若不上传图片，查看编辑页面时是否显示有默认的图片，若上传图片，查看是否显示为上传图片
（6）修改后增加数据后，特别要注意查询页面的数据是否及时更新，特别是在首页时要注意数据的更新。
（7）提交数据时，连续多次点击，查看系统会不会连续增加几条相同的数据或报错。
（8）若结果列表中没有记录或者没选择某条记录，点击修改按钮，系统会抛异常。
三、删除功能
1、特殊键：
（1）是否支持Tab键
（2）是否支持回车键
2、提示信息：
（1）不选择任何信息，直接点击删除按钮，是否有提示
（2）删除某条信息时，应该有确认提示
3、数据 实现：
（1）是否能连续删除多个产品
（2）当只有一条数据时，是否可以删除成功
（3）删除一条数据后，是否可以添加相同的数据
（4）如系统支持批量删除，注意删除的信息是否正确
（5）如有全选，注意是否把所有的数据删除
（6）删除数据时，要注意相应查询页面的数据是否及时更新
（7）如删除的数据与其他业务数据关联，要注意其关联性（如删除部门信息时，部门下游员工，则应该给出提示）
（8）如果结果列表中没有记录或没有选择任何一条记录，点击删除按钮系统会报错。
四、输入框
1、字符型输入框
（1）字符型输入框：英文全角、英文半角、数字、空或者空格、特殊字符“~！@#￥%……&*？[]{}”特别要注意单引号和&符号。禁止直接输入特殊字符时，使用“粘贴、拷贝”功能尝试输入。
（2）长度检查：最小长度、最大长度、最小长度-1、最大长度+1、输入超工字符比如把整个文章拷贝过去。
（3）空格检查：输入的字符间有空格、字符前有空格、字符后有空格、字符前后有空格
（4）多行文本框输入：允许回车换行、保存后再显示能够保存输入的格式、仅输入回车换行，检查能否正确保存（若能，检查保存结果，若不能，查看是否有正常提示）
（5）安全性检查：
输入特殊字符串（null,NULL, ,javascript,<script>,</script>,<title>,<html>,<td>）
输入脚本函数(<script>alert("abc")</script>)、doucment.write("abc")、hello）
2、数值型输入框
（1）边界值：最大值、最小值、最大值+1、最小值-1
（2）位数：最小位数、最大位数、最小位数-1最大位数+1、输入超长值、输入整数
（3）异常值、特殊字符：输入空白（NULL）、空格或"~!@#$%^&*()_+{}|[]:"<>?;',./?;:'-=等可能导致系统错误的字符、禁止直接输入特殊字符时，尝试使用粘贴拷贝查看是否能正常提交、word中的特殊功能，通过剪贴板拷贝到输入框，分页符，分节符类似公式的上下标等、数值的特殊符号如∑，㏒，㏑，∏，+，-等。
输入负整数、负小数、分数、输入字母或汉字、小数（小数前0点舍去的情况，多个小数点的情况）、首位为0的数字如01、02、科学计数法是否支持1.0E2、全角数字与半角数字，数字与字母混合、16进制，8进制数值、货币型输入（允许小数点后面几位）。
（4）安全性检查：不能直接输入就copy
3、日期型输入框：
（1）合法性检查：(输入0日、1日、32日)、月输入[1、3、5、7、8、10、12]、日输入[31]、月输入[4、6、9、11]、日输入30、输入非闰年，月输入[2]，日期输入[28、29]、输入闰年，月输入[2]、日期输入[29、30]、月输入[0、1、12、13]
（2）异常值、特殊字符：输入空白或NULL、输入~！@#￥%……&*（）{}[]等可能导致系统错误的字符
（3）安全性检查：不能直接输入，就copy，是否数据检验出错？
4、信息重复
在一些需要命名,且名字应该唯一的信息输入重复的名字或ID,看系统有没有处理,会否报错,重名包括是否区分大小写,以及在输入内容的前后输入空格,系统是否作出正确处理.
五、Web测试注意事项都有哪些！
1.页面提示信息
主要是对页面操作结果成功或失败的提示信息，还有用户在做一些关键操作或者是涉及敏感操作时系统是否会有提醒。
2.页面功能部分
（1）页面初始数据是否显示正确
（2）页面数据处理功能是否被正确执行并返回正确结果
（3）对模块的功能测试时可以列出该模块的所有实现功能进行排列组合，比如页面基本的增删改查功能：
增加-->增加-->增加（连续增加测试）；增加-->删除-->增加（之前删除内容）；修改-->增加（修改之前内容）
3.页面中元素显示
（1）页面元素（为实现功能，是否讲所有的页面元素全部列出，比如按钮、单选框、复选框、列表栏、超链接、输入框等）
（2）查看元素是否存在并可以正常显示
（3）页面元素基本功能的实现（如特殊效果、动画特效、按钮、超链接等）
（4）页面元素的处理错误的能力（如故意制造错误信息，查看页面的返回是否友好）
4.页面的容错性
（1）设置页面输入内容的格式（限制用户输入内容）
（2）对用户输入不正确内容系统是否会正确处理（页面提示输入正确格式内容或提示用户重新输入）
（3）对用户输入的特殊字符要严格把控，否则可能造成SQL注入问题
5.web页面
（1）查看页面清单是否完整（是否将页面中所有内容全部正确加载）
（2）页面是否正常显示（在不同浏览器版本中页面显示是否正常）
（3）页面在窗口中是否显示正确、美观（在调整浏览器窗口大小时，屏幕刷新是否正确，屏幕是否会随着窗口的大小发生变化）
（4）页面的特殊效果是否可以正常显示（如特殊的字体、动画、图片之类的效果）
测试工具比较：选Jest，不选Mocha
Jest的未来看起来非常令人激动！看到Jest推陈出新如此快速，我感觉它将很快成为整个React生态系统中大部分项目的首选工具。我建议，应该把测试迁移到Jest上去。
你需要了解的前端测试“金字塔”
如果您正在测试前端应用程序，则应该了解前端测试金字塔。在本文中，我们将看到前端测试金字塔是什么，以及如何使用它来创建全面的测试套件。
web网页性能测试工具都有哪些
作为前端开发，我们不仅需要满足产品需求功能的实现，同时也需要对自己做的网站进行安全、易用性、性能等方面的考虑。随着目前技术不断进步，web页面的性能测试工具也在不断完善，通过这些工具，我们可以客观的评价web网站的质量水平。
js单元测试工具-jest自动化测试
jest 是 facebook 开源的，用来进行单元测试的框架，可以测试 javascipt 和 react。jest 提供了非常方便的 API，可以对下面的场景方便的测试：一般函数、异步函数、测试的生命周期、react 测试
web测试要点、方法_web端测试大全总结
web测试大全，测试web网站有哪些点呢？主要包括：功能测试、兼容性测试、安全测试、输入框测试、用户权限测试等
前端性能测试工具整理简介_性能测试工具都有哪些?
前端性能测试工具都有哪些:Favicon、Open Graph、图片优化-压缩图像、CSS 优化-Autoprefixer、Purifycss、minify CSS、减少载入时间、GZIP、CDN、优化平台-Sentry、Google Tag Manager
不用写代码，也能做好接口测试
本文你将了解到:1、接口测试基本概念，包含什么是接口，什么是接口测试，为什么要做接口测试;2、接口测试用例设计,3、怎样不用写代码，也能快速的根据开发的API文档完成接口自动化测试脚本
Selenium打开浏览器加载慢的原因
在自动化元素定位操作中经常使用智能等待来加强定位的强壮性，主要就是因为WebDriver没有提供页面加载场景的方法；在使用JavaScript知识的突然心生灵感，可以使用JavaScript来配合验证页面加载，结果发现我真是井底之蛙。
power assert_更智能、优雅的全方位 assert 断言库
在写测试代码时，以往我们需要翻阅文档，学习各种 API 才能明白如何操作断言。而现在我们可以透过 power-assert 的 assert 方法来减轻调试压力。不仅如此，它还提供更加直观，具体的运行效果，帮助 DEBUG。写测试代码，其实可以很容易。
常用的web网站负载/压力/性能测试工具
在网站上线发布之前，我们除了必要的安全、功能测试外，往往还需要进行压力测试。通过模拟实际应用的软硬件环境及用户使用过程的系统负荷，长时间或超大负荷地运行测试软件。包括：Apache JMeter 、LoadRunner、NeoLoad等
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!