前言

操作UI页面的元素，总是会不时的报出各种异常，例如今天我执行自动化脚本时，从下拉列表中选择其中某一项，就报了一个元素不可交互的错误Element not interactable ： has no size and location，这种一般是元素在页面被隐藏，我加了延时和采用了鼠标去focus(RF里有个关键字叫mouse over也就是selenium的move_to_element),但都没有解决这个问题，这个时候我一般会用js去执行。

RF执行js脚本

js中的元素定位，像通过id,name等，在实际项目中，太理想了，一般通过这种方法都基本定位不到，我们往往会采用更复杂的方式去定位才能找到，例如xpath和css

RF执行JS脚本_javascript

RF怎么执行js

RF的第三方库SeleniumLibrary有一个关键字叫[Execute Javascript], 它可以执行js脚本，这个脚本可以是几行js 代码，也可以是js文件。例如：

RF执行JS脚本_javascript_02

通过xpath

使用Document.evaluate()这个函数，这个函数接收xpath表达式，返回元素对象，然后就可以对这个对象进行点击等操作， 语法格式如下

var xpathResult = document.evaluate(
xpathExpression,
contextNode,
namespaceResolver,
resultType,
result
);

RF中举例说明，RF代码，我把SeleniumLibrary自带的关键字又重新封装成了自己的用户关键字，给了一个参数是xpath的定位符，定位到之后，对这个元素进行点击操作

ExectureJSClick
    [Arguments]    ${locator}
    execute javascript    document.evaluate('${locator}', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null).snapshotItem(0).click()

执行css

举例1，我通过document.getElementsByClassName()方法，来操作页面内部的滚动条，RF代码，我封装了一个通用操作页面滚动条的用户关键字

CommonScrollHandle
    [Documentation]   操作页面内部滚动条
    [Arguments]    ${ele_class_locator}   ${scroll_number}

    execute javascript    document.getElementsByClassName('${ele_class_locator}')[0].scrollTop=${scroll_number}
    sleep  3

举例2，我通过querySelector()方法，这个接收css语法规则的表达式，例子1中的只能接收class属性的value，

（1）从下拉列表中选择一个元素进行点击，这个元素是全局唯一的

Execute Javascript   document.querySelector("li[value='US']").click()

（2）从下拉列表中选择一个元素进行点击，这个元素不是全局唯一的，那我使用querySelectorAll()方法

${js_code}  set variable    var eles=document.querySelectorAll("li[value='AF']");eles[2].click()
 Execute Javascript   ${js_code}

结语

还有一个小技巧，在RF中使用js时，如果不确定自己写的对不对时，可以打开浏览器的开发者工具，在console里进行简单验证

RF执行JS脚本_JavaScript_03