网站建设的流程推广方案,软文广告投放平台,jsp做网站的优点,响应式网站的宽度
目录 前言#xff1a;
JS相关操作
JS Xpath定位
获取单个元素
获取元素集合
文本输入
获取坐标
获取浏览器窗口的内部高度
获取浏览器窗口的内部宽度#xff1b;
坐标计算
设置样式
设置窗口大小
类数组对象arguments
JQuery选择器
jQuery 选择器
jQuery …
目录 前言
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(//*[idoperatingPanel]/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).value2022-02-01 获取坐标
document.getElementById(元素ID).getBoundingClientRect()
获取浏览器窗口的内部高度
window.innerHeight浏览器窗口的内部高度
获取浏览器窗口的内部宽度
window.innerWidth浏览器窗口的内部宽度坐标计算
绝对坐标X 窗口.左边 窗口内部坐标.x
绝对坐标Y 窗口.顶边 窗口内部坐标.y
设置样式
ele.setAttribute(style,width:600px;height:400px)
设置窗口大小
document.body.style.zoom0.5
类数组对象arguments
self.driver.execute_script(arguments[0].setAttribute(style, background: #e0e7c8; border:2px solid red;);, element)
arguments[0]代表element以此类推
JQuery选择器
jQuery 选择器
选择器实例选取*$(*)所有元素#id$(#lastname)idlastname 的元素.class$(.intro)所有 classintro 的元素element$(p)所有 p 元素.class.class$(.intro.demo)所有 classintro 且 classdemo 的元素: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 属性的元素[attributevalue]$([href#])所有 href 属性的值等于 # 的元素[attribute!value]$([href!#])所有 href 属性的值不等于 # 的元素[attribute$value]$([href$.jpg])所有 href 属性的值包含以 .jpg 结尾的元素:input$(:input)所有 input 元素:text$(:text)所有 typetext 的 input 元素:password$(:password)所有 typepassword 的 input 元素:radio$(:radio)所有 typeradio 的 input 元素:checkbox$(:checkbox)所有 typecheckbox 的 input 元素:submit$(:submit)所有 typesubmit 的 input 元素:reset$(:reset)所有 typereset 的 input 元素:button$(:button)所有 typebutton 的 input 元素:image$(:image)所有 typeimage 的 input 元素:file$(:file)所有 typefile 的 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) 选取所有 classintro 的 p 元素。
$(p#demo) 选取所有 iddemo 的 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)所有 classintro 的 p 元素$(.intro)所有 classintro 的元素$(#intro)idintro 的元素$(ul li:first)每个 ul 的第一个 li 元素$([href$.jpg])所有带有以 .jpg 结尾的属性值的 href 属性$(div#intro .head)idintro 的 div 元素中的所有 classhead 的元素
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_ytoolbarHeight/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;
