用JavaScript完成页面自动操作

　　在之前的一篇《JavaScript实现按键精灵》中曾记录了几个事件对象，本文将会对它们进行一次实战，要完成的动作包括滚动、点击和翻页。

一、滚动

　　滚动是通过修改容器元素的scrollTop属性实现的，期间会进行一系列的计算，而每次滚动都会包含一个个小的偏移动作，为了让这些动作能有序进行，自定义了一个Promise，如下所示。

/**
 * 简易Promise
 */
var Promise = {
  fns: [],
  then: function(fn) {
    this.fns.push(fn);
    return this;
  },
  resolve: function() {
    if (this.fns.length == 0) return;
    var fn = this.fns.splice(0, 1);
    fn[0] && fn[0].call(this);
  }
};

　　为了让滚动表现的更加顺滑，采用了requestAnimationFrame()方法，滚动的方向分为三种，分别是向上、向下或待机，如下所示。

/**
 * 随机整数
 */
var Util = {
  random: function(max) {
    return Math.floor(Math.random() * max);
  }
};
/**
 * 随机滚动
 * container 容器元素
 */
function scrollTopBottom(container) {
  var num = Util.random(10);
  for (var i = 0; i < num; i++) {
    (function(count) {
      Promise.then(function() {
        var direction,      //滚动方向
          destination,      //滚动的目标位置
          current,          //当前滚动距离
          slide = 0;        //滚动距离
        destination = Util.random(2000);    
        current = container.scrollTop;        
        direction = Util.random(3);
        (function moveInner() {
          switch (direction) {
            case 0:             //向上滚动
              current += 10;
              break;
            case 1:             //向下滚动
              current -= 10;
              if (current < 0) current = 0;
              break;
            default:            //保持原地
              break;
          }
          slide += 10;          //执行滚动
          console.log(count, slide, current, destination);
          container.scrollTop = current;
          if (slide <= destination && current > 0) {
            window.requestAnimationFrame(moveInner);    //顺滑的滚动
          } else {
            Promise.resolve();                          //执行下一个动作
          }
        })();
      });
    })(i);
  }
  Promise.resolve();        //开始滚动
}

　　滚动的容器元素多变，可能是body，也可能是根元素或者是其它元素，具体得视页面而定，示例页面采用的是根元素，如下所示。

/**
 * document.documentElement
 * document.body
 */
scrollTopBottom(document.documentElement);

　　等到的效果如下图所示。

　　虽然完成了自动滚动，但当前的代码无法精度控制，例如难以配置成第几秒向上或向下滚动，或者指定滚动到真实用户会停留的位置的时间。

二、点击

　　在触发点击事件时，需要指定一些元素。目前的坐标是随机生成的，每次会遍历元素，当坐标在元素范围内时，才派发事件，完成点击，如下所示。MouseEvent中的clientX、pageX等属性可参考《触屏touch事件记录》中的记录。

/**
 * 点击
 */
function click() {
  var links = document.querySelectorAll("img"),     //指定要触发的元素
    x = Util.random(window.outerWidth),             //随机X坐标
    y = Util.random(document.body.scrollHeight),    //随机Y坐标
    clientY = y > window.outerHeight ? (y - window.outerHeight) : y;
  var event = new MouseEvent("click", {
    bubbles: true,       //能够冒泡
    cancelable: true,    //可以取消事件
    view: window,        //窗口
    clientX: x,
    clientY: clientY,    //相对于视口的垂直偏移
    pageX: x,
    pageY: y             //包含垂直滚动的偏移
  });
  [].forEach.call(links, function(value, key) {
    var rect = value.getBoundingClientRect();
    //判断当前坐标是否在元素范围内
    if(x >= rect.left && x<=rect.right && y>=rect.top && y<=rect.bottom) {
      console.log(x, y);
      value.dispatchEvent(event);        //派发事件
    }
  });
}
function runClick() {
  for (var j = 0; j < 50; j++) {
    (function(j) {
      setTimeout(function() {
        click();         //随意点击页面
      }, 2000 * j);      //不集中在一个时间执行
    })(j);
  }
}

　　虽然完成了自动点击，但还不够灵活。当要触发的动作不是由指定的元素触发的时，这段脚本就起不了作用，并且手机屏幕尺寸众多，难以精确的在某一指定区域内点击。

　　由于很依赖事件类型，因此当绑定的动作不在该事件中时，代码也会失效。如果要触发页面监测的请求，那么不得不先去翻源码，搜寻触发事件。

三、翻页

　　现在很多活动页面都是以全屏翻页的形式出现，通过touchstart、touchmove和touchend三个事件，就能模拟出手指滑动的效果，方向既可以是从下到上，也可以是从右往左，下面的代码采用了前者。使用柯里化的方式减少了touch()函数的参数，TouchEvent中的touches和targetTouches参数，也可以参考《触屏touch事件记录》中的记录。

/**
 * 竖屏翻页
 */
var identifier = 0,
  eventType = ["touchstart", "touchmove", "touchend"];
function slide(container) {
  var x = Util.random(window.outerWidth),
    y = 300,
    currying = touch(container, x, y);
  currying(eventType[0]);
  currying(eventType[1]);
  currying(eventType[2]);
}
function touch(container, x, y) {
  var interval = 100;                 //滑动距离
  return function(type) {
    identifier++;
    if (type == eventType[1]) {       //touchmove事件更改Y坐标
      y -= interval;
    }
    var t = new Touch({
      identifier: identifier,
      target: container,
      clientX: x,
      clientY: y,
      pageX: x,
      pageY: y
    });
    console.log(`${identifier}, ${type} x: ${x}, y: ${y}`);
    var event = new TouchEvent(type, {
      touches: [t],
      targetTouches: [t]
    });
    container.dispatchEvent(event);
  };
}
/**
 * 假设滑动插件是swiper.js
 * 那么取其容器作为slide()的参数传入
 */
setInterval(function() {
  slide(document.querySelector(".swiper-container"));
}, 2000);

　　得到的效果如下图所示。

　　

　　示例中使用的是swiper触屏滑动插件，当换成其他插件时，容器就需要跟着改变。

　　上述所有自动化操作都是基于DOM结构完成的，水能载舟亦能覆舟，无法跳出DOM的限制，就会导致一系列的问题，例如针对不同页面的结构要做单独的分析、动作精度难以控制、真实的用户轨迹难以模拟、代码不够灵活难以复用。

　　在实际情况中，还有很多复杂的动作（例如答题、填表单等），光靠上述这点代码是远远不够的，目前还做不到像按键精灵那样在屏幕上录制行为，这么简洁。

 

demo代码已上传至GitHub：

https://github.com/pwstrick/auto