Puppeteer再探自动把SF文章推荐到掘金

今天接着介绍Puppeteer

看过上篇的同学，应该都会用Puppeteer的高级爬虫功能了，附上姐妹篇链接：https://segmentfault.com/a/11&＃8230;

除了爬虫之外，Puppeteer也可以帮你完成一些页面上的重复操作，也可以当作UI自动化测试！

开门见山，今天的目标是，爬取SF头条前端的文章，自动推荐到掘金！！！

github：https://github.com/zhentaoo/p&＃8230;

废话不多说，直接上动图看效果（图很大，请稍等）

SF可能比较慢，直接看github图片地址，录制了视频，但是没发现比较好的工具：https://raw.githubusercontent&＃8230;

下面就来介绍具体流程

1. 到sf获取最新的前端文章

page.goto跳转到https://segmentfault.com/news&＃8230;

接着分析文章的Dom结构，获取每篇文章的链接

然后取出最重要的 href，title 信息

具体代码如下：

try {
await page.goto('https://segmentfault.com/news/frontend')
await timeout(1000)
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}
})
})
console.log('SfFeArticleList:', SfFeArticleList);
await page.screenshot({path: './sf-juejin/sf.png', type: 'png'});
} catch (e) {
console.log('sf err:', e);
}

2. 到掘金并登录，这里我事先注册了个测试账号

先跳转到掘金，一样分析页面结构，模拟点击登录按钮

接着，会弹出一个的登录dialog，用page.type模拟输入用户名密码

最后，点击登录，这时JJ应该把COOKIE写好了&＃8230;.

代码如下：

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

3. 随机从SF拿到的文章推荐到掘金

登录成功后，会进入用户界面

模拟点击推荐文章推荐按钮“＋”

?，这时从SF拿到的文章信息就派上用场了，随机取出一篇

模拟填写推荐表单，然后点击发布

嗯，有时会提示该文章已被分享，那就换一篇吧，再执行一次。

代码如下

try {
await timeout(2500)
var seed = Math.floor(Math.random() * 30)
var theArtile = SfFeArticleList[seed]
var add = await page.$('.main-nav .ion-android-add')
await add.click()
await timeout(2500)
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()
} catch (e) {
await page.screenshot({path: './sf-juejin/err.png', type: 'png'});
}

4. 项目运行

1. git clone https://github.com/zhentaoo/p&＃8230;

2. npm install (puppeteer在win下100+M、mac下70+M，请耐心等候)

3. npm test

结语

为了效果展示，这里使用的headless: false模式，实际使用时可以同时开n个page，模拟操作，大家可以尝试改改，也可以给我提PR

目前已经带领大家，使用Puppeteer完成爬虫 和 UI自动化测试，接下来可能会出第三篇，应该会是关于前端性能分析

其实Puppeteer的应用场景远不止这些，大家也可以使用它在各自的领域大放异彩！！！