Selenium中常用的JS操作总结
目录
前言：
JS相关操作
JS Xpath定位
获取单个元素
获取元素集合
文本输入
获取坐标
获取浏览器窗口的内部高度
获取浏览器窗口的内部宽度；
坐标计算
设置样式
设置窗口大小
类数组对象arguments
JQuery选择器
jQuery 选择器
jQuery 选择器
jQuery 选择器
jQuery 元素选择器
jQuery 属性选择器
jQuery CSS 选择器
实例
更多的选择器实例
jQuery 定位：
注入jQuery
暴露变量给Windows
JS模拟鼠标点击
高亮元素
获取canvas中元素坐标
JS获取浏览器窗口内坐标
JS模拟hover
合并数组
在页面标记黑点
页面标记文字
桌面坐标转换为浏览器坐标
前言：
在UI自动化测试中，虽然大部分操作selenium能够解决，但是很多时候selenium在某些情况也会显得有心无力，JavaScript作为前端交互的老祖宗在这方面就显得游刃有余了，小编把自己工作多年中常用的js操作分享给大家，希望能助各位童鞋一臂之力。
JS相关操作
JS Xpath定位
document.evaluate('//*[@id="operatingPanel"]/div/div[2]/div/div[3]/div/div[5]/div/p',document).iterateNext()获取单个元素
function getElementByXpath(xpath){
var element = document.evaluate(xpath,document).iterateNext();
return element;
}
获取元素集合
function getAllElementByXpath(xpath) {var xresult = document.evaluate(xpath, document, null, XPathResult.ANY_TYPE, null);var xnodes = [];var xres;while (xres = xresult.iterateNext()) {
xnodes.push(xres);
}return xnodes;
}
文本输入
document.querySelector("#rc-tabs-3-panel-_static > main > div > div > div._2yDnhcy85YHx4qEnBZIB-v > span:nth-child(1) > input").value='2022-02-01'获取坐标
document.getElementById('元素ID').getBoundingClientRect()
获取浏览器窗口的内部高度
window.innerHeight浏览器窗口的内部高度；获取浏览器窗口的内部宽度；
window.innerWidth浏览器窗口的内部宽度；
坐标计算
绝对坐标X = 窗口.左边 + 窗口内部坐标.x
绝对坐标Y = 窗口.顶边 + 窗口内部坐标.y设置样式
ele.setAttribute('style','width:600px;height:400px')设置窗口大小
document.body.style.zoom=0.5类数组对象arguments
self.driver.execute_script("arguments[0].setAttribute('style', 'background: #e0e7c8; border:2px solid red;');", element)
arguments[0]代表element，以此类推JQuery选择器
jQuery 选择器
| 选择器 | 实例 | 选取 |
|---|---|---|
| * | $("*") | 所有元素 |
| #id | $("#lastname") | id="lastname" 的元素 |
| .class | $(".intro") | 所有 class="intro" 的元素 |
| element | $("p") | 所有 元素 |
| .class.class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
| :first | $("p:first") | 第一个 元素 |
| :last | $("p:last") | 最后一个 元素 |
| :even | $("tr:even") | 所有偶数 |
| :odd | $("tr:odd") | 所有奇数 |
| :eq(index) | $("ul li:eq(3)") | 列表中的第四个元素（index 从 0 开始） |
| :gt(no) | $("ul li:gt(3)") | 列出 index 大于 3 的元素 |
| :lt(no) | $("ul li:lt(3)") | 列出 index 小于 3 的元素 |
| :not(selector) | $("input:not(:empty)") | 所有不为空的 input 元素 |
| :header | $(":header") | 所有标题元素 - |
| :animated | 所有动画元素 | |
| :contains(text) | $(":contains('W3School')") | 包含指定字符串的所有元素 |
| :empty | $(":empty") | 无子（元素）节点的所有元素 |
| :hidden | $("p:hidden") | 所有隐藏的 元素 |
| :visible | $("table:visible") | 所有可见的表格 |
| s1,s2,s3 | $("th,td,.intro") | 所有带有匹配选择的元素 |
| [attribute] | $("[href]") | 所有带有 href 属性的元素 |
| [attribute=value] | $("[href='#']") | 所有 href 属性的值等于 "#" 的元素 |
| [attribute!=value] | $("[href!='#']") | 所有 href 属性的值不等于 "#" 的元素 |
| [attribute$=value] | $("[href$='.jpg']") | 所有 href 属性的值包含以 ".jpg" 结尾的元素 |
| :input | $(":input") | 所有 元素 |
| :text | $(":text") | 所有 type="text" 的 元素 |
| :password | $(":password") | 所有 type="password" 的 元素 |
| :radio | $(":radio") | 所有 type="radio" 的 元素 |
| :checkbox | $(":checkbox") | 所有 type="checkbox" 的 元素 |
| :submit | $(":submit") | 所有 type="submit" 的 元素 |
| :reset | $(":reset") | 所有 type="reset" 的 元素 |
| :button | $(":button") | 所有 type="button" 的 元素 |
| :image | $(":image") | 所有 type="image" 的 元素 |
| :file | $(":file") | 所有 type="file" 的 元素 |
| :enabled | $(":enabled") | 所有激活的 input 元素 |
| :disabled | $(":disabled") | 所有禁用的 input 元素 |
| :selected | $(":selected") | 所有被选取的 input 元素 |
| :checked | $(":checked") | 所有被选中的 input 元素 |
jQuery 选择器
- jQuery 语法
- jQuery 事件
选择器允许您对元素组或单个元素进行操作。
jQuery 选择器
在前面的章节中，我们展示了一些有关如何选取 HTML 元素的实例。
关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。
jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
选择器允许您对 HTML 元素组或单个元素进行操作。
在 HTML DOM 术语中：
选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取
元素。
$("p.intro") 选取所有 class="intro" 的
元素。
$("p#demo") 选取所有 id="demo" 的
元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色：
实例
$("p").css("background-color","red");
更多的选择器实例
| 语法 | 描述 |
|---|---|
| $(this) | 当前 HTML 元素 |
| $("p") | 所有 元素 |
| $("p.intro") | 所有 class="intro" 的 元素 |
| $(".intro") | 所有 class="intro" 的元素 |
| $("#intro") | id="intro" 的元素 |
| $("ul li:first") | 每个
|
| $("[href$='.jpg']") | 所有带有以 ".jpg" 结尾的属性值的 href 属性 |
| $("div#intro .head") | id="intro" 的 元素中的所有 class="head" 的元素 |
jQuery 定位：
$('input#kw.s_ipt').val('naruto') 定位百度搜索框并输入‘naruto’
注入jQuery
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js';
document.head.appendChild(script);暴露变量给Windows
JS模拟鼠标点击
// 获取需要点击的元素
var element = document.getElementById("your_element_id");
// 创建鼠标点击事件
var event = new MouseEvent("click", {
bubbles: true,
cancelable: true,
view: window,
clientX: 100, // 鼠标点击位置的X坐标
clientY: 200 // 鼠标点击位置的Y坐标
});
// 主动触发鼠标点击事件
element.dispatchEvent(event);高亮元素
element.setAttribute('style', 'background: #e0e7c8; border:2px solid red;')
driver.execute_script("arguments[0].setAttribute('style', 'background: #e0e7c8; border:2px solid red;');",element)获取canvas中元素坐标
// 获取Canvas元素
var canvas = document.getElementById("your_canvas_id");
// 获取Canvas元素的位置和大小
var canvasRect = canvas.getBoundingClientRect();
// 获取鼠标在Canvas中的坐标
canvas.addEventListener("click", function(event) {
var x = event.clientX - canvasRect.left;
var y = event.clientY - canvasRect.top;
// 在控制台打印坐标
console.log("点击位置坐标：", x, y);
});JS获取浏览器窗口内坐标
document.addEventListener("mousemove", function(event) {
var x = event.clientX;
var y = event.clientY;
console.log("鼠标位置坐标：", x, y);
});
document.addEventListener("touchmove", function(event) {
var x = event.touches[0].clientX;
var y = event.touches[0].clientY;
console.log("触摸位置坐标：", x, y);
});JS模拟hover
Ps:不支持hover到canvas需要hover到canvas同级的dom才行
// 获取目标元素
var targetElement = document.getElementById("B4E6A80D");
// 目标坐标
var targetX = 666; // 目标横坐标
var targetY = 429; // 目标纵坐标
// 创建鼠标移动事件
var event = new MouseEvent("mousemove", {
clientX: targetX,
clientY: targetY
});
// 触发事件，模拟鼠标悬停
targetElement.dispatchEvent(event);
合并数组
如果您有两个等长的数组，想要将一个数组中的值作为键，另一个数组中的值作为对应的值，可以使用 `reduce` 方法来实现。以下是示例代码：
const keys = ['key1', 'key2', 'key3'];
const values = ['value1', 'value2', 'value3'];
const result = keys.reduce((acc, key, index) => {
acc[key] = values[index];
return acc;
}, {});
console.log(result);
在上述代码中，我们使用 `reduce` 方法遍历 `keys` 数组，并在每次迭代时将当前的键值对存储在累加器 `acc` 中。我们使用当前键 `key` 作为对象的键，使用 `values[index]` 作为对应的值，其中 `index` 是当前迭代的索引。最后，我们传递一个空对象 `{}` 作为初始值给 `reduce` 方法。
通过运行以上代码，您将获得一个新的对象 `result`，其中包含了将一个数组中的值作为键，另一个数组中的值作为对应的值的键值对。
在页面标记黑点
// 创建黑点DOM
const dot = document.createElement('div');
dot.style.position = 'absolute';
dot.style.width = '10px';
dot.style.height = '10px';
dot.style.backgroundColor = '{}';
dot.style.borderRadius = '50%';
dot.style.left = {} + 'px';
dot.style.top = {} + 'px';
document.body.appendChild(dot);页面标记文字
// 创建一个新的标记元素
var newElement = document.createElement("span");
// 设置标记元素的文本内容
newElement.innerText = "{}";
// 设置标记元素的位置样式
newElement.style.position = "absolute";
newElement.style.left = "{}px";
newElement.style.top = "{}px";
newElement.style.color = "red";
// 将新的标记元素附加到目标元素中
document.body.appendChild(newElement);桌面坐标转换为浏览器坐标
function getDesktopCoordinates(browserX, browserY,screenWidth,screenHeight,desktopScale) {{
// 浏览器中的坐标(x, y)
var browserX = browserX;
var browserY = browserY;
// 屏幕分辨率
var screenWidth = screenWidth;
var screenHeight = screenHeight;
// 桌面缩放比例
var desktopScale = desktopScale;
//- 浏览器窗口左上角的桌面坐标为（win_x, win_y）。
var win_x = window.screenX || window.screenLeft;
var win_y = window.screenY || window.screenTop;
//计算工具栏高度
var toolbarHeight = window.outerHeight - window.innerHeight;
// 计算桌面坐标
var desktopX =(win_x+ browserX) * (screenWidth/window.innerWidth) ;
var desktopY =(win_y+toolbarHeight/desktopScale+ browserY) * (screenHeight/ window.innerHeight );
console.log("桌面坐标 (x, y):", desktopX, desktopY);
// 创建包含坐标的对象
var desktopCoordinates = {{
desktopX: desktopX,
desktopY: desktopY
}};
return desktopCoordinates;
}}
var coordinates = getDesktopCoordinates({browserX}, {browserY},{screenWidth},{screenHeight},{desktopScale});
return coordinates;