Selenium中常用的JS操作总结

前言：

JS相关操作

[JS Xpath定位](#JS Xpath定位)

获取单个元素

[jQuery 选择器](#jQuery 选择器)

[jQuery 元素选择器](#jQuery 元素选择器)

[jQuery 属性选择器](#jQuery 属性选择器)

[jQuery CSS 选择器](#jQuery CSS 选择器)

实例

更多的选择器实例

[jQuery 定位：](#jQuery 定位：)

前言：

在UI自动化测试中，虽然大部分操作selenium能够解决，但是很多时候selenium在某些情况也会显得有心无力，JavaScript作为前端交互的老祖宗在这方面就显得游刃有余了，小编把自己工作多年中常用的js操作分享给大家，希望能助各位童鞋一臂之力。

JS相关操作

JS Xpath定位

javascript 复制代码

document.evaluate('//*[@id="operatingPanel"]/div/div[2]/div/div[3]/div/div[5]/div/p',document).iterateNext()

获取单个元素

javascript 复制代码

function getElementByXpath(xpath){

    var element = document.evaluate(xpath,document).iterateNext();

    return element;

}

获取元素集合

javascript 复制代码

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;

}

文本输入

javascript 复制代码

document.querySelector("#rc-tabs-3-panel-_static > main > div > div > div._2yDnhcy85YHx4qEnBZIB-v > span:nth-child(1) > input").value='2022-02-01'

获取坐标

javascript 复制代码

document.getElementById('元素ID').getBoundingClientRect()

获取浏览器窗口的内部高度

javascript 复制代码

window.innerHeight浏览器窗口的内部高度；

获取浏览器窗口的内部宽度；

javascript 复制代码

window.innerWidth浏览器窗口的内部宽度；

坐标计算

javascript 复制代码

绝对坐标X = 窗口.左边 + 窗口内部坐标.x
绝对坐标Y = 窗口.顶边 + 窗口内部坐标.y

设置样式

javascript 复制代码

ele.setAttribute('style','width:600px;height:400px')

设置窗口大小

javascript 复制代码

document.body.style.zoom=0.5

类数组对象arguments

javascript 复制代码

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")	所有 <p> 元素
.class .class	$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素

:first	$("p:first")	第一个 <p> 元素
:last	$("p:last")	最后一个 <p> 元素
:even	$("tr:even")	所有偶数 <tr> 元素
:odd	$("tr:odd")	所有奇数 <tr> 元素

: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")	所有标题元素 <h1> - <h6>
:animated		所有动画元素

:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的 <p> 元素
:visible	$("table:visible")	所有可见的表格

s1,s2,s3	$("th,td,.intro")	所有带有匹配选择的元素

[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='#']")	所有 href 属性的值等于 "#" 的元素
[attribute!=value]	$("[href!='#']")	所有 href 属性的值不等于 "#" 的元素
[[attribute $=value\]](https://www.w3school.com.cn/jquery/selector_attribute_end_value.asp "[attribute$ =value]")	$("\[href$ ='.jpg']")	所有 href 属性的值包含以 ".jpg" 结尾的元素

:input	$(":input")	所有 <input> 元素
:text	$(":text")	所有 type="text" 的 <input> 元素
:password	$(":password")	所有 type="password" 的 <input> 元素
:radio	$(":radio")	所有 type="radio" 的 <input> 元素
:checkbox	$(":checkbox")	所有 type="checkbox" 的 <input> 元素
:submit	$(":submit")	所有 type="submit" 的 <input> 元素
:reset	$(":reset")	所有 type="reset" 的 <input> 元素
:button	$(":button")	所有 type="button" 的 <input> 元素
:image	$(":image")	所有 type="image" 的 <input> 元素
:file	$(":file")	所有 type="file" 的 <input> 元素

:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

jQuery 选择器

选择器允许您对元素组或单个元素进行操作。

jQuery 选择器

在前面的章节中，我们展示了一些有关如何选取 HTML 元素的实例。

关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。

jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。

选择器允许您对 HTML 元素组或单个元素进行操作。

在 HTML DOM 术语中：

选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

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> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("\[href$ ='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

jQuery 定位：

javascript 复制代码

$('input#kw.s_ipt').val('naruto') 定位百度搜索框并输入'naruto'

注入jQuery

javascript 复制代码

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

javascript 复制代码

<script>
//通过自调用函数产生一个随机数对象,在自调用函数外面,调用该随机数对象方法产生随机数
//全局变量
(function (window) {
//产生随机构造函数
function Random() {
};
//在原型对象中添加方法
Random.prototype.getRandom = function (min, max) {
return Math.floor(Math.random() * (max - min) + min);
};
//把Random对象暴露给顶级对象window---->外部可以直接使用这个对象
window.Random = Random;
})(window);
//实例化随机数对象
var rm = new Random();
//调用方法产生随机数
console.log(rm.getRandom(0, 50));
</script>

JS模拟鼠标点击

javascript 复制代码

// 获取需要点击的元素
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);

高亮元素

javascript 复制代码

element.setAttribute('style', 'background: #e0e7c8; border:2px solid red;')
driver.execute_script("arguments[0].setAttribute('style', 'background: #e0e7c8; border:2px solid red;');",element)

获取canvas中元素坐标

javascript 复制代码

// 获取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获取浏览器窗口内坐标

javascript 复制代码

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

javascript 复制代码

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` 方法来实现。以下是示例代码：

javascript 复制代码

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`，其中包含了将一个数组中的值作为键，另一个数组中的值作为对应的值的键值对。

在页面标记黑点

javascript 复制代码

  // 创建黑点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);

页面标记文字

javascript 复制代码

// 创建一个新的标记元素
        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;

Selenium中常用的JS操作总结

前言：

JS相关操作

JS Xpath定位

获取单个元素

获取元素集合

文本输入

获取坐标

获取浏览器窗口的内部高度

获取浏览器窗口的内部宽度；

坐标计算

设置样式

设置窗口大小

类数组对象arguments

JQuery选择器

jQuery 选择器

jQuery 选择器

jQuery 选择器

jQuery 元素选择器

jQuery 属性选择器

jQuery CSS 选择器

实例

更多的选择器实例

jQuery 定位：

注入jQuery

暴露变量给Windows

JS模拟鼠标点击

高亮元素

获取canvas中元素坐标

JS获取浏览器窗口内坐标

JS模拟hover

合并数组

在页面标记黑点

​页面标记文字

桌面坐标转换为浏览器坐标

页面标记文字