java +selenuim使用js显示控件

操作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);