黄兵的个人博客

自动爬取SF文章并推荐到掘金--Puppeteer再探

看过上篇的同学，应该都会使用Puppeteer的高级爬虫功能了，附上姐妹篇链接：
爬取并生成《ES6标准入门》PDF–Puppeteer初探
除了爬虫之外，也可以使用Puppeteer完成页面上任意操作，即: 可以用来做UI自动化测试
开门见山，今天的目标是，爬取SF的热门文章，自动推荐到掘金！！！

简要提下Puppeteer的应用场景

1. 屏幕快照，打印PDF
2. 高级爬虫（有别于传统爬虫.使用Puppeteer可以拿到渲染后的效果，传统爬虫相当于只能拿到http response）
3. UI自动化测试（使用Puppeteer可以模拟用户操作）
4. 页面性能分析

废话不多说，直接上动图/视频看效果

GIF图片比较大，如果不能加载成功，也可以到微博看下录制的视频
http://weibo.com/tv/v/FiHMz7dcq?fid=1034:dcc08a8eee118263f6071fb6fafcc9a9

下面就来介绍具体流程

1. 爬取 segmentfault 前30篇热门文章

• 跳转到https://segmentfault.com/news/frontend
• 接着分析SF首页的Dom结构，爬取每篇文章的链接
• 然后取出每篇文章最重要的 href，title 等信息
• 具体代码如下：

  1 2 3 4 5 6 7 8 9 10

  await page.goto('https://segmentfault.com/news/frontend') var SfFeArticleList = await page.evaluate(() => { var list = [...document.querySelectorAll('.news__list .news__item-title a')] return list.map(el => { return {href: el.href.trim(), title: el.innerText} }) }) await page.screenshot({path: './sf-juejin/sf.png', type: 'png'});

2. 登录掘金 (这里我事先注册了个测试账号,大家可以替换成自己的)

• 跳转到掘金，模拟点击登录按钮
• 接着，会弹出一个的登录dialog，模拟输入用户名密码
• 模拟点击登录，稍等….嗯…掘金应该把cookie写好了….
• 代码如下：

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  await page.goto('https://juejin.im') var login = await page.$('.login') await login.click() var loginPhoneOrEmail = await page.$('[name=loginPhoneOrEmail]') await loginPhoneOrEmail.click() await page.type('18516697699@163.com', {delay: 20}) var password = await page.$('[placeholder=请输入密码]') await password.click() await page.type('123456', {delay: 20}) var authLogin = await page.$('.panel .btn') await authLogin.click()

3.推荐文章（使用第一步从SF爬取的文章信息）

• 模拟点击推荐文章 按钮 “＋”
• 这时从SF拿到的文章信息就派上用场了，随机取出一篇: Math.floor(Math.random() * 30)
• 模拟填写推荐表单，点击发布
• 嗯，有时会提示该文章已被分享，那就换一篇吧，再执行一次。
• 代码如下

  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

  var seed = Math.floor(Math.random() * 30) var theArtile = SfFeArticleList[seed] var add = await page.$('.main-nav .ion-android-add') await add.click() var shareUrl = await page.$('.entry-form-input .url-input') await shareUrl.click() await page.type(theArtile.href, {delay: 20}) await page.press('Tab') await page.type(theArtile.title, {delay: 20}) await page.press('Tab') await page.type(theArtile.title, {delay: 20}) await page.evaluate(() => { let li = [...document.querySelectorAll('.category-list-box .category-list .item')] li.forEach(el => { if (el.innerText == '前端') el.click() }) }) var submitBtn = await page.$('.submit-btn') await submitBtn.click()

项目Repo && 运行

1. git clone https://github.com/zhentaoo/puppeteer-deep
2. npm install (puppeteer在win下100+M、mac下70+M，请耐心等候)
3. npm test

结语

1. 为了效果展示，这里使用的headless: false模式，实际使用时可以同时开n个page，模拟操作，大家可以尝试改改，也可以给我提PR
2. 目前已经带领大家，使用Puppeteer完成爬虫 和 UI自动化测试，接下来可能会出第三篇，应该会是关于前端性能分析
3. 其实Puppeteer的应用场景远不止这些，大家也可以使用它在各自的领域大放异彩！！！
4. 希望掘金小编不会打我….