【本文相关内容参考自金智维公司论坛文章,如有侵权,请联系删除】
1.JavaScript概述
1.1 JavaScript简介
1.2 JavaScript特征
1.3 JavaScript教程
2. JavaScript应用
2.1.标签查找
2.2元素赋值
2.3 触发事件
2.4 保存图片
2.5 异步处理
1. JavaScript概述
1.1 JavaScript简介
JavaScript是一种由Web浏览器解释的脚本编程语言(以下简称
JS),它支持Web应用程序中的动态内容和交互。随着前端框架的使用越来越多,前端web开发呈现多元化趋势,对于RPA开发者的开发难度也在不断增加,原有的点击、读取、赋值、下载等操作无法实现,JS作为RPA技术中重要一环则可以解决这些疑难杂症。
1.2 JavaScript特征
- JavaScript 是一种轻量级的编程语言
- JavaScript 是可插入 HTML 页面的编程代码
- JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行
1.3 JavaScript教程
JavaScript编程语言的教程网站数不胜数,本文不在赘述JavaScript教程,可通过百度自行学习。
2. JavaScript应用
2.1.标签查找
JS获取DOM元素的常用方法
- 通过ID获取(getElementById)
- 通过name属性(getElementsByName)
- 通过标签名(getElementsByTagName)
- 通过类名(getElementsByClassName)
- 通过选择器获取一个元素(querySelector)
- 通过选择器获取一组元素(querySelectorAll)
- 通过ID获取(getElementById)
document.getElementById('id')
返回值只获取到一个元素,没有找到返回null。 - 通过name属性(getElementsByName)
document.getElementsByName('name')
返回值是一个类数组,没有找到返回空数组。 - 通过标签名(getElementsByTagName)
document.getElementsByTagName('div')
返回值是一个类数组,没有找到返回空数组。 - 通过类名(getElementsByClassName)
document.getElementsByClassName('class')
返回值是一个类数组,没有找到返回空数组。 - 通过选择器获取一个元素(querySelector)
document.querySelector('.class')
返回值是满足CSS选择器的第一个元素。 - 通过选择器获取一组元素(querySelectorAll)
document.querySelectorAll('.class')
返回值是一个类数组,是满足CSS选择器的所有元素。
延申:JQuery
jQuery是一个JavaScript库,一个轻量级的"写的少,做的多"的JavaScript库。jQuery的语法较为简单$(selector).action(),美元符号定义jQuery,选择符(selector)"查询"和"查找"
HTML 元素,action() 执行对元素的操作。
2.2元素赋值
2.2.1.文本赋值
一般HTML控件 :
取值(获取元素文本或Value):
Var html= document.getElementById("kw").innerHTML;
Var text = document.getElementById("kw").innerText;
Var value = document.getElementById("kw").value;
赋值(设置文本内容或value属性):
document.getElementById("kw").innerHTML = "金智维";
document.getElementById("kw").innerText = "金智维";
document.getElementById("kw").value = "金智维";
日期控件:
datebox控件:$('#ID').datebox('setValue', new Date());
datepicker控件:$("#ID ").datepicker('setDate', new Date());
通用写法:$("#ID").val(datastr)
注意 :部分元素设置值后不生效,还需触发特定事件伴随使用。
2.2.2属性修改
- 获取元素属性
语法:element.getAttribute('属性名');
例子:element.getAttribute('name');
- 设置元素属性
语法:element.setAttribute('属性','属性值');
例子:element.setAttribute('value','金智维');
- 删除元素属性
语法:element.removeAttribute('属性名');
例子:element.removeAttribute('disabled');
- 获取CSS样式
方法一:
语法:element.style.样式名;
例子:element.style.backgroundColor
方法二:
语法:element.style.getPropertyValue('样式名');
例子:element.style.getPropertyValue('backgroundColor ')
- 设置CSS样式
方法一:
语法:element.style.样式名;
例子:element.style.backgroundColor='red';
方法二:
语法:element.style.setProperty('样式名', '样式值');
例子:element.style.setProperty('background-color','red');
- 清除CSS样式
方法一:
语法:element.style=''或 element.style=null;
例子:element.style=''或 element.style=null;
方法二:
语法:element.style.removeProperty('样式名');
例子:element.style.removeProperty('height');
2.3 触发事件
事件的本质是程序各个组成部分之间的一种通信方式,也是异步编程的一种实现。
2.3.1事件触发
2.3.1.1 click与onclick
click 是方法;onclick是事件;执行click就是模拟鼠标点击,同时会触发onclick事件。
document.getElementById("target").onclick();
document.getElementById("target").click();
解析:
btnObj.click()是真正地用程序去点击按钮,触发了按钮的onclick()事件。
btnObj.onclick()只是简单地调用了btnObj的onclick所指向的方法,只是调用方法而已,并未触发事件。
2.3.1.2 事件触发方法
除上述例子中直接触发方法或者事件外,还有如下集中常用方法。
1) JQuery trigger()/triggerHandler()方法
trigger() 方法不会引起事件(比如表单提交)的默认行为
trigger() 会操作 jQuery 对象匹配的所有元素,而 triggerHandler()
只影响第一个匹配元素。
示例:
$("input").trigger("select");
$( "input" ).triggerHandler( "focus" );
2) JS主动触发事件
在某些情况下当使用委托给一个元素添加事件时,如果事件是委托到 document 或
body上,此时事件会失效,例如某些input框RPA在输入文本值后点击提交按钮输入内容被清空,此时需要给input按钮初始化;某些按钮直接触发事件不生效,也可采用此主动触发事件方式**。**
1.document.createEvent(eventType)
参数:eventType 共5种类型
eventType | 包含事件 |
Events | 包括所有的事件 |
HTMLEvents | abort, blur, change, error, focus, load, reset, resize, scroll,select, submit, unload |
UIEevents | DOMActivate, DOMFocusIn, DOMFocusOut, keydown, keypress, keyup |
MouseEvents | click, mousedown, mousemove, mouseout, mouseover, mouseup |
MutationEvents | DOMAttrModified, DOMNodeInserted, DOMNodeRemoved, DOMCharacterDataModified, DOMNodeInsertedIntoDocument, DOMNodeRemovedFromDocument, DOMSubtreeModified |
2.在createEvent后必须初始化
- 通用 Events 和 HTMLEvents
Event.initEvent('type', bubbles, cancelable)
- UIEvents
Event.initUIEvent('type',bubbles,cancelable,windowObject,detail)
- MouseEvents
Event.initMouseEvent('type',bubbles,cancelable,windowObject,detail, screenX, screenY, clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget)
- MutationEvents
Event.initMutationEvent('type',bubbles,cancelable,relatedNode,prevValue,newValue,attrName,attrChange)
3.在目标元素上触发事件
targetElement.dispatchEvent(event)
需要注意的是在IE 5.5+版本上请用fireEvent方法
Demo1: 使用通用类型创建 click 事件
const event = document.createEvent('Events');
event.initEvent( 'click', false, false );
const targetElement = document.getElementById('someID');
targetElement.dispatchEvent(event);
Demo2: 重置元素 input 事件
对于Input框输入内容被清空情况,可以在RPA设置Input值后,执行如下代码:
var event = document.createEvent('HTMLEvents');
event.initEvent( 'input', false, false );
document.getElementById('UserName').dispatchEvent(event);
2.3.2 常见事件类型
DOM 支持大量的事件,常见自动化操作所需事件大致分为如下几类。
1. 鼠标事件
- 点击事件
鼠标点击相关的有四个事件,常用于网页菜单的RPA操作。
click:按下鼠标(通常是按下主按钮)时触发。
dblclick:在同一个元素上双击鼠标时触发。
mousedown:按下鼠标键时触发。
mouseup:释放按下的鼠标键时触发。
- 移动事件
鼠标移动相关的有五个事件。
mousemove:当鼠标在一个节点内部移动时触发。当鼠标持续移动时,该事件会连续触发。
mouseenter:鼠标进入一个节点时触发,进入子节点不会触发这个事件。
mouseover:鼠标进入一个节点时触发,进入子节点会再一次触发这个事件。
mouseout:鼠标离开一个节点时触发,离开父节点也会触发这个事件。
mouseleave:鼠标离开一个节点时触发,离开父节点不会触发这个事件。
2. 键盘事件
键盘事件由用户击打键盘触发,主要有keydown、keypress、keyup三个事件。
keydown:按下键盘时触发。
keypress:按下有值的键时触发,即按下 Ctrl、Alt、Shift、Meta
这样无值的键,这个事件不会触发。对于有值的键,按下时先触发keydown事件,再触发这个事件。
keyup:松开键盘时触发该事件。
3. 表单事件
- select 事件
select事件当在 <input>
、<textarea>
里面选中文本时触发。RPA在操作网页时有时候会碰到设置属性值或文本值不生效,此时需要配合触发select事件来解决不生效问题。
例子:触发select事件
document.getElementById("province").dispatchEvent('onselect')
- change 事件
change事件当 <input>
、<select>
、<textarea>
的值发生变化时触发。它与input事件的最大不同,就是不会连续触发,只有当全部修改完成时才会触发,与select事件一样,触发change事件也是用来解决设值不生效问题的常用方法。
例子:触发change事件
document.getElementById("province").dispatchEvent('onchange')
4. 焦点事件
焦点事件发生在元素节点和document对象上面,与获得或失去焦点相关。它主要包括以下四个事件。
focus:元素节点获得焦点后触发。
blur:元素节点失去焦点后触发。
focusin:元素节点将要获得焦点时触发,发生在focus事件之前。该事件会冒泡。
focusout:元素节点将要失去焦点时触发,发生在blur事件之前。该事件会冒泡。
2.4 保存图片
通过JS保存网页中canvas图片。
如图所示,验证码图片为canvas画布类型,一些情况下使用向导函数“截取屏幕截图”下载的图片为刷新后的图片,与当前显示图片不一致,针对这种情况可以采用JS技术将网页图片下载到本地的方法。
JS代码:
function getCanvasBase64(){
var canvas = document.createElement("canvas");
var image = document.querySelector("#image > img");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas.toDataURL();
}
配合RPA向导脚本使用方法如图:
其他图片下载方法参考
除上述方法,也有其他同事写的下载方法,链接如下:
[]: 欢迎您
[]: 帖子详情
2.5 异步处理
在RPA操作网页时我们经常会碰到一种情况,执行点击事件后RPA线程卡在点击这行脚本不在继续执行后续脚本(如下图),造成这种情况原因为我们我们是单线程执行,在本行语句中脚本并未执行完毕,因为后续动作未执行完,例如本案例中弹出了一个窗口,导致了线程阻塞,为解决这种问题,我们可以依赖向导脚本的异步处理或JS脚本的异步处理方式。
JS中setTimeout方法
setTimeout()是属于 window 的 method, 但我们都是略去 window 这顶层物件名称,
这是用来设定一个时间, 时间到了, 就会执行一个指定的
method。JS是一个单线程序的解释器 ,一段时间内只能执行一段代码,因此就有了一个JS任务队列,这些任务会被按照它们添加到队列的顺序执行。可是浏览器却可以是多线程的 ,js引擎只是浏览器的一个线程而已.定时器计时,网络请求,浏览器渲染等等。
函数使用:setTimeout(code,millisec,lang)
参数 | 描述 |
---|---|
code | 必需。要调用的函数后要执行的 JavaScript 代码串。 |
millisec | 必需。在执行代码前需等待的毫秒数。 |
lang | 可选。脚本语言可以是:JScript |
函数应用 【setTimeout('document.getElementById("kw").click()', 1000)】
执行结果