工具类

前端自动化测试工具Puppeteer实战:上传图片

特别声明:如果您喜欢小站的内容,可以点击 终身VIP¥188.00元 包年VIP¥88.00元 包季VIP¥28.00 包月VIP¥10.00元 进行全站阅读。 如果您对付费阅读有任何建议或想法,欢迎发送邮件至: 864479410@qq.com,或添加QQ:864479410(^_^)

Hello,大家好,这里是web秀,我是Javan

上一期视频

咱们用自动化测试工具Puppeteer登录了github

这期视频,咱们利用百度识图功能

试试文件上传功能

大家不要先有心里压力

代码很简单,而且非常容易理解

ok,咱们先新建一个js文件

把之前的代码copy过来

删除掉之前的业务的代码

然后我们copy百度的url

粘贴到要访问的url上面

然后F12

找到百度的上传图片按钮dom选择器

用page.$方法获取到

并执行点击事件.click方法

可以看到,点击上传图片按钮后

并不是让咱们直接选择图片

而是弹出一个popup,继续点击按钮

才能选择文件

所以,继续找到popup上面的“选择文件”按钮

获取到它的dom选择器

我们可以用ctrl+f

搜索一下选择器在当前页面是否唯一

一定要保证唯一性

同理用page.$方法,然后用获取到的ElementHandle

调用uploadFile方法

先来看看uploadFile方法文档

uploadFile方法就只需要一个参数,就是图片的路径

ok,咱们就用之前生成截图的图片

运行调试一下,node *.js文件即可

打开了百度网址,也触发了小相机按钮

但是并没有继续走下去

看看是否报错

果然,报错了: 'uploadFile' of null

应该是我们在用page.$获取“选择文件”按钮时

dom元素还未获取到,就调用了uploadFile

导致的报错

咱们就需要让其等待获取成功,再来调用uploadFile

Puppeteer刚好有这样的方法waitForSelector

这个方法的解释

等待指定的选择器匹配的元素出现在页面中

如果调用此方法时已经有匹配的元素,那么此方法立即返回

如果指定的选择器在超时时间后扔不出现,此方法会报错

这样我们再试一次

ok,图片上传成功

但是图片怎么有点不雅了

换个chrome图片,重新运行一下

百度识图成功,知道咱们上传的是chrome

还给咱们解释了一波

好了,这期视频就到到此结束了

这里需要注意的是,如果元素是通过某个事件

才显示到页面上的,就不要直接获取了

会报错,可以用waitForSelector方法

等待元素出现后,再返回,就ok啦

最后,感谢大家的观看

这里是web秀,我是Javan,不止于前端,还有更丰富的知识

谢谢大家支持,拜拜

(1)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注