抓取动态网页(完整的使用方式如下最近更新Workflow命令行帮助工具(组图))

　　抓取动态网页(完整的使用方式如下最近更新Workflow命令行帮助工具(组图))

　　现在越来越多的网页使用前端渲染页面，这给抓取工作带来了很多麻烦。通过通常的方法，只会得到一堆js方法或者api接口。当然，我们不希望每个网站都那么努力地探索他们的 api。

　　那有什么好办法，叫全能的谷歌老爸，puppeteer可以模拟chrome打开网页，还可以截图转换成pdf文件。当然，抓取数据不是问题，因为截图的前提是模拟前端渲染。效果就像实际打开网站。

　　本文文章主要介绍如何通过puppeteer进行简单爬行

　　下载

　　1

　　$ yarn add puppeteer

　　用

　　先看一个简单的例子，我们还是不问为什么直接运行代码

　　1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

　　const puppeteer = require('puppeteer');

(async () => {

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.goto('https://www.instagram.com/nike/');

// Get the "viewport" of the page, as reported by the page.

const dimensions = await page.evaluate(() => {

return {

width: document.documentElement.clientWidth,

height: document.documentElement.clientHeight,

title: document.title

};

});

console.log('Dimensions:', dimensions);

await browser.close();

})();

　　运行后，你会发现它打印出了文档的宽度、高度和标题的各个属性。现在让我们分析一下这段代码的作用。

　　分析选择器

　　抓取页面时，可以借助谷歌浏览器的开发者工具直接复制选择器

　　

　　我们要获取这个页面的头像信息。从开发者工具复制的选择器如下

　　1

　　#react-root > section > main > article > header > div > div > div > img

　　这时候我们就可以直接使用了

　　1

2

3

　　let avatarSelector = '#react-root > section > main > article > header > div > div > div > img'

let avatarDom = document.querySelector(avatarSelector)

avatar = avatarDom.src

　　这样我们就可以很方便的分析某个dom元素了。当然，这种粘贴复制也不是万能的。很多时候我们需要对页面样式进行分析，才能找到更好的分析方法。

　　完整的用法如下

　　1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

　　

const puppeteer = require('puppeteer');

(async () => {

const browser = await puppeteer.launch({headless: false});

const page = await browser.newPage();

await page.setJavaScriptEnabled(true);

await page.goto('https://www.instagram.com/nike/');

// Get the "viewport" of the page, as reported by the page.

const dimensions = await page.evaluate(() => {

// avatar

let avatarSelector = '#react-root > section > main > article > header > div > div > div > img'

let avatarDom = document.querySelector(avatarSelector)

let avatar = ''

if( avatarDom ){

avatar = avatarDom.src

}

// name

let nameSelector = '#react-root > section > main > article > header > section > div._ienqf > h1'

let nameDom = document.querySelector(nameSelector)

let name = ''

if( nameDom ){

name = nameDom.innerText;

}

return {

avatar: avatar,

name: name,

};

});

console.log('Dimensions:', dimensions);

await browser.close();

})();

　　最近更新

　　Alfred Workflow 命令行帮助工具

　　最近阅读

　　Go 判断数组中是否收录某项

　　Vim 高级功能 vimgrep 全局搜索文件

　　申请北京工作居留许可的一些细节

　　Go 语法错误：函数体外的非声明语句

　　Mac电脑查看字体文件位置