?
目錄
?前言:
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;