使用JavascriptExecutor改变页面元素

如下如html的页面代码

<html>
    <body>
        <input type="text" name="text" value="alone">
    </body>
</html>

使用下列脚本即可改变标签的属性

public class Selenium {
    public static WebDriver jsDriver;
    @BeforeMethod
    public void intiDriver(){
        System.setProperty("phantomjs.binary.path","D:\\java\\ideaWorkStation\\casual\\src\\main\\resources\\driver\\phantomjs.exe");
        jsDriver=new PhantomJSDriver();
        jsDriver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
        jsDriver.get("C:\\Users\\win7\\Desktop\\select.html");

    }
    @Test(enabled = true)
    public void javaScriptExcutor(){
        WebElement textEle=jsDriver.findElement(By.name("text"));
        System.out.println(textEle.getAttribute("value"));//输入改变之前的值
        String jsStrToSetAtt="arguments[0].setAttribute(arguments[1],arguments[2])";//改变属性的js
        ((JavascriptExecutor) jsDriver).executeScript(jsStrToSetAtt, textEle, "value", "no alnon");
        System.out.println(textEle.getAttribute("value"));//输入改变后前的值
        String jsStrToRemoveAtt="arguments[0].removeAttribute(arguments[1],arguments[2])";//移除属性的js
        ((JavascriptExecutor) jsDriver).executeScript(jsStrToRemoveAtt, textEle, "value");
        System.out.println(jsDriver.getPageSource());//输出改变后的页面代码
    }
}

执行脚本后,会看到输出如下,说明元素的属性被修改了

alone
no alnon
<html><head></head><body>
<input type="text" name="text">
</body></html>

时间: 2024-11-10 00:55:03

使用JavascriptExecutor改变页面元素的相关文章

使用JavaScript改变页面元素的属性

在使用HTML制作web页面的过程中,很多时候需要动态的去改变控件的属性,这就需要通过调用JavaScript脚本来实现.下面介绍了本人使用过的一些示例代码. JavaScript脚本改变页面控件的HTML属性. 1.语法: document.getElementById(id).attribute=new value 2.说明: id 控件的ID attribute 控件的HTML属性 new value 新的属性值 3.示例代码: <!DOCTYPE html PUBLIC "-//W

JS 侧栏导航点击定位页面内容位置及滚动条滚动改变导航元素对应状态

近来,小码哥应公司需求方要求,要在未来一个专题页面中加入一个效果:即,侧栏导航点击实现页面内容部分运动到相应位置,以及随着body滚动条滚动使导航按钮效果和页面相应内容对应上的一个效果.起初小码哥做的时候,只实现了点击导航按钮让页面相应的内容定位到和按钮相应的地方(在此可以查看小码哥先前写的关于锚点的文章):而随滚动条实现按钮和内容相对应的效果没有做出来,由于项目专题的时限问题,小码哥借鉴了网上一个案例,将其套在自己的页面就够里,实现了想要的效果. 废话不多说了,直接上码吧,,,,,,,,,,,

iframe提取与改变父页面元素

一:利用jquery方法获得 1:取值 $(window.parent.document).find("#second_navigator").html(); 2:改变父页面元素 $(window.parent.document).find("#second_navigator").html("我是从iframe里传来的值"); 二:javaScript方法 1:取值 window.parent.document.getElementById(&

vue ,v-for循环对象,不是深度克隆? 数据改变了但是页面元素没有更新。问题解决

<div id="app"> <ul > <li v-for="(val,key,idx) in list" > {{key}} {{val}} {{idx}} </li> </ul> </div> <script> var app = new Vue({ el: '#app', created(){ setTimeout(()=>{ this.listp["1&qu

定位页面元素之xpath详解以及定位不到测试元素的常见问题

一.定位元素的方法 id:首选的识别属性,W3C标准推荐为页面每一个元素设置一个独一无二的ID属性, 如果没有且很难找到唯一属性,解决方法:(1)找开发把id或者name加上.如果不行,解决思路可以是: 1. 找到该按钮的特征,例如按钮的文字是 submit: 2. 用XPath定位,可以这样写://button[@value='submit'].(注意是单引号!!) name:和id一致 ClassName:对某些具有相同类的元素一网打尽的好方法 link text 和 partial lin

HTML5 增强的页面元素

一.HTML5 改良的 input 元素的种类 1.<input type="number" id="num1"> var n1 = document.getElementById("num1").valueAsNumber; 七.HTML5 增强的页面元素 1.figure.figcaption <figure> 标签规定独立的流内容(图像.图表.照片.代码等等).figure 元素的内容应该与主内容相关,但如果被删除,

用Javascript获取页面元素的位置

制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的全部面积,就是它的大小.通常情况下,网页的大小由内容和CSS样式表决定. 浏览器窗口的大小,则是指在浏览器窗口中看到的那部分网页面积,又叫做viewport(视口). 很显然,如果网页的内容能够在浏览器窗口中全部显示(也就是不出现滚动条),那么网页的大小和浏览器窗口的大小是相等的.如果不能全部显示,

[转载]用Javascript获取页面元素的位置

原文地址:http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html 制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的全部面积,就是它的大小.通常情况下,网页的大小由内容和CSS样式表决定. 浏览器窗口的大小,则是指在浏览器窗口中看到的那

selenium 总结篇,常见方法和页面元素的操作

今天,总结一下selenium怎么操作web页面常见的元素. 主要有: 上传 alter dialog prompt dialog confirm dialog select list radio box input box checkBox 测试页面如下: 1 <html> 2 <head> 3 <title>selenium处理基本页面元素</title> 4 <style type="text/css"> 5 table