《手把手教你》系列技巧篇(五十三)-java+ selenium自动化测试-上传文件-上篇(详细教程)
1.简介
在实际工作中,我们进行web自动化的时候,文件上传是很常见的操作,例如上传用户头像,上传身份证信息等。所以宏哥打算按上传文件的分类对其进行一下讲解和分享。
2.为什么selenium没有提供API?
想必小伙伴们或者童鞋们一定很好奇,既然上传文件在自动化这么常见而且经常用到,那么为什么Selenium的webdriver为什么不提供方法(API),宏哥这里解释一下原因:因为上传文件需要打开window窗口,webdriver是无法对window的控件操作的,换句话说就是:selenium无法识别非web的控件,上传文件窗口为系统自带,无法识别窗口元素。所以没有提供方法,需要我们换个思路去上传文件。
3.上传文件分类
首先,我们要区分出上传按钮的种类,大体上可以分为两种,一种是input框,另外一种就比较复杂,通过js、flash等实现,标签非input。
上传文件有两种场景:input控制上传和非input控件上传。大多数情况都是input控件上传文件,只有非常少数的使用自定义的非input上传文件。今天宏哥这一篇文章就用来介绍input控件上传文件。
4.input控件上传文件
查看上传文件的页面元素标签,如果为input表明是通过input控件上传文件。我们可以直接采用直接使用sendKeys()方法上传文件,这个比较简单。
示例代码:
driver.findElement(By.id("attachment")).sendKeys("D:\\test.txt");
5.项目实战
宏哥找了好久没有找到,宏哥就参照网上的input上传修改给一个小demo,进行自动化测试给大家演示一下,主要是知道思路和测试流程就行,其他的也是一样的,无非是需要你登录后,然后再上传文件。
思路
1.定位到选择文件的输入框
2.找到这个输入框元素后使用sendKeys()的方法将你所需上传文件的绝对路径名输入进去,就达到了选择文件的目的。
5.1demo页面的HTML代码
1.html代码:upload_file.html。如下:
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>upload_file</title> <script type="text/javascript" async="" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" /> <style type="text/css"> #result{ width: 1000px; height:300px; border:1px solid #eee; } #result img{ width: 200px; } input{ width: 70px; margin-top: 10px; } @-moz-document url-prefix() { input { width:65px; } }/*单独对火狐进行设置*/ </style> <script type="text/javascript"> var form = new FormData();//通过HTML表单创建FormData对象 var url = '127.0.0.1:8080/' function selectFile(){ var files = document.getElementById('pic').files; console.log(files[0]); if(files.length == 0){ return; } var file = files[0]; //把上传的图片显示出来 var reader = new FileReader(); // 将文件以Data URL形式进行读入页面 console.log(reader); reader.readAsBinaryString(file); reader.onload = function(f){ var result = document.getElementById("result"); var src = "data:" + file.type + ";base64," + window.btoa(this.result); result.innerHTML = '<img src ="'+src+'"/>'; } console.log('file',file); /////////////////// form.append('file',file); console.log(form.get('file')); } </script> </head> <body> <div class="row-fluid"> <div class="span6 well"> <h3>upload_file</h3> <div id = "result"></div> <input id="pic" type="file" name = 'pic' accept = "image/*" onchange = "selectFile()" /> </div> </div> </body> <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> </html>
5.2代码设计
5.3参考代码
package lessons; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; /** * @author 北京-宏哥 * * @公众号:北京宏哥 * * 《手把手教你》系列技巧篇(五十三)-java+ selenium自动化测试-上传-上篇(详细教程) * * 2021年12月10日 */ public class Upload { public static void main(String[] args) throws InterruptedException { System.setProperty("webdriver.gecko.driver", ".\\Tools\\chromedriver.exe"); WebDriver driver = new ChromeDriver(); driver.manage().window().maximize(); driver.get("file:///C:/Users/DELL/Desktop/test/upload_file.html"); Thread.sleep(1000); driver.findElement(By.cssSelector("input[type=file]")).sendKeys("C:/Users/DELL/Desktop/test/五星红旗.png"); Thread.sleep(1000); System.out.println("browser will be close"); driver.quit(); } }
5.4运行代码
1.运行代码,右键Run AS->Java Appliance,控制台输出,如下图所示:
2.运行代码后电脑端的浏览器的动作,如下小视频所示:
6.小结
好了,今天时间也不是很早了,宏哥今天就讲解和分享到这里,感谢您耐心的阅读,下一篇讲解非input控件是如何上传文件的。
感谢您花时间阅读此篇文章,如果您觉得这篇文章你学到了东西也是为了犒劳下博主的码字不易不妨打赏一下吧,让博主能喝上一杯咖啡,在此谢过了!
如果您觉得阅读本文对您有帮助,请点一下左下角“推荐”按钮,您的
本文版权归作者和博客园共有,来源网址:https://www.cnblogs.com/du-hong 欢迎各位转载,但是未经作者本人同意,转载文章之后必须在文章页面明显位置给出作者和原文连接,否则保留追究法律责任的权利!
公众号(关注宏哥)                                                                                 客服微信
![个人微信公众号](https://img2018.cnblogs.com/common/1741949/201911/1741949-20191119095948011-608816619.png)
![个人微信](https://img2018.cnblogs.com/common/1741949/201911/1741949-20191106101257091-849954564.png)