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.pswp.cn/news/167469.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/167469.shtml
英文地址,請注明出處:http://en.pswp.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…