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

如下所示:

//注意: 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("123456@qq.com"); 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("m13031155057@163.com"); 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__: HTMLCollection document.getElementsByClassName('js-avator-link').style undefined document.getElementsByClassName('js-avator-link')[0].style CSSStyleDeclaration {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("123456@qq.com"); 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("m13031155057@163.com"); 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("123456@qq.com"); 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("m13031155057@163.com"); 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的识别，防止误选