pythonseleniumjs_Pythonselenium中添加JS并执行JS语句

众所周知&＃xff0c;Python通常结合selenium模块来完成一些web的自动化测试以及RPA(Robotic Process Automation)工作。事实上&＃xff0c;Selenium还可以支持插入js语句、执行js语句、返回js语句的执行结果到python程序中。这对于那些已经习惯了Javascript语法的程序员们&＃xff0c;简直是一大神器。

举个简单的例子&＃xff0c;我们用selenium原生的方法对页面的一个input元素执行输入时&＃xff0c;通常需要用到selenium中的send_keys以及clear方法&＃xff0c;

代码类似于&＃xff1a;

driver.find_element_by_xpath(‘//*[&＃64;id&＃61;"dataList"]//input‘).clear()

driver.find_element_by_xpath(‘//*[&＃64;id&＃61;"dataList"]//input‘).send_keys("Your contents")

该方法大多数时候已经足够好用&＃xff0c;但是仔细分析&＃xff0c;send_keys方法主要是模拟的用户键盘操作&＃xff0c;程序执行时必须要保证该元素始终获取焦点&＃xff0c;页面执行过程中尽量不能动页面&＃xff0c;否则send_keys方法可能会失效。而且我们每次send_keys之前需要对input元素已有的text进行清空&＃xff0c;即初始化。笔者推荐使用JS注入selenium的方法来达到更好的效果&＃xff0c;在selenium中写JS语句往往是如下形式&＃xff1a;

js&＃61;"document.getElementsByClassName(‘form-control‘)[0].value&＃61;‘%s‘;"%(requestCode[i][0].value)

driver.execute_script(js)

该方法&＃xff0c;相当于是直接调用页面元素的value方法来进行赋值&＃xff0c;不用考虑变量初始化问题&＃xff0c;它属于网页后台功能&＃xff0c;类似于F12直接在console中执行代码&＃xff0c;不需要光标停留在该input元素上。

使用JS后&＃xff0c;我们就可以使用诸如document.getElementsByClassName、QuerySelector、QuerySelectorAll等JS方法定位元素&＃xff0c;玩儿法大大丰富&＃xff1b;

近日&＃xff0c;笔者在一个具体的项目中&＃xff0c;需要提取页面某表格的某一列值&＃xff0c;该表格虽然最多支持100行来分页&＃xff0c;但是用户可视区域只能显示15行。笔者需要提取该列的每一个值做后续判断。开始的方法是用的原生的selenium写法&＃xff1a;

elements&＃61;driver.find_elements_by_xpath("//tr[contains(&＃64;id,‘datagrid-row-r1-1‘)]")for element1 inelements:

textList1&＃61;element1.textvalue2&＃61;re.search(r"(H\d{13})",textList1)

slaStatus&＃61;re.search(r"(aa|bb|cc)",textList1)

statusList.append(slaStatus.group(1))

value2List.append(value2.group(1))

奇怪的事情发生了&＃xff0c;该elements对象是一个列表&＃xff0c;尽管它超过15个元素&＃xff0c;但是每次遍历过程中&＃xff0c;始终只能读取到前15个元素的text属性&＃xff0c;之后的element元素&＃xff0c;其text始终为空。笔者过程中换用了正则表达式、cssSelector、xpath等多种方法来提取该属性&＃xff0c;总是只能提取到前15个元素的text属性。但是笔者将鼠标悬停在elements中&＃xff0c;可以看到VSCode已经捕获到了所有对应元素的text&＃xff0c;百思不得其解&＃xff1a;

最后&＃xff0c;笔者使用JS注入的方法完美避开了此问题&＃xff0c;达到同样效果。

js&＃61;r"""

var ss&＃61;"";

for(var i&＃61; 1; i

{

ss&＃61;ss&＃43;document.querySelectorAll(‘[field&＃61;"x"]‘)[i].innerText;

ss&＃61;ss.replace(/[\r\n]/g,"")&＃43;"|";

};

return ss;

"""

value2

&＃61;driver.execute_script(js)

value2List&＃61;value2.split("|")

该方法中&＃xff0c;笔者使用document.querySelectorAll方法获取到field属性&＃61;"x"的所有元素的合集&＃xff0c;遍历过程中&＃xff0c;取其innerText并最终借助“|”拼接成字符串。最后在python环境下通过字符串的split方法基于“|”拆分成列表&＃xff0c;相当于编码再解码。笔者之所以这样操作是因为&＃xff0c;如果js语句执行结果返回的是一个数组&＃xff0c;该数组如何与python中的列表直接对接&＃xff1f;

无论如何&＃xff0c;使用JS的方法完美地提取到了页面元素的属性&＃xff0c;达到同样的效果。程序员尤其是新手&＃xff0c;在编程过程中难免遇到这样那样的问题。但是一旦你掌握了足够多的方法&＃xff0c;就总能在不断尝试过程中接近想要的答案&＃xff01;