<iframe src="//player.bilibili.com/player.html?aid=584315539&bvid=BV1S64y1c7o4&cid=228574289&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="width: 100%; height: 500px; max-width: 100%；align:center; padding:20px 0;"> </iframe>

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，不止于前端，还有更丰富的知识

谢谢大家支持，拜拜