Selenium之常见元素处理系列三--upFile(上传文件),应用JavaScript

我们实现慕课网的上传头像功能

如下所示:

//注意:1.必须点击更换头像这个按钮系统才会弹出更换头像这个弹出框，而更换头像按钮只有鼠标移动到头像处才可见,即这个按钮默认情况下是隐藏的2.出现更换头像弹出框后,图像更改分为"换一换"和"上传头像"，前者是系统随机产生，后者我们自己设定头像//这两点注意事项对我们接下来的操作很有帮助

踩坑实战演示eg:

//进入慕课网并登陆后，在进入个人设置后，我们找到了并在代码中实现了点击"更换头像"按钮,原则上之后会弹出更换头像的弹出框,但是最后一步并没有弹出弹出框，一起来看看

代码：

package com.wushuai.test;import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;import org.openqa.selenium.chrome.ChromeDriver;public class UpFileTest {    public WebDriver driver;    //初始化chrome浏览器驱动    public void initDriver()     {        System.setProperty("webdriver.chrome.driver", "D:\\java\\chromedriver-32\\chromedriver.exe");        //初始化chrome浏览器        driver=new ChromeDriver();        driver.get("http://www.imooc.com/user/newlogin/from_url/");        //屏幕最大化        driver.manage().window().maximize();    }    /*     * 输入用户名与密码并且登录     *      * */    public void inputBox() {        //输入账号        driver.findElement(By.name("email")).sendKeys("[e-mail]");        try {            //睡眠两秒            Thread.sleep(2000);        } catch (InterruptedException e) {            // TODO Auto-generated catch block            e.printStackTrace();        }        //清除账号        driver.findElement(By.name("email")).clear();        String s=driver.findElement(By.name("email")).getAttribute("placeholder");        //打印信息        System.out.println(s);        /*         *          * 输入用户名与密码并点击登录         *          * 这里主要是为了在个人设置操作打下铺垫         * */        driver.findElement(By.name("email")).sendKeys("[e-mail]");        driver.findElement(By.name("password")).sendKeys("123456");        driver.findElement(By.className("btn-red")).click();;        try {            //睡眠两秒            Thread.sleep(2000);        } catch (InterruptedException e) {            // TODO Auto-generated catch block            e.printStackTrace();        }    }    /*     * 上传文件     * */    public void upHeader() {        //跳转到个人信息页面        driver.get("http://www.imooc.com/user/setbindsns");        try {            Thread.sleep(2000);        } catch (InterruptedException e) {            // TODO Auto-generated catch block            e.printStackTrace();        }        //找到并点击更换头像按钮        driver.findElement(By.className("js-avator-link")).click();    }    public static void main(String[] args) {        // TODO Auto-generated method stub        UpFileTest uf=new UpFileTest();        uf.initDriver();        uf.inputBox();        uf.upHeader();    }}

//之后Eclipse会报错:element not visible（元素不可见）并且指定到上述"上传文件注释"中的代码://找到并点击更换头像按钮        driver.findElement(By.className("js-avator-link")).click();//也就是说我们这行代码我们看似是执行了"点击更换头像按钮这个操作",但实际上我们并没有触发这个按钮,就是没有找到

思路:这个时候我们可以看看最上面"上传头像的Gif图"结合"注意事项1"我们应该让这个"更换头像"按钮能够自己显示出来,而不是需要鼠标移动到头像处才能显示，这里就涉及到"JavaScript"

解决路径走一波:

打开Chrome浏览器进入到慕课网的个人设置页面，如下图:

右击鼠标右键选中"检查"选项,跳转页面后切换到"Console"，如下图:

接下来我们看一看"FireBug"页面中"更换头像"的具体信息//注意:下图中最靠上的红色箭头指定的 那一行有一个"-30px"的属性，这是导致"更换头像"按钮不可见的原因,我们可以打比方认为"更换头像"被埋入了地下"-30px"的地方,那么如果想要可见,我们就最好调整它的位置,用到"JavaScript"图片模糊，有兴趣可以通过FireBug自行查看

首先我们应该把埋在地下的"-30px"提上来,借助下图的工具

下图代码解读:document.getElementsByClassName('js-avator-link')[a.js-avator-link]length: 10: a.js-avator-link__proto__: HTMLCollectiondocument.getElementsByClassName('js-avator-link').styleundefineddocument.getElementsByClassName('js-avator-link')[0].styleCSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}document.getElementsByClassName('js-avator-link')[0].style.bottom='0'"0"

document.getElementsByClassName('js-avator-link')-className下的具体信息document.getElementsByClassName('js-avator-link')[0].style-该类下的样式,加[0]代表唯一性document.getElementsByClassName('js-avator-link')[0].style.bottom='0'-"设置样式距离底部距离为0"

修改完后我们可以尝试一下,看看是否成功需要添加一些js代码:

初步更改后的代码:

package com.wushuai.test;import org.openqa.selenium.By;import org.openqa.selenium.JavascriptExecutor;import org.openqa.selenium.WebDriver;import org.openqa.selenium.chrome.ChromeDriver;public class UpFileTest {    public WebDriver driver;    //初始化chrome浏览器驱动    public void initDriver()     {        System.setProperty("webdriver.chrome.driver", "D:\\java\\chromedriver-32\\chromedriver.exe");        //初始化chrome浏览器        driver=new ChromeDriver();        driver.get("http://www.imooc.com/user/newlogin/from_url/");        //屏幕最大化        driver.manage().window().maximize();    }    /*     * 输入用户名与密码并且登录     *      * */    public void inputBox() {        //输入账号        driver.findElement(By.name("email")).sendKeys("[e-mail]");        try {            //睡眠两秒            Thread.sleep(2000);        } catch (InterruptedException e) {            // TODO Auto-generated catch block            e.printStackTrace();        }        //清除账号        driver.findElement(By.name("email")).clear();        String s=driver.findElement(By.name("email")).getAttribute("placeholder");        //打印信息        System.out.println(s);        /*         *          * 输入用户名与密码并点击登录         *          * 这里主要是为了在个人设置操作打下铺垫         * */        driver.findElement(By.name("email")).sendKeys("[e-mail]");        driver.findElement(By.name("password")).sendKeys("123456");        driver.findElement(By.className("btn-red")).click();;        try {            //睡眠两秒            Thread.sleep(2000);        } catch (InterruptedException e) {            // TODO Auto-generated catch block            e.printStackTrace();        }    }    /*     * 上传文件     * */    public void upHeader() {        //跳转到个人信息页面        driver.get("http://www.imooc.com/user/setbindsns");        try {            Thread.sleep(2000);        } catch (InterruptedException e) {            // TODO Auto-generated catch block            e.printStackTrace();        }        //让我们的"更改头像"按钮显示出来，即设定它的样式距离底部距离为0        String jsString="document.getElementsByClassName('js-avator-link')[0].style.bottom='0'";        //将driver(WebDriver)转换为JavascriptExecutor类型        JavascriptExecutor js=(JavascriptExecutor)driver;        //执行修改的元素        js.executeScript(jsString);        //休眠两秒        try {            Thread.sleep(2000);        } catch (InterruptedException e) {            // TODO Auto-generated catch block            e.printStackTrace();        }        //找到并点击更换头像按钮        driver.findElement(By.className("js-avator-link")).click();    }    public static void main(String[] args) {        // TODO Auto-generated method stub        UpFileTest uf=new UpFileTest();        uf.initDriver();        uf.inputBox();        uf.upHeader();    }}

然而运行之后它还是报错:element not visible

//问题到底出在哪里？其实这个错误主要是因为"元素定义错误"，即我们在上面代码区"上传文件"中的 String jsString="document.getElementsByClassName('js-avator-link')[0].style.bottom='0'";的"ClassName"指定错误, //我们原意是为了消除"-30px"为0,但是我们指定的className确实第二个红色箭头的"className"，要知道"-30px"这个属性可是在第一个红色箭头内的,所以我们应该指定className为"update-avator"，而不是"js-avator-link" 更改之后就不再报错了详细看如下图: 

最终正确代码:

package com.wushuai.test;import org.openqa.selenium.By;import org.openqa.selenium.JavascriptExecutor;import org.openqa.selenium.WebDriver;import org.openqa.selenium.chrome.ChromeDriver;public class UpFileTest {    public WebDriver driver;    //初始化chrome浏览器驱动    public void initDriver()     {        System.setProperty("webdriver.chrome.driver", "D:\\java\\chromedriver-32\\chromedriver.exe");        //初始化chrome浏览器        driver=new ChromeDriver();        driver.get("http://www.imooc.com/user/newlogin/from_url/");        //屏幕最大化        driver.manage().window().maximize();    }    /*     * 输入用户名与密码并且登录     *      * */    public void inputBox() {        //输入账号        driver.findElement(By.name("email")).sendKeys("[e-mail]");        try {            //睡眠两秒            Thread.sleep(2000);        } catch (InterruptedException e) {            // TODO Auto-generated catch block            e.printStackTrace();        }        //清除账号        driver.findElement(By.name("email")).clear();        String s=driver.findElement(By.name("email")).getAttribute("placeholder");        //打印信息        System.out.println(s);        /*         *          * 输入用户名与密码并点击登录         *          * 这里主要是为了在个人设置操作打下铺垫         * */        driver.findElement(By.name("email")).sendKeys("[e-mail]");        driver.findElement(By.name("password")).sendKeys("123456");        driver.findElement(By.className("btn-red")).click();;        try {            //睡眠两秒            Thread.sleep(2000);        } catch (InterruptedException e) {            // TODO Auto-generated catch block            e.printStackTrace();        }    }    /*     * 上传文件     * */    public void upHeader() {        //跳转到个人信息页面        driver.get("http://www.imooc.com/user/setbindsns");        try {            Thread.sleep(2000);        } catch (InterruptedException e) {            // TODO Auto-generated catch block            e.printStackTrace();        }        //让我们的"更改头像"按钮显示出来，即设定它的样式距离底部距离为0        String jsString="document.getElementsByClassName('update-avator')[0].style.bottom='0'";        //将driver(WebDriver)转换为JavascriptExecutor类型        JavascriptExecutor js=(JavascriptExecutor)driver;        //执行修改的元素        js.executeScript(jsString);        //休眠两秒        try {            Thread.sleep(2000);        } catch (InterruptedException e) {            // TODO Auto-generated catch block            e.printStackTrace();        }        //找到并点击更换头像按钮        driver.findElement(By.className("js-avator-link")).click();        //找到上传文件的id并且导入我们即将更换的头像的路径        driver.findElement(By.id("upload")).sendKeys("C:\\Users\\Administrator\\Desktop\\ss.jpg");        //点击确定按钮        driver.findElement(By.className("moco-btn-blue")).click();    }    public static void main(String[] args) {        // TODO Auto-generated method stub        //创建一个对象        UpFileTest uf=new UpFileTest();        //调用chrome浏览器驱动初始化方法        uf.initDriver();        //调用登录方法        uf.inputBox();        //调用上传文件方法        uf.upHeader();    }}

注意事项

1.注意javascript的应用原理与方式2.注意隐藏按钮等的解决方法3.注意className的识别，防止误选