爬虫界的福利--touchRobot，机器模拟触碰滑动库（已开源）

此插件能干什么？

一句话概括：通过程序主动触发移动端滑动、拖拽、触碰等操作

插件有什么用呢？

可以用于爬虫，也可以用于自动化测试以及程序演示

插件演示地址 （从网上扒了一个canvas绘图的demo，引入touchRobot,通过程序绘图）

注意，请在手机模式查看所有演示地址，插件仅支持移动端

拿常见的滑动相关demo举例,程序触发动端滑动

jQuery-slide滑块验证码

操作步骤

step1
    将代码在控制台粘贴执行
step2
    var robot = new touchRobot(document.querySelector('#btn'));
    robot.touchTo(0,0,400,0);

swiper轮播

操作步骤

step1
    将代码在控制台粘贴执行
step2
    var robot = new touchRobot(document.querySelector('.swiper-container'))
    robot.touchLeft()

如何使用？

插件支持脚本嵌入，也支持npm安装

脚本嵌入

!function(t){var e={};function o(i){if(e[i])return e[i].exports;var n=e[i]={i:i,l:!1,exports:{}};return t[i].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.m=t,o.c=e,o.d=function(t,e,i){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(o.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)o.d(i,n,function(e){return t[e]}.bind(null,n));return i},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="",o(o.s=0)}([function(t,e,o){var i;!function(n,h){"use strict";var r={sign:["118.7734375 88.3515625","122.46875 84.65234375","125.6484375 81.46875","128.23828125 79.421875","131.875 76.84375","135.1640625 74.83984375","137.7265625 73.42578125","139.2578125 72.765625","140.5625 72.5625","141.375 72.5625","141.95703125 72.5625","142.34375 72.71484375","142.8671875 73.23828125","143.4375 74.1875","143.83984375 75.4921875","144.05859375 77.1328125","144.27734375 78.7734375","144.27734375 80.078125","144.37109375 81.12109375","144.71875 81.81640625","145.1328125 82.23046875","145.828125 82.4921875","146.98828125 82.4921875","148.29296875 82.1875","151.20703125 81.2578125","154.640625 79.82421875","158.51171875 78.03515625","161.29296875 76.70703125","166.3515625 74.00390625","170.66015625 72","173.65625 70.6328125","176.34765625 69.734375","177.27734375 69.640625","177.3515625 69.640625","177.42578125 69.94921875","177.42578125 71.921875","177.42578125 75.19140625","177.29296875 78.23828125","177.29296875 82.18359375","177.29296875 86.12890625","177.29296875 88.6015625","177.29296875 91.2421875","177.29296875 93.21484375","177.38671875 94.2578125","177.38671875 94.83984375","177.4609375 94.9921875","177.53515625 94.9921875","177.765625 94.8359375","178.6015625 94.27734375","180.54296875 92.9375","183.4765625 90.9765625","186.06640625 88.79296875","189.76171875 85.86328125","193.71484375 82.0703125","196.54296875 78.94140625","200.29296875 75.65625","203.625 72.625","205.94140625 70.16796875","207.0703125 68.6953125","207.625 67.94921875","207.85546875 67.79296875","208.0078125 67.79296875","208.16015625 67.79296875","208.91796875 68.55078125","209.79296875 69.97265625","210.76171875 72.15625","211.59375 74.17578125","212.22265625 75.54296875","213.01171875 77.234375","214.02734375 78.8125","215.01171875 80.234375","215.6875 81.19921875","216.4921875 82.3046875","217.6484375 83.25","219.2265625 84.265625","222.140625 85.19140625","225.41015625 85.87109375","227.71484375 86.11328125","230.1875 86.11328125","231.9921875 85.66015625","234.5078125 84.52734375","238.3046875 83.2109375","246.12109375 80.08203125","255.6640625 76.6875","261.0625 74.66015625","264.859375 73.1953125","266.55078125 72.515625","267.1328125 72.265625","267.44140625 72.109375","267.59375 72.109375","267.59375 71.953125","267.74609375 72.10546875"],right:["111.421875 357.66796875","119.23046875 356.52734375","133.68359375 354.53515625","151.03125 352.40234375","167.1171875 351.3671875","187.62890625 349.63671875","204.53125 349.109375","230.375 348.15234375","253.5234375 347.546875","267.16015625 347.3046875","284.0625 347.3046875","294.84375 347.3046875","308.07421875 347.3046875","315.2890625 347.3046875","322.2109375 347.125","325.03125 347.125","327.00390625 347.125","328.1640625 347.125","329.20703125 347.125"],left:["265.984375 432.171875","259.65234375 431.46875","248.8671875 430.1484375","237.671875 428.80859375","216.62890625 426.765625","200.1328125 425.71875","175.3984375 424.15625","150.6640625 421.65234375","135.796875 419.890625","117.390625 417.6953125","107.828125 416.8671875","97.85546875 416.4453125","93.00390625 416.2890625","87.85546875 416.2890625","85.03125 416.2890625","82.38671875 416.2890625"],top:["236.35546875 477.328125","238.89453125 469.31640625","241.078125 462.578125","246.55859375 449.12109375","253.87109375 432.59765625","259.8515625 419.390625","270.80859375 397.1640625","284.19140625 373.3359375","299.01171875 348.41015625","311.41796875 330.68359375","329.78125 305.734375","344.3046875 284.89453125","353.30078125 272.04296875","363.17578125 257.62890625","371.234375 245.03515625","375.234375 238.1796875","379.40625 230.4296875","381.59375 226.05078125","382.359375 224.51953125","382.63671875 223.58984375","382.63671875 223.359375","382.63671875 223.28515625"],bottom:["114.1328125 389.38671875","115.85546875 395.25","117.515625 404.8125","119.15234375 417.23046875","120.03125 428.015625","120.5390625 443.2890625","120.5390625 459.78515625","121.0546875 475.875","121.0546875 487.88671875","121.0546875 501.52734375","120.33984375 514.3515625","119.95703125 522.1640625","119.19140625 529.9765625","118.70703125 535.125","118.578125 537.94921875","118.2109375 540.2578125","118.015625 541.421875","118.015625 542.0078125","118.015625 542.2421875","118.015625 542.3984375","117.9375 542.3984375","117.9375 542.4765625"]};function u(t,e,o,i,n,h,r){n=(o-t)/30,h=(i-e)/30;for(var u=[],c=0;c<30;c++){var s=t+n*c;"horizontal"==r&&(s+=n*c/2);var l=e+h*c;"vertical"==r&&(l+=h*c/2),u.push(s+" "+l)}return u}function c(t,e){return Math.floor(Math.random()*(e-t+1)+t)}function s(t){this.touchEle=t}s.prototype._getPos=function(t){var e=this.touchEle.getBoundingClientRect(),o=[];if("left"==t){var i=100,n=200,h=c(e.x+e.width/2,e.x+e.width),s=c(e.y+e.height/5,e.y+e.height-e.height/5),l=c(e.x,e.x+e.width/2),g=c(s-50,s+50);Math.abs(g-s)>i&&(g=s+c(-50,50)),Math.abs(l-h)<n&&(l=h-n),o=u(h,s,l,g,"horizontal")}else if("right"==t){i=100,n=100,h=c(e.x,e.x+e.width/2),s=c(e.y+e.height/5,e.y+e.height-e.height/5),l=c(e.x+e.width/2,e.x+e.width),g=c(s-50,s+50);Math.abs(g-s)>i&&(g=s+c(-50,50)),Math.abs(l-h)<n&&(l=h+n),o=u(h,s,l,g,"horizontal")}else if("top"==t){var a=100,p=100;h=c(e.x,e.x+e.width),s=c(e.y+e.height/2,e.y+e.height-e.height/5),l=c(e.x,e.x+e.width),g=c(e.y,e.y+e.height/2);Math.abs(l-h)>a&&(l=h+c(-50,50)),Math.abs(g-s)<p&&(g=s-p),o=u(h,s,l,g,"vertical")}else if("bottom"==t){a=100,p=100,h=c(e.x,e.x+e.width),s=c(e.y+e.height/5,e.y+e.height/2),l=c(e.x,e.x+e.width),g=c(e.y+e.height/2,e.y+e.height-e.height/5);Math.abs(l-h)>a&&(l=h+c(-50,50)),Math.abs(g-s)<p&&(g=s+p),o=u(h,s,l,g,"vertical")}else o=r[t]||[];return o},s.prototype._touchMoveTo=function(t,e,o){var i=t[e].split(" ")[0],n=t[e].split(" ")[1];this._triggerTouchEvent("touchmove",i,n);var h=this;e<t.length-1?setTimeout(function(){h._touchMoveTo(t,++e,o)},24+e):o&&o()},s.prototype._triggerTouchEvent=function(t,e,o){var i=this.touchEle.getBoundingClientRect(),n=(c(),e||c(i.left,i.left+i.width)),h=o||c(i.top,i.top+i.height),r=new Touch({identifier:Date.now(),target:this.touchEle,clientX:n,clientY:h,pageY:h,pageX:n,radiusX:2.5,radiusY:2.5,rotationAngle:10,force:.5}),u=document.createEvent("UIEvent");u.initEvent(t,!0,!0),u.touches=[r],u.targetTouches=[r],u.changedTouches=[r],this.touchEle.dispatchEvent(u)},s.prototype._mouseMoveTo=function(t,e,o){var i=t[e].split(" ")[0],n=t[e].split(" ")[1];this._triggerMouseEvent("touchmove",i,n);var h=this;e<t.length-1?setTimeout(function(){h._mouseMoveTo(t,++e,o)},20):o&&o()},s.prototype._triggerMouseEvent=function(t,e,o){var i=this.touchEle.getBoundingClientRect(),n=(c(),e||c(i.left,i.left+i.width)),h=o||c(i.top,i.top+i.height),r=new MouseEvent({view:window,bubbles:!0,cancelable:!0,clientX:n,clientY:h});this.touchEle.dispatchEvent(r)},s.prototype.mouse=function(t){var e=r[t]||[],o=e[0].split(" ")[0],i=e[0].split(" ")[1];this._triggerMouseEvent("mouseend",o,i),this._mouseMoveTo(e,0,function(){var t=e[e.length-1].split(" ")[0],o=e[e.length-1].split(" ")[1];this._triggerMouseEvent("mouseend",t,o)})},s.prototype._touch=function(t){var e=this._getPos(t)||[],o=e[0].split(" ")[0],i=e[0].split(" ")[1];this._triggerTouchEvent("touchstart",o,i);var n=this;this._touchMoveTo(e,0,function(){var t=e[e.length-1].split(" ")[0],o=e[e.length-1].split(" ")[1];n._triggerTouchEvent("touchend",t,o)})},s.prototype.touchLeft=function(){return this._touch("left")},s.prototype.touchTop=function(){return this._touch("top")},s.prototype.touchRight=function(){return this._touch("right")},s.prototype.touchBottom=function(){return this._touch("bottom")},s.prototype.touchTo=function(t,e,o,i){var n=u(t,e,o,i,"horizontal"),h=n[0].split(" ")[0],r=n[0].split(" ")[1];this._triggerTouchEvent("touchstart",h,r);var c=this;this._touchMoveTo(n,0,function(){var t=n[n.length-1].split(" ")[0],e=n[n.length-1].split(" ")[1];c._triggerTouchEvent("touchend",t,e)})},s.prototype.mouseTo=function(t,e,o,i){var n=u(t,e,o,i,"horizontal"),h=n[0].split(" ")[0],r=n[0].split(" ")[1];this._triggerMouseEvent("mouseend",h,r);var c=this;this._mouseMoveTo(n,0,function(){var t=n[n.length-1].split(" ")[0],e=n[n.length-1].split(" ")[1];c._triggerMouseEvent("mouseup",t,e)})},s.prototype.touchClick=function(){var t=this.touchEle.getBoundingClientRect(),e=t.x+c(t.width/3,t.width-t.width/3),o=t.y+c(t.height/3,t.height-t.height/3);this._triggerTouchEvent("touchstart",e,o);var i=this;setTimeout(function(){i._triggerTouchEvent("touchend",e,o),i.touchEle.click()},250)},s.prototype.mouseClick=function(){var t=this.touchEle.getBoundingClientRect(),e=t.x+c(t.width/3,t.width-t.width/3),o=t.y+c(t.height/3,t.height-t.height/3);this._triggerMouseEvent("mouseend",e,o);var i=this;setTimeout(function(){i._triggerMouseEvent("mouseup",e,o),i.touchEle.click()},250)},t.exports&&(t.exports=s),void 0===(i=function(){return s}.call(e,o,e,t))||(t.exports=i),n.touchRobot=s}(window,document)}]);

将以上代码放入你的网页中即可

npm方式安装

npm install touch-robot

在代码中引入插件

import touchRobot from 'touch-robot'

使用

var robot = new touchRobot(dom);
robot.touchLeft();

插件API

方法（method）	描述（description）
touchLeft	左滑
touchRight	右滑
touchTop	上滑
touchBottom	下滑
touchTo	定点滑动，参数startX,startY,endX,endY
touchClick	触碰点击
touch	按照给定路径坐标滑动，参数['x1 y1', 'x2 y2', 'x3 y3']

上面介绍了使用方式和API，下面介绍一下实现方式

先卖个关子，你知道有几种方式可以通过程序触发下面button的click事件吗？

<button id="main">按钮</button>
var btn = document.getElementById('main');
btn.addEventListener('click', function(){
    alert('click me')
}, false);
btn.addEventListener('touchstart', function(){
    alert('touch me')
}, false);

估计多数想到的是这样触发

document.getElementById('main').click()

那你还知道其它方式触发button的click事件吗？

what?

var event = document.createEvent('Event');
event.initEvent('click', true, true);
btn.dispatchEvent(event);

上面这种方式同样可以触发click

touch事件怎么主动触发呢？

touch事件比较复杂，不能像click那种直接触发，实现方式相对曲折一点

var x = 100;
var y = 200;
var touch = new Touch({
    identifier: Date.now(),
    target: this.touchEle,
    clientX: x,
    clientY: y,
    pageY: y,
    pageX: x,
    radiusX: 2.5,
    radiusY: 2.5,
    rotationAngle: 10,
    force: 0.5
  });
// 构建TouchEvent
var touchEvent = new TouchEvent('touchstart', {
    cancelable: true,
    bubbles: true,
    touches: [touch],
    targetTouches: [touch],
    changedTouches: [touch]
});

btn.dispatchEvent(touchEvent);

到这其实我的插件实现的几个核心的点已经介绍完毕了

如果你感兴趣可以去我的github去看touchRobot源码，如对你有帮助也欢迎Star，如有问题也欢迎指出