selenium自动化测试中常用的jQuery /js语句

selenium自动化测试中常用的JavaScript/js语法

记录下UI自动化测试工作中常用到的js语句.

控制菜单栏/滚动条/滑条 滑动

不过最好不要在自动化测试中优先使用js来实现页面行为,因为js执行的结果没有反馈.不能判断其准确执行.

1. 浏览器菜单栏

例如第一种无序定位的,浏览自带的网页最右侧下滑控制条

下面这段代码复制粘贴在控制台回车即可实现右侧滚动条下滑100距离.

window.scrollTo(0,100);

下滑到底部则是

window.scrollTo(0,document.body.scrollHeight);

上滑到顶部则是

window.scrollTo(0,0);

2. 页面上的滚动条水平移动(内嵌的那种)

例如

如截图所示.我们先要获得其JS路径
我是直接使用EDGE浏览器直接右键复制得到路径.


得到的js为

document.querySelector("#preparecut_prepareData > div.table-content > div.table-scroll")

然后在开发者模式的控制台中使用
例如使其向右滑动100的具体的语法为

$("#preparecut_prepareData > div.table-content > div.table-scroll").scrollLeft(100);

向左滑动则是

$("#preparecut_prepareData > div.table-content > div.table-scroll").scrollLeft(0);

3. 页面上的滚动条垂直移动(内嵌的那种)

例如

同上面一样获取其JS路径,如果通过复制获取不到就自己百度下JS路径的写法.
垂直下滑100则是

$("#baseinfo_WorkpieceInfo > div.card-content.form-inline").scrollTop(100);

垂直上滑则是

$("#baseinfo_WorkpieceInfo > div.card-content.form-inline").scrollTop(0);

4. 移动到元素可见的位置

$("#p1").scrollIntoView(false);

加false可以使元素的底部与可滚动祖先的可见区域的底部对齐,不加则是顶部对齐

验证/打印元素的属性值

主要可解决某些场景下代码可见其属性,但是selenium无法获取的问题
例如当我们获取某一元素的value值或title值时,发现明明在浏览器开发者模式下看到代码有写,但是在自动化测试中获取这一值却是空/获取失败.
这是我们可以通过js语法来验证其属性值是否真实存在.
例如

首先我们先选中需要被验证的元素
然后切换到控制台,使用以下语句回车即可打印其对应的属性值.
//打印value值

$0.value;

//打印text值

$0.textContent;

再例如

去除元素只读属性(日期等元素)

例如去除某些日期的只读属性.然后就可以使用selenium直接输入了.

仍然是复制其js路径然后就可以直接手动输入了

$("#promanager_project_orderEntryThree > form > div > div.h.rights.card-content > div:nth-child(3) > input").prop('readonly',false);

常用的js语法

js实现模拟鼠标双击元素

$("元素的js路径").dblclick();

js实现模拟鼠标单击元素

$("元素的js路径").click();

js实现模拟打开新网页

window.open("网址");

例如

js实现更改元素的属性值

需要通过CSS选择器 选择到对应的元素然后

$("input[id='su']").attr('value','百度三下');

例如设置所有的id的值中含有 ad 的id的值为空

$("*[id*='ad']").attr('id','');

js获取元素的坐标和样式属性（长宽高）

$0.getBoundingClientRect();

选中元素后在控制台输入即可获取