用JavaScript完成页面自动操作

2019/04/10 10:10
阅读数 12

  在之前的一篇《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

 

原文出处:https://www.cnblogs.com/strick/p/12149173.html

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部