使用JavascriptExecutor改变页面元素

Posted 2020-08-08

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用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>

以上是关于使用JavascriptExecutor改变页面元素的主要内容，如果未能解决你的问题，请参考以下文章

Selenium JavascriptExecutor 详解

使用 JavascriptExecutor 发送密钥并点击网页元素

通过 Selenium WebDriver 从 JavascriptExecutor 接口使用 executeScript 方法时，arguments[0] 和 arguments[1] 是啥意思？

JavascriptExecutor（Selenium WebDriver C#）不断返回空对象

通过selenium javascriptExecutor访问shadow DOM Elements（聚合物）