操作selenium控件时,往往需要有些控件提前显示,特别是后台的一些控件,或者需要使用鼠标显示下拉的操作,有时鼠标悬停,在点击不怎么好使,就可以依靠js方式,提前让控件显示。

1.使用style的方式让其显示

案例1:

使用修改样式的block(显示)与none(不显示),方法如下:

JavascriptExecutor js = (JavascriptExecutor) driver;

String myjs = "document.querySelector(\'"+css+"\').style.display='block';";

js.executeScript(myjs);

原始页面顾客管理下拉框不显示内容

修改页面样式为block,下拉框内容显示

控制台操作显示:

document.querySelector('#js_pageHD-nav > ul > li:nth-child(3) > div').style.display='block'

"block"

控制台操作隐藏

document.querySelector('#js_pageHD-nav > ul > li:nth-child(3) > div').style.display='none'

确认定位元素是是否正确,在chorm控制台中打印

通过xpath定位,以及通过id定位原理类似,在document的函数中提供了很多方法

2.修改class显示样式

如鼠标浮动到发货管理,点击下面的发货,鼠标移动不好使,直接显示页面元素点击发货,观察加载的样式

1.未显示下拉框时的样式

2.显示下拉框的样式

发现从div的class=” dropMenu hideCss3”  变为class=” dropMenu hideCss3 showCss3” 页面内容就显示了,那解决办法有以下两种

方案1:删除class,不使用样式

1.步骤:1.先定位到改元素,并且获取到改元素的class

$('#headMenuLists > li:nth-child(6) > div') 定位元素

[div.dropMenu.hideCss3]

$('#headMenuLists > li:nth-child(6) > div').attr('class') 获取class

"dropMenu hideCss3"

步骤2:删除class

$('#headMenuLists > li:nth-child(6) > div').removeClass('dropMenu hideCss3')

界面内容显示为无样式

页面元素显示发生了变化

目前已经可以直接点击需要的元素,可以不通过鼠标移动到发货管理进行显示

2.直接设置要显示的class的样式

代码:

('#headMenuLists > li:nth-child(6) > div').attr('class',' dropMenu hideCss3 showCss3')

[div.dropMenu.hideCss3.showCss3]

页面显示

3.删除class,在增加class

删除已有的class,增加新的class(如果觉得第一种太暴力了,可以删除后在增加,显示已有样式)

$('#headMenuLists > li:nth-child(6) > div').removeClass('dropMenu hideCss3')

$('#headMenuLists > li:nth-child(6) > div').addClass('dropMenu hideCss3 showCss3')

以上在Java中使用就很简单

JavascriptExecutor js=(JavascriptExecutor) driver;实例js

String myjs = "$('#headMenuLists > li:nth-child(6) > div').attr('class',' dropMenu hideCss3 showCss3')";

js.executeScript();//执行

4.使用js打开一个新窗口,做后台查数据很快

JavascriptExecutor js=(JavascriptExecutor) driver;

js.executeScript("window.open('"+getURl+"')") #geturl为需要打开的地址,如果为空

js.executeScript("window.open('blank')");//打开空白页面

5.使用id进行显示

JavascriptExecutor js = (JavascriptExecutor) driver;
String myjs = "document.getElementById('mini_cart').style.display='block'";
js.executeScript(myjs);

java +selenuim使用js显示控件的更多相关文章

  1. js设置控件的隐藏与显示的两种方法

    js设置控件的隐藏与显示,设置控件style的display和visibility属性就可以了,下面有个示例,需要的朋友可以参考下用JavaScript隐藏控件的方法有两种,分别是通过设置控件的sty ...

  2. 《手把手教你》系列技巧篇(三十八)-java+ selenium自动化测试-日历时间控件-下篇(详解教程)

    1.简介 理想很丰满现实很骨感,在应用selenium实现web自动化时,经常会遇到处理日期控件点击问题,手工很简单,可以一个个点击日期控件选择需要的日期,但自动化执行过程中,完全复制手工这样的操作就 ...

  3. 简洁JS 日历控件 支持日期和月份选择

    原文出处 以下这个JS日历控件是我的闲暇之余自己编写的,所有的代码全部在IE7/IE8/Firefox下面测试通过, 而且可以解决被iframe层遮盖的问题.现在只提供两种风格(简洁版和古典版)和两种 ...

  4. JS日历控件优化(增加时分秒)

    JS日历控件优化      在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时只支持 年月日 的日历控件,现在优化如下:      1. 在原基础上 支持 yyyy ...

  5. AvalonEdit-基于WPF的代码显示控件

    AvalonEdit是基于WPF的代码显示控件,项目地址:https://github.com/icsharpcode/AvalonEdit,支持C#,javascript,C++,XML,HTML, ...

  6. 利用js日期控件重构WEB功能

    开发需求:网页中的日期部门(注册页面和查询条件)都用js日期控件重写 页面一:更新员工页面 empUpdate.jsp 中增加 onfocus 事件 入职日期:<input id="h ...

  7. 简洁js日历控件的使用

    往Web工程添加纯js日历控件 在网上找到了DatePicker.js(http://www.cnblogs.com/shenyixin/archive/2013/03/11/2954156.html ...

  8. CAD全屏显示控件

    主要用到函数说明: MxDrawXCustomFunction::Mx_FullScreen 全屏显示控件,详细说明如下: 参数 说明 int iFull = 2 0: 不完屏,1:全屏,2:自动切换 ...

  9. js树形控件

    js树形控件 ztree http://www.treejs.cn/

随机推荐

  1. PAT1098【插入排序+堆排序】

    简单插入排序: 简单插入排序的核心思想: 把一条这么个难看的序列默认分为两个排好序的和未排好序的两个部分: 所以一开始排好序的只有一个a[0](好看的只有一个),难看的有N(数组长度)-1个a[1,n ...

  2. PHP连接 redis

    <?php //连接本地的 Redis 服务 $redis = new Redis(); //连接redis 地址 端口 连接超时时间 连接成功返回true 失败返回false $redis-& ...

  3. java内存及数据区

    Java运行时的数据区包括:(其中前两个是线程共享的) 1.方法区(Method Area) 存储已被虚拟机加载的类信息.常量.静态变量.即时编译器编译后的代码等数据 2.堆(Heap) 存放对象实例 ...

  4. 剑指Offer的学习笔记(C#篇)-- 旋转数组的最小数字

    题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋 ...

  5. BootStrap系统

    BootStrsp的引入: <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="// ...

  6. 微信小程序在sublime开发代码高亮显示

    问题:xxx.wxml 和xxx.wxss在subline中不高亮不显示 如下图,开发起来非常的不方便 解决办法:右下角将Plain Text改为Html,问题解决,可高亮,提高代码可读性,可提示,提 ...

  7. QT LCDNumber使用

    新建一个QT工程 然后在cpp文件中写入代码 #include "hello.h" #include <qthread.h> #include <QVariant ...

  8. 一般的linux系统默认安装的vim是精简版

    一般的linux系统默认安装的vim是精简版(vim-tiny),所以不能配置语法检查等属性或获取在线帮助.需要安装vim-x:x.x.x,vim-common,vim-runtime. :synta ...

  9. ubuntu 无法应用原保存的显示器配置

    打开ubuntu之后的开启页面出现: 所选模式均不匹配可能的模式: 为 CRTC 63 尝试模式 CRTC 63:尝试 800x600@60Hz 模式输出在 1366x768@60Hz (通过 0) ...

  10. Spring Cloud(3):Ribbon的使用

    基于搭建好的Eureka Server+Eureka Client:https://www.cnblogs.com/xuyiqing/p/10861541.html 有了服务,那么现在学习如何调用服务 ...