Puppeteer爬虫实战(二)

216次阅读次阅读
没有评论

连接浏览器

上一篇说到了Puppeteer本质是使用了Chrome Devtools协议控制浏览器,本篇就说说连接方式。

常规Hook浏览器

此方式其实就是需要一个浏览器可执行文件(不同平台需要下载对应平台文件),Puppeteer有两种方式,一种是安装Puppeteer包时下载的文件,另一种是自己下载文件通过环境变量指向文件路径就可以了(上篇文章有详细介绍),下面的演示为了视频我使用headless: false开启了FullHead模式。
在vscode里面使用export可查看环境变量

Puppeteer爬虫实战(二)


以上是我习惯的环境变量设置(使用launch参数executablePath也可达到同样效果,个人觉得环境变量更灵活),下面一段脚本来看看效果。

<code><strong>const</strong> puppeteer = require('puppeteer');<br>(<strong>async</strong> () => {  <strong>const</strong> browser = <strong>await</strong> puppeteer.launch({ headless: false });  <strong>const</strong> page = <strong>await</strong> browser.newPage();  <strong>await</strong> page.goto('https://www.cnblogs.com/');  <strong>await</strong> page.screenshot({ path: 'cnblogs.png' });<br>  <strong>await</strong> browser.close();})();</code>
Puppeteer爬虫实战(二)

使用已经存在的浏览器

首先开启浏览器远程调试,配置端口

Puppeteer爬虫实战(二)


在浏览器的快捷方式加上 --remote-debugging-port=9222 即可,详细配置
下面一段脚本来看看效果

<code><strong>const</strong> puppeteer = require('puppeteer');<br>(<strong>async</strong> () => {  <strong>const</strong> browser = <strong>await</strong> puppeteer.connect({    browserWSEndpoint: "ws://localhost:9222/devtools/browser/60442671-d10c-4236-b4e1-41c5f1d28b87",    headless: false  });  <strong>const</strong> page = <strong>await</strong> browser.newPage();  <strong>await</strong> page.goto('https://www.cnblogs.com/');  <strong>await</strong> page.screenshot({ path: 'cnblogs.png' });<br>  <em>// await browser.close();</em>})();</code>

上面的代码可以看到browserWSEndpoint指定了一个地址,这个地址可以从下面获取

Puppeteer爬虫实战(二)


使用了Edge,嘿嘿🤭
上图看到了一些浏览器信息,主要是为了拿到browserWSEndpoint,切记这个地址是你打开的那个浏览器实例,也就是说每次打开后这个地址都会不同,测试的时候不要打开复制出来就关闭了,这样就找不到这个浏览器实例了,并且上面的信息在HeadLess与FullHead模式中式不太一样的。

Puppeteer爬虫实战(二)

现在已经能看到,Puppeteer的基本工作原理,下一篇将会介绍如何针对一个网站进行数据抓取,详细对puppeteer进行设置。目前Puppeteer的优势已经很明显了,那就是可以作到在服务端渲染(后面的文章会介绍如何在容器内运行,并且实现FullHead模式),当然selenium也能实现。皮皮虾😄。

老三的古代
版权声明:本站原创文章,由老三的古代2021-01-30发表,共计5002字。
转载提示:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
载入中...