Selenium元素定位不到？JS注入轻松搞定

在使用Selenium做web自动化测试过程中，经常会遇到一些组件无法通过Selenium直接识别和处理，比如<input>标签组合的下拉框，比如日期控件。面对这些元素，我们可以引入JS注入技术来解决问题。

Javascript

JavaScript是一种被广泛用于Web前端开发的脚本语言 ,常用来为网页添加动态功能（弹窗，点击事件….）通过HTML DOM，JavaScript提供了页面对象获取和操作功能。

DOM模型把HTML文档解析成一棵树，根节点是<html>，从根节点往下根据节点之间的关系（顺序或包含）把节点解析为兄弟节点和孩子节点。<HTML> 节点有不同的类型：

  • 元素
  • 属性
  • 文本

Javascript可以根据DOM结构获取任意的HTML元素，变更这些元素的属性，样式，并对元素的鼠标键盘事件做出响应：

  • Javascript提供了通过id查找元素的方式：document.getElementById(id)；除了id, javascript还支持通过类名和标签名查找元素
  • Javascript提供通过innerHTML改变元素内容的方式：document.getElementById(id).innerHTML=new HTML，通过变更节点内部的HTML可以改变元素的文本和行为
  • Javascript提供通过attribute改变元素属性的方式：document.getElementById(id).attribute=new value

Selenium支持Javascript

Selenium WebDriver可以被转换为JavaScriptExecutor，通过JavaScriptExecutor执行Javascript脚本，通过这种方式可以实现Selenium的Javascript注入，从而实现对复杂页面元素的操作。

WebDriver driver=new ChromeDriver(); JavascriptExecutor js = (JavascriptExecutor) driver; js.executeScript(\”js语句\”);

Jquery

Jquery是一个增强的JavaScript框架，它封装了JavaScript常用的功能代码，简化了HTML文档操作、事件处理、动画设计和Ajax交互。

对于复杂的网页元素查找，通过Javascript较为低效，此时可以引入Jquery简化元素查找。

Jquery常见选择器如下，详细语法课参见官网https://jquery.com/

Selenium支持Jquery

Selenium可以通过判定当前待测的网站是否引入Jquery，如果没有则加载Jquery，加载完毕以后即可用Jquery代码来实现前端页面元素的操作。

public class JqueryTest {

static JavascriptExecutor js; static WebDriver driver; public static void main(String[] args) { driver=new ChromeDriver(); js=(JavascriptExecutor)driver; driver.get(\”http://www.baidu.com/\”); //判断Jquery是否存在,若不存在则注入 if(!jqueryLoaded()){ injectJquery(); } //通过jquery查找出页面百度链接元素个数（.mnav） List<WebElement> elements = (List<WebElement>) js .executeScript(\”return jQuery.find(\’.mnav\’)\”); driver.quit(); } public static boolean jqueryLoaded() { boolean loaded=false; try { loaded = (Boolean) js.executeScript(\”return\” + \” jQuery()!=null\”); }catch (Exception e){ System.out.println(\”查找jQuery对象出现异常\”); } System.out.println(\”页面已存在Jquery对象，无需注入：\” + loaded); return loaded; } public static void injectJquery() { js.executeScript(\” var headID = \” + \”document.getElementsByTagName(\\\”head\\\”)[0];\” + \”var newScript = document.createElement(\’script\’);\” + \”newScript.type = \’text/javascript\’;\” + \”newScript.src = \” + \”\’http://code.jquery.com/jquery-latest.js\’;\” + \”headID.appendChild(newScript);\”); } }

CSS position定位详解

使用CSS有普通流、绝对定位和浮动三种基本的定位机制，如果不是专门指定区块的位置都是在普通流中定位，即从上到下一个接一个地排列，位置

由元素在HTML中的位置决定。

文档中默认都是静态定位

使用相对定位的盒子的位置常以标准流的排版方式为基础, 然后使盒子相对于它在原本的标准位置偏移指定的距离。

相对定位的盒子仍在标准流中, 它后面的盒子仍以标准流方式对待它。

使用relative, 即相对定位, 除了将position属性设置为relative之外, 还需要指定一定的偏移量，

水平方向通过left或者right属性来指定, 垂直方向通过top和bottom来指定。

使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离，到达新的位置。而该相对定位的盒子则仍然位于标准流中，它对父块没有任何影响。

使用相对定位的盒子不仅对父块没有任何影响，对兄弟盒子也没有任何影响。

简单理解：

它是相对于\”原来的自己\”进行定位, 相对定位元素它还占用空间, 它的层次会比普通元素要高

相对定位属性它一般都是用于配合绝对定位来使用

相对定位有坑, 所以一般不用于做\”压盖\”效果。页面中, 效果极小。就两个作用：

1) 微调元素

2) 做绝对定位的参考，子绝父相(配合绝对定位一起使用)

相关属性

可以用left、right来描述盒子右、左的移动；

可以用top、bottom来描述盒子的下、上的移动。

用绝对定位的盒子以它的\”最近\”的一个\”已经定位\”的\”祖先元素\”为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。

再有，绝对定位的框从标准流中脱离，这意味着它们对其后的兄弟盒子的定位没有任何影响，其他的盒子就好像这个盒子不存在一样。

简单理解:

绝对定位元素它是相对于\”祖先\”定位元素(relative、fixed、absolute)，如果绝对定位元素它的祖先没有定位元素(static)那么它会以当前的浏览器窗口来进行定位,

绝对定位元素不再占用空间

当position的属性值为fixed，即固定定位。它与绝对定位有些类似,区别主要在于定位的基准不是祖先，而是浏览器窗口或其它显示设备窗口。

也就是当访问者拖动浏览器的窗口滚动条时，固定定位的元素相对于浏览器窗口的位置保持不变。(IE6不支持固定定位)

简单理解：它是以浏览器窗口作为参照标准来进行定位, 固定定位元素它不再占用空间

定位问题：

绝对定位问题：

当我们给一个子元素设置绝对定位,让它在父元素的右下角显示，这个时候

如果父元素的宽和高都为奇数,那么在IE6下我们没有方法让这个子元素压住边框的

这个时候我们建议大家不要使用奇数作为长度

相对定位问题；

IE6下,它认为我们的父元素一定包住它里面的子元素,所以当子元素的宽度和高度大于父元素时,在IE下父元素就会被撑开,

这个时候我们想解决这个问题,我们可以给父元素设置overflow:hidden,但是此时IE6还是不起作用,

所以我们解决方法就是给子元素和父元素都设置相对定位

固定定位的问题：

当我们给一个固定定位的子元素(子元素position:fixed)的父元素添加相对定位或者绝对定位的时候,

它是不会跟着父元素移动的,仍然是相对屏幕的。

实例:导航条

让层水平居中的方法：

让左右边界自动判断之下，即可达成左右位置呈现居中的目的。

若内容区<div>之内还有其他内容<div>,其CSS属性设置就需要加上\”定位\”position:absolute(或relative),以防firefox等其他浏览器出现错误

让层垂直居中的方法：

JavaScript学习笔记（三十二）—jQuery（中）

jQuery

  • 昨天讲了 jQuery 的基本选择器筛选器和属性操作
  • 今天来说一些 jQuery 别的东西

元素操作

  • 创建一个元素
  • 内部插入元素
  • 外部插入元素
  • 替换元素
  • 删除元素
  • 克隆元素

元素尺寸

  • 操作元素的宽和高
  • 获取元素的内置宽和高
  • 获取元素的外置宽和高

元素位置

  • 元素相对页面的位置
  • 元素相对于父元素的偏移量
  • 获取页面卷去的高度和宽度

元素事件

  • 绑定事件的方法
  • 移除事件
  • 只能执行一次的事件
  • 直接触发事件

可以直接使用的常见事件

  • 可以直接使用的事件就是可以不利用 on 来绑定，直接就可以使用的事件方法
  • click
  • dblclick
  • scroll
  • hover

动画

  • show
  • hide
  • toggle
  • animate
  • stop
  • finish

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场，未经允许不得转载。

继续阅读本文相关话题

TAG
全部
行业动态
C4D教程
C4D百科