注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

网易杭州 QA Team

务实 专注 分享 做有态度的QA

 
 
 
 
 

日志

 
 

如何用JS脚本协助web网页测试  

来自马威Max   2016-06-14 19:34:41|  分类: 默认分类 |举报 |字号 订阅

  下载LOFTER 我的照片书  |

场景1

某QA:李师傅!你的代码有问题,这个账号切换XX失败,弹出异常了!
李师傅:把帐号和密码发给我,我看看
某QA盯着塞得满满当当的chrome标签页,表示臣妾做不到啊!我切了好多个帐号啊!
如何用JS脚本协助web网页测试 - 网易杭州QA - 网易杭州 QA Team
  
如何用JS脚本协助web网页测试 - 网易杭州QA - 网易杭州 QA Team
 
   

解决方法

或许你还不知道有一种脚本称作用户脚本tampermonkey:Google Chrome中最流行的一款脚本管理插件。 它的API完全兼容“油猴子脚本”,它还加入更多的Chrome 本身不支持的用户脚本功能,比如GM_registerMenuCommand 和GM_xmlhttpRequest这两个函数.

For those of you who don’t know, userscripts are small snippets of JavaScript code that change the behaviour of a website. Google Chrome (my browser of choice) supports userscripts out of the box, however, to make the whole process of writing and testing one a little more comfortable, the first thing I did, was to install Tampermonkey.

这是用户通过个人定制的方式实现网站页面的自定义化,首先在chrome上需要安转插件TamperMoneky,安装成功后chrome上方显示icon如下图:

image

新建userscript,新开一个窗口页面

image

每个注释标签的解释如下:

// ==UserScript==
// @name    K12 UserInfoShow            //脚本名称
// @author    Max                         //作者姓名
// @version    2.1                         //脚本版本
// @description K12实现用户信息展示          //功能描述
// @match     *://100.163.com/*          //匹配的目标网站
// @include    *.163.com/*                 //允许访问的url(可多个)
// @run-at    document-start              //脚本在docunment开始加载就开始运行
// @require http://code.jquery.com/jquery-latest.js //脚本开始运行之前载入jquery
// ==/UserScript==de>

通过我们网页的Ctrl+U可以查看网页源码,并发现网页的源码其实已经注入了用户的相关数据和全部变量,用户的id、昵称和登录网易通行证其实都已经作为webUser这个全局变量注入在每一个页面当中

2016年06月14日 - 网易杭州QA - 网易杭州 QA Team
 

 

通过chrome的开发者工具查,全局变量放在<SCRIPT>标签中

那我们通过tampermonkey可以对这些存在于网页前端代码<SCRIPT>中的用户信息进行检索并快速展示给使用用户(QA或者是开发同学),通过写入以下js代码

  1. window.addEventListener('load'function() { 
  2.     // string --> script 
  3.     if(document.getElementsByTagName("script")[0].innerText == ""){ 
  4.         eval( document.getElementsByTagName("script")[1].innerText ); 
  5.     }else
  6.          eval( document.getElementsByTagName("script")[0].innerText ); 
  7.     } 
  8.  
  9.     console.log('webUser'window.webUser); 
  10.     if(!window.webUser){ 
  11.         return
  12.     } 
  13.     var loginName = window.webUser.loginId; 
  14.     var userId = window.webUser.id; 
  15.     console.log(loginName); 
  16.     var content = "邮箱: " + loginName + "  用户ID: " + userId; 
  17.     var ele = document.getElementsByClassName("nickName f-fs24")[0]; 
  18.     //var name = ele.innerText(); 
  19.     var link = $("<div>").append( 
  20.         $("<span>").attr("class""f-fs16").css({"border":"1px solid #a5c4e2"
  21.                                                 "padding":"5px 15px"
  22.                                                "box-sizing""border-box"
  23.                                                 "border-radius" : "16px"}).html(content) 
  24.     ); 
  25.     $('.nickName').append(link); 
  26.     var a = document.getElementsByClassName("u-sq_opr"); 
  27.     console.log(a); 
  28.  
  29.  
  30. }, false);

这里需要说明下eval()这个js函数,通过docuemt.getElementsByTagName('script')获取所有的全局变量,eval()执行其中的的JavaScript代码,变相获取了当前网页的全局变量,至于为什么执行该脚本时不能直接获取到目标页面的全局变量呢?stackoverflow是这么回答的

Both Chrome userscripts/content-scripts and Greasemonkey scripts are isolated from the page's javascript. This is done to help keep you from being hacked, but it also reduces conflicts and unexpected side-effects. 用户脚本和页面的js脚本是独立的,是为了保护页面的安全性(恶意修改),同时减少了冲突和意想不到的负面影响

所以直接tampermonkey的用户脚本无法直接引用原页面的js(为了网页的安全性),只能通过获取<script>的字符串内容,再通过eval()转换成用户脚本的js内容

通过获取到的webUser对象的用户信息再整合一个新的元素插入到用户的页面当中(适当加入css美化一下,以配对当前页面的css风格),效果图如下:

 如何用JS脚本协助web网页测试 - 网易杭州QA - 网易杭州 QA Team

这样在首页的用户信息下就可以直接展示用户的邮箱和id,就省去点击进入用户账号设置查看的步骤。

思考


其实userscript脚本在很多方面都可以继续延展思路,不仅从测试思维,也可以从开发思维去引用实践,GreaseFork论坛中提供了相当多的用户脚本,结合chrome的tampermonkey插件一起使用,可以极大的提高生产率和自定义化网页提供便捷。

  评论这张
 
阅读(407)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016