RPA中js的相关使用

【本文相关内容参考自金智维公司论坛文章，如有侵权，请联系删除】

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）

1. 通过ID获取（getElementById）
   document.getElementById('id')
   返回值只获取到一个元素，没有找到返回null。
2. 通过name属性（getElementsByName）
   document.getElementsByName('name')
   返回值是一个类数组，没有找到返回空数组。
3. 通过标签名（getElementsByTagName）
   document.getElementsByTagName('div')
   返回值是一个类数组，没有找到返回空数组。
4. 通过类名（getElementsByClassName）
   document.getElementsByClassName('class')
   返回值是一个类数组，没有找到返回空数组。
5. 通过选择器获取一个元素（querySelector）
   document.querySelector('.class')
   返回值是满足CSS选择器的第一个元素。
6. 通过选择器获取一组元素（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)】

---

执行结果