录制浏览器请求生成RobotFramework代码

2021-09-12 约 1141 字预计阅读 3 分钟

我们组的自动化测试用的是RobotFramework。在编写自动化测试时，大部分工作集中于一个页面，页面上有若干报表，我们需要使用特定数据源创建特定报表，然后抓取报表数据网络请求的request和response，手动写入RobotFramework中。

这其中，

创建报表的步骤没法省
手动抓包效率低
抓到的数据需要二次整理
还需要手动写成RobotFramework代码

因此，我做了一个简单的chrome插件工具，直接在页面中hook请求，拿到请求内容和响应内容，然后自动生成能直接运行的RobotFramework代码，生成的文件可以直接粘贴到项目中git push。

一、整体方案

flowchart TD A[页面加载] --> B[Hook XMLHttpRequest] B --> C[记录请求（URL / 参数）] C --> D[记录响应] D --> E[格式化数据] E --> F[生成 RobotFramework 用例]

二、核心实现

为什么用hook XMLHttpRequest的方案？我还调研了直接使用chrome插件hook请求的能力，但存在一定的限制，人家本来是设计出来用来做拦截请求、修改header等功能的。直接操作XMLHttpRequest的话能做的事情更灵活。更重要的是chrome的api不支持获取响应结果，可以理解，为了安全嘛。之前调研时候做过一版chrome api的方案，因为不支持获取响应结果，但我们这个页面请求刚好是幂等的，所以可以拿到request后自动再重放一次，就可以拿到response了。但是还是hook XMLHttpRequest的方案比较好。

核心代码：

        
        
        
    
(function() {
  // 保存原始的 XMLHttpRequest 对象
  var originalXMLHttpRequest = window.XMLHttpRequest;

  // 代理 XHR
  function ProxyXMLHttpRequest() {
    var xhr = new originalXMLHttpRequest();

    // 存储请求信息
    xhr._requestMethod = '';
    xhr._requestUrl = '';
    xhr._requestBody = '';

    // 记录原始方法
    xhr._originalOpen = xhr.open;
    xhr._originalSend = xhr.send;

    // 重写open
    xhr.open = function(method, url, async, user, password) {
      xhr._requestMethod = method;
      xhr._requestUrl = url;
      xhr._originalOpen(method, url, async, user, password);
    };

    // 重写send
    xhr.send = function(data) {
      xhr._requestBody = data || '';
      xhr._originalSend(data);
    };

    // 监听请求完成，捕获响应内容
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        console.log('======================================');
        console.log('请求方法：', xhr._requestMethod);
        console.log('请求URL：', xhr._requestUrl);
        console.log('请求体：', xhr._requestBody);
        console.log('响应内容：', xhr.responseText);
        console.log('======================================\n');
      }
    };

    return xhr;
  }

  // 替换全局XHR
  window.XMLHttpRequest = ProxyXMLHttpRequest;
})();

拿到的这些信息整理一下，直接生成小组代码格式的RobotFramework代码，可以直接运行。

这个方案不再需要人工f12复制请求内容，且自动生成可执行代码，成本极低，极大降低心智负担，大大提高这个场景的自动化测试编写速度，只需要把心智放到报表的构造上即可。构造完报表后，比如在这个页面上进行10次操作(筛选、格式、改变位置等等)，原本需要人工看10次请求，每次去复制请求内容再粘贴，现在只需要人归人操作，操作完直接导出10次请求的代码。

这次研究这种hook的思路还是挺有启发，以后也许可以用来做更多事情。

目录

录制浏览器请求生成RobotFramework代码

一、整体方案

二、核心实现