Selenium系列教程-06 图片上传以及Web Element经常使用操做方法

时间 2019-11-17

标签 selenium 系列教程图片上传以及 web element 经常使用方法栏目 HTML 繁體版

原文原文链接

系列资源：javascript

主要内容

对Web Element 经常使用操做方法
如何进行文件上传操做

经常使用的对Web Element操做方法

众所周知，咱们作web UI自动化最主要的部分就是让咱们平时在web页面上的手工点点点操做转化为自动化代码，让机器代替咱们去作这些点点点的工做。那么咱们根据以往的使用统计，这里跟你们简单总结下：css

方法名	解释	示例
click()	点击元素	driver.findElement({id:'xxx'}).click()
clear()	状况输入框	driver.findElement({id:'xxx'}).clear()
sendKeys(value)	输入文本信息	driver.findElement({id:'xxx'}).sendKeys("hello world")
getText()	获取web元素文本值	driver.findElement({id:'xxx'}).getText()

这4个方法是咱们在学习selenium-webdriver基础语法是用到次数应该最频繁的。固然，selenium-webdriver的api还提供更多的其它方法供咱们调用，好比获取web element的css属性，或者web element元素坐标位置等等，你们能够参考selenium-webdriver 的api来进行学习 api 这里就不一一给你们介绍了。html

文件上传操做

咱们在作web自动化的时候，不可避免的会有上传文件的操做，好比更改一个头像这些操做，在上传操做的过程当中，会弹出windows 窗口，这个窗口我么使用开发者工具是定位不到的。以下图：java

百度图片搜索对话框是没法使用开发者工具定位的。在作这类自动化操做的时候，有两种解决方案：

查看页面元素，找到对应的input标签，经过调用sendKeys()方法进行文件上传。
借助专业的工具，如autoit（https://www.autoitscript.com），或者LeanRunner(www.leanpro.cn/leanrunner)

这里，以百度搜索为例，给你们介绍如何使用第1种解决方法。经过开发者工具，咱们定位本地上传图片按钮实际是 input 类型。以下图:node

那么咱们的node.js代码就能够这样来写：

require('chromedriver')
const { Builder } = require('selenium-webdriver')

let driver = new Builder().forBrowser('chrome').build()
driver.get('http://www.baidu.com')

// 点击上传图标，弹出上传界面
driver.findElement({className:"soutu-btn"}).click()

//找到上传元素使用sendKeys() 传入文件路径
driver.findElement({className:'upload-pic'}).sendKeys('./abc.png')
复制代码

小结

若是你们在作web自动化时能够找到对应 input 类型的file控件，能够直接使用第1种方案来解决。若是发现文件上传使用的是一些flash控件， sendKeys() 不能解决问题时，你们能够参考第2种解决方案。关于第2种解决方案，你们能够参考官方文档来作。git

获取更多资讯，能够关注公众号,也能够加QQ群：707467292 进行node.js自动化相关技术交流。github