html5 webapp 测试关注点和技巧，借助chrome开发者工具测试

     目前一直在测试手机浏览器上的互联网应用，使用的是html5 webapp。这里记录一下平日测试过程中要注意的点，也是bug比较集中容易出现的地方。

一、html5 webapp，要测试manifest文件中资源的更新情况。

       manifest文件中列的资源文件，是为了利用cache提升性能的，可将js, css或图片文件放在其中。在首次访问，或清空缓存时 页面请求后会去下载manifest文件中列的所有资源，二次加载时，先去判断manifest文件是否有变更，无变更时直接从缓存读取这些资源，不用重新请求。当有变更时重新下载。

       测试关注点：首次无缓存情况的测试、有缓存二次请求时的测试、资源文件变更时是否会更新重新下载资源。 

 

以wap淘宝的微淘为例，下图为第一次请求页面的过程，可从chrome的开发工具中查看请求。

获取到manifest文件，然后check app cache，判断没有这些资源时开始下载。

 

当第二次请求，刷新浏览器页面时，先check app cache ，发现文件没有变更，则不去下载资源文件，从缓存中直接读取。

 

从network中可以看出，此时manifest文件中列出的所有资源都是从cache中读取的。

 

 二、查看application cache, localstorage， cookie中的内容是否正确。

        开发有很多逻辑处理的依赖数据都是存在application cache, localstorage或cookie中，在测试过程中，需要关注值是否正确。

       在chrome开发者工具中，输入命令：window.localStorage 可以查看localstorage中的值。

       执行命令：localStorage.clear() 可以清空localstorage

       当然在chrome开发者工具中，查看resources面板，也能很直观的看到application cache, localstorage， cookie中的内容。

       

 
 清空chrome中appcache，可以通过在浏览器中输入：chrome://appcache-internals/

点击Remove，即可删除appcache.

三、其它测试点：

       1、当页面有实现自己的返回，或点浏览器自带返回，跳转页面是否正确。是否有触发页面数据请求，页面渲染。

      2、当页面有实现刷新，是否触发页面数据请求，页面渲染。

      这2点需要事先梳理好，和开发确认后测试。可通过chrome开发工具看是否有发送请求。

 

      3、对于输入框，不同手机上的适配需要特别关注。

          功能测试的关注点：测试输入内容为空，仅空格时是否能发送，特殊字符是否转义，js是否会执行，黑词是否过滤， 输入内容超长度限制时如何处理。是否能输入html标签，输入后是否会影响布局。

     4、对于异常流，网络不通，请求超时，降级等情况下的处理，友好提示等。

     5、登录状态下session失效的问题，测试时可新开一个tab页，退出登录，以模拟session失效的情况。

           测试一些必须在登录情况下才能做的操作，在操作前是否有判断用户登录状态，失效后跳去登录页。

     6、登录操作成功后，返回链接问题。 是否要跳到之前操作的页面。