puppeteer 教程（4） ----入门例子（访问百度，并截图）

我会带着你远行 2021-11-01 12:28 434阅读 0赞

## 目标 ##

经过前几篇啰里啰嗦的介绍与环境的搭建，下面我们正式开始入手一个例子开始我们的爬虫之旅

#### 主要学习以下知识点 ####

<table> 
 <thead> 
  <tr> 
   <th>方法名称</th> 
   <th>方法说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>puppeteer.launch</td> 
   <td>启动浏览器</td> 
  </tr> 
  <tr> 
   <td>page.goto(url)</td> 
   <td>打开指定网站</td> 
  </tr> 
  <tr> 
   <td>page.screenshot</td> 
   <td>把当前页面截图</td> 
  </tr> 
 </tbody> 
</table>

详细api 可参考  
https://blog.csdn.net/mengxiangxingdong/article/details/99237204

## 开始 ##

### 1.代码 ###

当前例子位于项目结构  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmd4aWFuZ3hpbmdkb25n_size_16_color_FFFFFF_t_70]  
代码：

/*
    基础的方法演示 与注释
     */
    const puppeteer = require('puppeteer'); //引入puppeteer库
    
    (async () => {
        
        const browser = await puppeteer.launch({
            //启动浏览器
            headless: false,   //代码运行时打开浏览器方便观察
            // devtools:true   //打开f12界面
        });
        const page = await browser.newPage();  //打开浏览器的一个tab 页
        await page.goto('https://www.baidu.com/');  //访问网址 https://www.baidu.com/
        await page.screenshot({
        path: 'screenshot/example.png'});  //将当前视图所见截图
        await page.waitFor(5 * 1000); //睡眠5s'
        await browser.close();  //关闭浏览器
    })();

### 1.2运行效果 ###

![在这里插入图片描述][20190811214222496.gif]

## 遇到的问题参考解决方案 ##

1.WebStorm编写代码有些库不提示的方法，例如puppeteer 相关的js么有提示  
https://blog.csdn.net/mengxiangxingdong/article/details/99102525  
2.ERROR: Failed to download Chromium r609904! Set “PUPPETEER\_SKIP\_CHROMIUM\_DOWNLOAD” env variable t…  
https://blog.csdn.net/weixin\_33721427/article/details/88452829

## 参考博客 ##

https://blog.csdn.net/wd1024719195/article/details/79914030

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmd4aWFuZ3hpbmdkb25n_size_16_color_FFFFFF_t_70]: /images/20211101/73798c0117154c69b3f3089ce1abd7e4.png
[20190811214222496.gif]: /images/20211101/7af2c7c2ac924788a78f2012dc7d1294.png