目录
前言:
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") | 所有 <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] | $("[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 语法
- 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 定位:
$('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
<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模拟鼠标点击
// 获取需要点击的元素
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`,其中包含了将一个数组中的值作为键,另一个数组中的值作为对应的值的键值对。
在页面标记黑点
// 创建黑点DOMconst 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;