​

****** **前言：

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

元素.class.class$(".intro.demo")所有 class="intro" 且 class="demo" 的元素:first$("p:first")第一个

元素:last$("p:last")最后一个

元素:even$("tr:even")所有偶数 元素:odd$("tr:odd")所有奇数 元素: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")所有标题元素

-

:animated所有动画元素:contains(text)$(":contains('W3School')")包含指定字符串的所有元素:empty$(":empty")无子（元素）节点的所有元素:hidden$("p:hidden")所有隐藏的

元素: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.intro") 选取所有 class="intro" 的

元素。

$("p#demo") 选取所有 id="demo" 的

元素。

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.intro")所有 class="intro" 的

元素$(".intro")所有 class="intro" 的元素$("#intro")id="intro" 的元素$("ul li:first")每个

的第一个
• 元素$("[href$='.jpg']")所有带有以 ".jpg" 结尾的属性值的 href 属性$("div#intro .head")id="intro" 的
  元素中的所有 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) {
  //产生随机构造函数functionRandom() {
  };
  //在原型对象中添加方法Random.prototype.getRandom = function (min, max) {
  returnMath.floor(Math.random() * (max - min) + min);
  };
  //把Random对象暴露给顶级对象window---->外部可以直接使用这个对象window.Random = Random;
  })(window);
  //实例化随机数对象var rm = newRandom();
  //调用方法产生随机数console.log(rm.getRandom(0, 50));
  </script>
  

  JS模拟鼠标点击

  // 获取需要点击的元素var element = document.getElementById("your_element_id");
  // 创建鼠标点击事件var event = newMouseEvent("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 = newMouseEvent("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;