HTML5与CSS3项目测试

软件测试技巧

10年积累的网站设计、成都网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站制作后付款的网站建设流程，更有阿合奇免费网站建设让你可以放心的选择与我们合作。

1、添加、修改功能

（1）是否支持tab键

（2）是否支持enter键

（3）不符合要求的地方是否有错误提示

（4）保存后，是否也插入到数据库中

（5）字段唯一的，是否可以重复添加

（6）对编辑页列表中的每个编辑项进行修改，点击保存，是否保存成功

（7）对于必填项，修改为空、空格或其他特殊符号，是否可以编辑成功

（8）在输入框中，直接回车

（9）是否能够连续添加

（10）在编辑的时候，要注意编辑项的长度限制，有时，添加时有长度限制，但编辑时却没有（添加和修改规则是否一致）

（11）添加时，字段是唯一的，不允许重复，但有时，编辑时，却可以修改为相同字段（相同字段包括是否区分大小写以及在输入内容的前后输入空格）

（12）添加含有特殊符号或空格的内容

（13）对于有图片上传功能的编辑框，对于没有上传的图片，查看编辑页面时，是否显示默认图片，如果上传了图片，是否显示为上传图片？

2、删除功能

（1）输入正确数据前加空格，看是否能正确删除？

（2）是否支持enter键

（3）是否能连续删除多个产品？当只有一条数据时，能否成功删除

（4）删除一条数据后，能否再添加相同的数据？

（5）当提供能一次删除多条信息的功能时，注意，删除的数据是否正确？

（6）不选择任何信息，直接点击删除按钮，看有什么错误提示？

（7）删除某条信息时，应该有错误提示信息

3、注册、登录模块

（1）注册成功，但登录失败：注册时，密码设置为一些特殊符号，但登录时，失败

（2）注册时，连续点击提交按钮

（3）注册成功后，页面应该以登录状态跳转到首页

（3）登录时，没区分大小写，注册时，是小写字母，但登录时，用大写字母也能登录进去

（4）登录时，当页面刷新或重新输入新数据时，验证码是否也随之更新

（5）对密码的修改，当把密码修改为很长，或含有特殊符号时，能够修改成功，但却不能成功登录。

4、上传图片测试

（1）文件类型正确，文件大小合适

（2）文件类型正确，文件大小不合适

（3）文件类型错误，文件大小合适

（4）文件类型和大小都合适，上传一个正在使用中的图片

（5）文件类型和大小合适，手动输入一个存在的图片地址来上传

（6）文件类型和大小合适，手动输入一个不存在的图片地址上传

（7）文件类型和大小都合适，手动输入图片名称来上传

5、返回键检查

（1）一条已经成功提交的记录，返回后再提交，看系统是否做了处理

（2）检查多次使用返回键的情况，在有返回键的地方，返回到原来页面重复多次，看是否会出错

6、回车键检查

在输入结束后，直接按回车键，看系统处理如何，是否会报错

7、刷新键检查

在web系统中，使用浏览器的刷新键，看系统处理如何，是否会报错

8、直接URL链接检查

在web系统中，直接输入各功能页面的URL地址，看系统如何处理

9、其他

（1）在测试时，有与网络有关的步骤必须考虑到断网的情况

（2）每个页面都有相应的页面title

（3）在测试的时候要尽量考虑在页面出现滚动条时（滚动条上下滚动下），页面显示是否正常

（4）URL不区分大小写

10、测试中，并发情况的考虑

总结了以下两种情况：

（1）某个字段是唯一的，当多个用户并发点击产生该字段时，检查系统是怎么处理的

（2）对于电子商务网站，当两个或多个用户并发购买量总和大于产品库存量时，能否购买成功

二、界面和易用性测试

1、界面测试，主要测试网站的界面是否和设计一致，是否有错别字，页面布局是否合理，格式是否正确，是否有相应的错误提示信息等。

2、易用性测试，主要是考察所开发出的功能是否人性化，是否易用，是否符合大多数用户的使用习惯等。

3、对Tab和Enter键的测试。

三、兼容性测试

兼容性测试不只是指界面在不同操作系统或浏览器下的兼容，有些功能方面的测试，也要考虑到兼容性，比如涉及到ajax、jquery、javascript等技术的，都要考虑到不同浏览器下的兼容性问题。

四、链接测试

主要是保证链接的可用性和正确性，它也是网站测试中比较重要的一个方面。

五、业务流程测试

业务流程，一般会涉及到多个模块的数据，所以在对业务流程测试时，首先要保证单个模块功能的正确性，其次就要对各个模块间传递的数据进行测试，这往往是容易出现问题的地方，测试时一定要设计不同的数据进行测试。

六、安全性测试

（1）SQL注入

（2）XSS跨网站脚本攻击：程序或数据库没有对一些特殊字符进行过滤或处理，导致用户

所输入的一些破坏性的脚本语句能够直接写进数据库中，浏览器会直接执行这些脚本语句，破坏网站的正常显示，或网站用户的信息被盗,构造脚本语句时，要保证脚本的完整性。

document.write("abc")

scriptalter("abc")/script

（3）URL地址后面随便输入一些符号

(4)验证码更新问题

1. 在购物网站中如果就剩一个商品了 然后多个人同时去点击购买的时候会怎么处理。

2.搜索功能

（1）比较长的名称是否能查到？

（2）空格 或空

（3）名称中含有特殊字符，如：' $% *以及空格等

（4）关键词前面或后面有空格

（5）如果支持模糊查询，搜索名称中任意一个字符是否能搜索到

（6）输入系统中不存在与之匹配的条件

（7）两个查询条件是否为2选1，来回选择是否出现页面错误

（8）输入脚本语言,如：scriptalter(“abc”)/script等

3.添加、修改功能

（1）是否支持tab键

4. 安全测试：

在输入框中输入 'scriptalert(“XSS”)/script后，竟然能执行，记录下来.......

查询输入

（1）分别对单条件进行精确查询

（2）输入长度的检验，输入允许的最长值进行查询，是否支持

（3）两个查询条件是否为2选1，来回选择是否出现页面错误

（5）输入特殊字符

（6）输入数字

（7）输入汉字

（8）输入关系表达式 与、或、异或、非、等于

（9）输入空格

（10）条件中含有空格

（11）输入超长字符

（12）输入全角字符

（13）输入单引号

（14）输入单引号引起来的数据

（15）输入双引号

（16）输入双引号引起来的数据

（17）如果支持模糊查询，输入部分查询条件

（18）输入系统中不存在与之匹配的条件

查询结果检查

（1）查询结果按什么顺利排序

（2）查询结果是否根据字段显示排序功能

（3）查询结果是否有分页，如果有，每页最多包含多少记录

（4）查询结果是否匹配

（5）查询结果是否与数据库一致

（6）查询结果是精确查询还是模糊查询

UI验证

（1）文字显示是否正确

（2）页面是否有错别字

（3）输入框大小、文字大小是否合适

（4）页面是否美观

（5）查询结果字段显示是否与需求一致

性能方面

（1）查询处理时间是否能接受

（2）数据库中存在大数据量数据时，查询时间是否能接受

（3）当多个用户同时查询时，输入相同或不同的查询条件系统响应是否及时

对于查询功能，同样可以从以下几个方面来进行用例的设计：

1、功能方面考虑：应用边界值和等价类划分法进行用例的设计

边界值：输入最大长度的文本，能否搜出来？输入空格或空，能否搜索出来？

等价类：要考虑到一些特殊符号的输入查询。

2、易用性方面

3、界面方面

4、安全角度：比如输入一些脚本语言，看是否执行，主要是防XSS攻击问题

5、性能角度：查询效率、并发、响应时间问题的考虑

网页安全缺陷

现在网站开发已经注意到：登陆网站进入其内部网页后，直接拷贝网址，然后粘贴到另一IE窗口输入，可以绕过登陆直接访问。也许商业网站很关注这个问题，但是很多行业软件却很容易忽略。

网页安全缺陷还可能存在于IE弹出的子窗口。有些设计不严格的软件，在主页面关闭的时候子页面还可以运行，这是一个明显的漏洞，而且还大大增加了错误发生的几率。

判断顺序/逻辑缺陷

对界面进行多个输入判断的时候，非常容易出现这种问题。例如判断年月顺序，判断长度，判断非空等。假如操作员仅仅满足单个条件，保存不能成功;而按界面从上之下顺序一一满足条件之后，保存是没有问题的。但是，改变一下输入的次序，校验失效。例如，一一满足条件之后，不保存，倒过来将上面的输入改成非法输入，然后保存，结果居然也能成功，这是因为原先的判断由于发生过，或者根据语句顺序只检查最后一个判断，所以没有报错。这种错误尤其在Java scrīpt脚本的页面中要注意。能够保存不能保证数据正确，有可能引起系统崩溃或者后续数据错误。所以，在测试的时候，不要按照正常的顺序输入，而是要打乱步骤，看看代码是否强健，是否在判断逻辑上没有错误。良好的代码应该经得起折腾，至少保存时会再此全部进行判断，而不只是简简单单走到判断的最后一行。

调试语句和冗余信息

维护项目和升级改造的推广系统最容易潜伏这类缺陷。典型表现在没有删除或者屏蔽调试语句。弹出一个界面不友好的提示信息，会使不明真相的用户产生误以为系统发生了严重故障，从而引起对软件的不信任感。页面中某个角落存在当前客户不需要的冗余按钮和功能也是一种缺陷。多余的功能会使用户以为是额外附加部分而去使用，其结果可想而知;而多余的按钮会误导好奇心强的用户操作，产生不必要的错误。

同样值得关注的还有参数设置，由于没有实际数据，开发人员在调试或者单元测试的时候，习惯性的进行自我设定而忘了删除，软件测试人员可能会忽略掉了这部分测试，也可能导致在客户现场发生错误而影响系统发布和验收。

不可重现的故障

新参加软件测试的人员或者新来的开发人员总是要问，不可重现的缺陷是否需要记录，有必要吗?回答是肯定的。测试必须如实的记录发生的问题，也许不能重现，或者使非软件系统本身问题，但是，可能这些偶然性背后是有规律的，不记录这些，就不可能发现这些规律。

多节点的逆向流转缺陷

当前软件不少喜欢使用工作流来驱动。工作流的问题，就是可能出现多个流向分支。测试容易忽略的部分，就是工作流多节点的逆向流转。例如，通过不通过涉及两个分支，但是流程逆转的时候，有可能不是回到上一节点而是平级的另一个节点去了。软件测试要格外注意这类用例的设计。另外，有些时候默认分支在向前的时候是有默认值的，例如默认通过，那么保存的时候要提示用户是否通过，否则可能由于操作疲劳而走错了节点，引起回退。

输入框缺陷

试过往输入框粘贴数据而不是直接输入吗?可能这里会出现问题。按Ctrl+V的时候，输入框会根据长度大小自动截断输入长度。但是用鼠标，截断可能会失效。有一次测试人员就是用这种方法把一篇Word文档输入进去了，保存的时候，数据库崩溃。有些网站登陆的口令****可以拷贝下来的，只要放在剪贴板里面马上明文显示。（在以后的测试中需要注意的）

HTML5开发需要学习哪些内容

关于Web前端学习的必经阶段。正在从事Web前端学习的小伙伴们来和小伙伴们一起看一看吧。希望能够对大家有所帮助！

第一阶段：

● HTML+CSS:

HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、

● JavaScript基础：

Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。

● JS基本特效：

常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。

● JS高级特征：

正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、

● JQuery：基础使用

悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。

第二阶段：HTML5和移动Web开发

● HTML5：

HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas.

● CSS3:

CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。

● Bootstrap:

响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。

● 移动Web开发：

跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、手机聚划算页面、手机滚屏。

第三阶段：HTTP服务和AJAX编程

● WEB服务器基础：

服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。

● PHP基础：

PHP基础语法、使用PHP处理简单的GET或者POST请求、

● AJAX上篇：

Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用。

● AJAX下篇：

JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现瀑布流案例额。

第四阶段：面向对象进阶

● 面向对象终极篇：

从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。

● 面向对象三大特征：

继承性、多态性、封装性、接口。

● 设计模式：

面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。

第五阶段：封装一个属于自己的框架

● 框架封装基础：

事件流、冒泡、捕获、事件对象、事件框架、选择框架。

● 框架封装中级：

运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。

● 框架封装高级和补充：

JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。

第六阶段：模块化组件开发

● 面向组件编程：

面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。

● 面向模块编程：

AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。

第七阶段：主流的流行框架

● Web开发工作流：

GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。

● MVC/MVVM/MVW框架：

Angular.js、Backbone.js、Knockout/Ember。

● 常用库：

React.js、Vue.js、Zepto.js。

第八阶段：HTML5原生移动应用开发

● Cordova：

WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境搭建、Cordova实战(创建项目，配置，编译，调试，部署发布)。

● Ionic：

Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果(下拉刷新，上拉加载，侧滑导航，选项卡)。

● React Native：

React Native简介、React Native环境配置、创建项目，配置，编译，调试，部署发布、原生模块和UI组件、原生常用API。

● HTML5+：

HTML5+中国产业联盟、HTML5 Plus Runtime环境、HBuilder开发工具、MUI框架、H5+开发和部署。

第九阶段： Node.js全栈开发

● 快速入门：

Node.js发展、生态圈、Io.js、Linux/Windows/OS X环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试。

● 核心模块和对象：

全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操作，序列化和反序列化、文件流操作、HTTP服务端与客户端、Socket.IO。

● Web开发基础：

HTTP协议，请求响应处理过程、关系型数据库操作和数据访问、非关系型数据库操作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例。

● 快速开发框架：

Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。

● Node.js开发电子商务实战：

需求与设计、账户模块注册登录、会员中心模块、前台展示模块、购物车，订单结算、在线客服即时通讯模块。

有关新手入门html5的书籍有哪些？

HTML5是万维网的核心语言、超文本标记语言(HTML)的第五次重大修改。HTML5 已经于2014年10月正式定稿。然而，大部分现代浏览器已经具备了某些HTML5支持。HTML5是web时代最前沿的技术，它特有canvas标签和多种选择的游戏开发引擎，让游戏开发更便捷。

近些年来html5技术非常火爆！HTML5开发人员是企业必不可少、不可或缺的人员。企业想要快速的发展，HTML5开发人员就必须要有，由此可见HTML5开发人员是多么的紧张，所以有很多人想要学习HTML5开发。

下面，就为你推荐几部新手入门html5的书籍。

1、HTML5+CSS3从入门到精通（李东博 著）

简介：本书通过基础知识+中小实例+综合案例的方式，讲述了用HTML5+ CSS3设计构建网站的必备知识，相对于专业指南、高级程序设计、开发指南同类图书，本书是一本适合快速入手的自学教程。

2、响应式Web设计:HTML5和CSS3实战（BenFrain 著, 王永强 译）

简介：全书主要是带领读者做一个小网页来写的，其实响应式的东西讲得比较少，大半内容是介绍H5和css3的基础知识。如果同时想了解H5和css3和响应式设计入门，这本书不错。

3、HTML5移动Web开发实战详解（林珑 著）

简介：本书由浅入深，全面、系统、详尽地介绍了HTML5相关技术和其在移动开发领域的应用。书中提供了大量的代码示例，读者可以通过这些例子理解知识点，也可以直接在开发实战中稍加修改应用这些代码。《HTML5移动Web开发实战详解》涉及面广，从基本原理到实战，再到项目工作流，几乎涉及一个合格的前端开发工程师需要具备的所有重要知识。

4、　疯狂HTML 5/CSS3/JavaScript讲义（李刚 著）

简介：这是一本全面介绍HTML 5、CSS 3和JavaScript前端开发技术的图书，系统地介绍了HTML 5常用的元素和属性、HTML5的表单元素和属性、HTML 5的绘图支持、HTML5的多媒体支持、CSS 3的功能和用法、最前沿的变形与动画功能等。除此之外，《疯狂HTML 5/CSS 3/JavaScript讲义》还系统地介绍了JavaScript编程知识，包括JavaScript基本语法、DOM编程，以及HTML 5新增的本地存储、离线应用、JavaScript多线程、客户端通信支持、WebSocket编程等。

5、HTML5触摸界面设计与开发（StephenWoods 著, 覃介右 谷岳 译）

简介：《HTML5触摸界面设计与开发》专注于触摸界面的开发，内容的结构和优化网站的思路大概一致。上半部分涵盖了能使各类网站，特别是移动网站变快的基本概念。书的后半部分是专门讲触摸界面的，特别是尽可能地让它们更平稳和快速。本书适合具有一定经验的Web开发者阅读参考。

HTML5技术哪些方面必须完善

HTML5相关开源项目方面；

HTML5相关开源项目在github上无疑是总数世界第一。但是另外一方面，HTML5仍然需要更为强大，更有工作效率的工作流。

我们需要在HTML5领域内有能跟其他领域一样世界级的工作流方案，强大的引擎，高度可视化的创意工具，云与端的计算完美结合，这些都能更有效的保证我们的工作成果和工作过程越来越专业。

各行各业最顶级的创意开发工具，目前来看，没有一个是专门为HTML5技术而生的。

2、 HTML5的标准化的能力需要提升；

HTML5规范虽然在2014年底终于定稿，但是这其中经历了太多的曲折，推进的过程中充满了各大浏览器厂商借助标准扩大行业话语权的暗战，目前，仍然有大量的创新标准无法在日新月异的移动领域市场快速被定案与普及。太多事实。

给各位列举几个：1、CSS3的标准落地异常复杂，甚至于出现在开发者创建和声明CSS3新属性时，针对不同浏览器，一个属性要设定针对浏览器的众多前缀才能保证浏览器对它的支持，这么蛋疼的编写设定虽然是过渡方案，但是不得不说标准化落地过程中产生的各种额外代价都无形的转嫁给了开发者。 2、另一个例子是关于WebGL，来源于的数据统计，移动设备对于WebGL的支持率已经上升到有史以来的最高，超过8成支持WebGL内容的访问，这无疑是可喜的状况。

但是从另一方面的比较则看出WebGL的进化仍面临巨大挑战。首先是,WebGL1.0从2011年起到现在已经近4年多几乎没有过任何能力上的进化，这几年全部都是标准规范草案定义能力的推进普及，变革速度相比起微软的DX12和Kronos组织全新一代的Vulkan技术的进化速度相比，简直惨不忍睹。当未来PC和主机游戏，甚至手机原生游戏都更多的可以从下一代的DX和Vulkan技术中全面获益，获得飞一样的提升时，我们HTML5的开发者们仍旧在为越来越多的设备终于支持WebGL而沉浸其中。好比有钱人又买别墅了，我还在为今年终于工资涨了几百而欢欣雀跃一样讽刺。如果HTML5技术想大成，不仅标准化的普及要快，功能性的创新也同样要快。

虽然HTML5看似已经成了移动市场上实现网络富媒体交互技术的好选择，但是HTML5的技术未来并不是想象中的那么乐观，前路依然任重而道远。

分享名称：工作流html5,工作流程图
文章起源：http://ybzwz.com/article/dsdceos.html