今天接着介绍Puppeteer
看过上篇的同学,应该都会用Puppeteer的高级爬虫功能了,附上姐妹篇链接:https://segmentfault.com/a/11...
除了爬虫之外,Puppeteer也可以帮你完成一些页面上的重复操作,也可以当作UI自动化测试!
开门见山,今天的目标是,爬取SF头条前端的文章,自动推荐到掘金!!!
废话不多说,直接上动图看效果(图很大,请稍等)
SF可能比较慢,直接看github图片地址,录制了视频,但是没发现比较好的工具:https://raw.githubusercontent...
下面就来介绍具体流程
1. 到sf获取最新的前端文章
page.goto跳转到https://segmentfault.com/news...
接着分析文章的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写好了....
代码如下:
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. 项目运行
git clone https://github.com/zhentaoo/p...
npm install (puppeteer在win下100+M、mac下70+M,请耐心等候)
npm test
结语
为了效果展示,这里使用的headless: false模式,实际使用时可以同时开n个page,模拟操作,大家可以尝试改改,也可以给我提PR
目前已经带领大家,使用Puppeteer完成爬虫 和 UI自动化测试,接下来可能会出第三篇,应该会是关于前端性能分析
其实Puppeteer的应用场景远不止这些,大家也可以使用它在各自的领域大放异彩!!!