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

xiluoenm 2013-05-16

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

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

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

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

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

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


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

当第二次请求,刷新浏览器页面时,先check app cache ,发现文件没有变更,则不去下载资源文件,从缓存中直接读取。
html5 webapp 测试关注点和技巧,借助chrome开发者工具测试

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


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


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

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

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

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

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

       
html5 webapp 测试关注点和技巧,借助chrome开发者工具测试
 
 清空chrome中appcache,可以通过在浏览器中输入:chrome://appcache-internals/

点击Remove,即可删除appcache.
html5 webapp 测试关注点和技巧,借助chrome开发者工具测试

三、其它测试点:

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

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

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

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

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

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

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

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

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

      

      

       


 

相关推荐