本网站(662p.com)打包出售,且带程序代码数据,662p.com域名,程序内核采用TP框架开发,需要联系扣扣:2360248666 /wx:lianweikj
精品域名一口价出售:1y1m.com(350元) ,6b7b.com(400元) , 5k5j.com(380元) , yayj.com(1800元), jiongzhun.com(1000元) , niuzen.com(2800元) , zennei.com(5000元)
需要联系扣扣:2360248666 /wx:lianweikj
用JavaScript完成页面自动操作
吴振华 · 434浏览 · 发布于2020-02-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);

  等到的效果如下图所示。

3597041-79332428df80a80b.png

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

二、点击

  在触发点击事件时,需要指定一些元素。目前的坐标是随机生成的,每次会遍历元素,当坐标在元素范围内时,才派发事件,完成点击,如下所示。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

相关推荐

RN开发环境的npm私库本地debug调试

manongba · 688浏览 · 2019-05-09 17:03:46
你不知道的浏览器渲染原理

追忆似水年华 · 1362浏览 · 2019-05-09 22:47:56
基于iview的router常用控制方式

追忆似水年华 · 980浏览 · 2019-06-03 10:39:21
编程小知识之 JavaScript 文件读取

manongba · 708浏览 · 2019-06-10 09:16:16
10个省时间的 PyCharm 技巧 赶快收藏!

· 691浏览 · 2019-06-10 09:32:01
加载中

0评论

评论
坐标是江苏.南京,行业是互联网,技术是PHP和java,还有熟悉前后端等。
分类专栏
小鸟云服务器
扫码进入手机网页