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")所有 <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;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/167469.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

多模态——使用stable-video-diffusion将图片生成视频

多模态——使用stable-video-diffusion将图片生成视频 0. 内容简介1. 运行环境2. 模型下载3. 代码梳理3.1 修改yaml文件中的svd路径3.2 修改DeepFloyDataFiltering的vit路径3.3 修改open_clip的clip路径3.4 代码总体结构 4. 资源消耗5. 效果预览 0. 内容简介 近期&#xff0c;…

Linux上安装Redis

案例中Linux版本为CentOS7.9&#xff0c;安装目录为 /root/software/ 1、使用 wget 命令从官网下载安装包 wget https://github.com/redis/redis/archive/7.2.3.tar.gz2、解压缩 tar -xzf 7.2.3.tar.gz3、进入解压后的目录 cd redis-7.2.34、 编译和安装Redis make make i…

npm中,你不了解的.npmrc文件

原文链接&#xff1a;npm中&#xff0c;你不了解的.npmrc文件 写在前面 对于写JS的程序员来说&#xff0c;可能没有人不知道npm&#xff0c;但是有些同学对他的配置文件(即.npmrc文件)并不了解。结合我的学习心得&#xff0c;写一篇博客跟大家分享一些该配置文件的知识。 .np…

理解CLIP模型

1.简介 学习深度学习必看CLIP&#xff01;论文链接arxiv.org/pdf/2103.00020v1.pdf。 简单来说就是传统的分类任务被用来预测指定的类别&#xff0c;有监督训练限制了模型的通用性和可用性&#xff0c;并且需要带有标签的数据来训练&#xff0c;该篇论文就想直接从原始文本中…

Navicat 技术指引 | 适用于 GaussDB 的用户权限设置

Navicat Premium&#xff08;16.2.8 Windows版或以上&#xff09; 已支持对 GaussDB 主备版的管理和开发功能。它不仅具备轻松、便捷的可视化数据查看和编辑功能&#xff0c;还提供强大的高阶功能&#xff08;如模型、结构同步、协同合作、数据迁移等&#xff09;&#xff0c;这…

Spring 七大组件

文章目录 Spring 七大组件 Spring 七大组件 核心容器(Spring core) 核心容器提供Spring框架的基本功能。Spring以bean的方式组织和管理Java应用中的各个组件及其关系。Spring使用BeanFactory来产生和管理Bean&#xff0c;它是工厂模式的实现。BeanFactory使用控制反转(IOC)模式…

(Matalb分类预测)GA-BP遗传算法优化BP神经网络的多维分类预测

目录 一、程序及算法内容介绍&#xff1a; 基本内容&#xff1a; 亮点与优势&#xff1a; 二、实际运行效果&#xff1a; 三、部分代码&#xff1a; 四、本文代码数据说明手册分享 一、程序及算法内容介绍&#xff1a; 基本内容&#xff1a; 本代码基于Matalb平台编译&am…

Flink Flink中的分流

一、什么是分流 所谓“分流”&#xff0c;就是将一条数据流拆分成完全独立的两条、甚至多条流。也就是基于一个DataStream&#xff0c;定义一些筛选条件&#xff0c;将符合条件的数据拣选出来放到对应的流里。 二、基于filter算子的简单实现分流 其实根据条件筛选数据的需求…

面了一个4年经验的测试工程师,自动化都不会也要15k,我也是醉了····

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…

表单考勤签到作业周期打卡打分评价评分小程序开源版开发

表单考勤签到作业周期打卡打分评价评分小程序开源版开发 表单打卡评分 表单签到功能&#xff1a;学生可以通过扫描二维码或输入签到码进行签到&#xff0c;方便教师进行考勤管理。 考勤功能&#xff1a;可以记录学生的出勤情况&#xff0c;并自动生成出勤率和缺勤次数等统计数…

本地缓存与分布式缓存

一、缓存的概念 在服务端编程当中&#xff0c;缓存主要是指将数据库的数据加载到内存中&#xff0c;之后对该数据的访问都在内存中完成&#xff0c;从而减少了对数据库的访问&#xff0c;解决了高并发场景中数据库容易成为性能瓶颈的问题&#xff1b;以及基于内存的访问速度高…

ruoyi-plus-vue部署

安装虚拟机 部署文档 安装docker 安装docker 安装docker-compose 可能遇到的错误 Failed to deploy ruoyi/ruoyi-server:5.1.0 Dockerfile: ruoyi-admin/Dockerfile: Cant retrieve im age ID from build stream 安装 vim 命令 yum install vim -y 修改文件 vim /etc/re…

flutter 无法从H5 WebView 访问摄像头和录音权限

AndroidManifest.xml需要在 中添加以下权限&#xff1a; <uses-permission android:name"android.permission.INTERNET"/> <uses-permission android:name"android.permission.CAMERA" /> <uses-permission android:name"android.per…

基于Springboot的冬奥会科普平台(有报告),Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的冬奥会科普平台&#xff08;有报告&#xff09;&#xff0c;Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层…

线性表之链式表

文章目录 主要内容一.单链表1.头插法建立单链表代码如下&#xff08;示例&#xff09;: 2.尾插法建立单链表代码如下&#xff08;示例&#xff09;: 3.按序号查找结点值代码如下&#xff08;示例&#xff09;: 4.按值查找表结点代码如下&#xff08;示例&#xff09;: 5.插入节…

ELK+kafka+filebeat企业内部日志分析系统

1、组件介绍 1、Elasticsearch&#xff1a; 是一个基于Lucene的搜索服务器。提供搜集、分析、存储数据三大功能。它提供了一个分布式多用户能力的全文搜索引擎&#xff0c;基于RESTful web接口。Elasticsearch是用Java开发的&#xff0c;并作为Apache许可条款下的开放源码发布…

module ‘d2l.torch‘ has no attribute ‘train_ch3‘

解决方法&#xff1a; 方法1&#xff1a; 如果没有安装d2l&#xff0c;请安装 详细步骤见安装d2l 方法2&#xff1a; 先卸载旧的版本 pip uninstall d2l再下载新的版本&#xff0c;需要以管理员身份运行下载指令 pip install d2l0.17.5 --user完美解决&#xff01; ☺☺☺☺…

创新研报|企业如何在不确定时期突破至新高度?

报告下载地址&#xff1a; 创新研报&#xff5c;BCG 2023最创新企业研究-在不确定时期跃升新高度 创新从未如此重要&#xff0c;领先的企业创新者正在证明这一切。BCG&#xff08;于2005年首次发布年度创新报告&#xff0c;其中列出了全球创新高管最钦佩的50家企业&#xf…

2824. 统计和小于目标的下标对数目 --力扣 --JAVA

题目 给你一个下标从 0 开始长度为 n 的整数数组 nums 和一个整数 target &#xff0c;请你返回满足 0 < i < j < n 且 nums[i] nums[j] < target 的下标对 (i, j) 的数目。 解题思路 对数组进行排序&#xff0c;可以利用List自带的sort函数传递比较规则(代码中的…

【MATLAB源码-第88期】基于matlab的灰狼优化算法(GWO)的栅格路径规划,输出做短路径图和适应度曲线

操作环境&#xff1a; MATLAB 2022a 1、算法描述 灰狼优化算法&#xff08;Grey Wolf Optimizer, GWO&#xff09;是一种模仿灰狼捕食行为的优化算法。灰狼是群居动物&#xff0c;有着严格的社会等级结构。在灰狼群体中&#xff0c;通常有三个等级&#xff1a;首领&#xff…