摘要：今天接着介绍看过上篇的同学，应该都会用的高级爬虫功能了，附上姐妹篇链接除了爬虫之外，也可以帮你完成一些页面上的重复操作，也可以当作自动化测试开门见山，今天的目标是，爬取头条前端的文章，自动推荐到掘金废话不多说，直接上动图看效果图很大，请稍等
今天接着介绍Puppeteer
废话不多说，直接上动图看效果（图很大，请稍等）看过上篇的同学，应该都会用Puppeteer的高级爬虫功能了，附上姐妹篇链接：https://segmentfault.com/a/11...
除了爬虫之外，Puppeteer也可以帮你完成一些页面上的重复操作，也可以当作UI自动化测试！
开门见山，今天的目标是，爬取SF头条前端的文章，自动推荐到掘金！！！
github：https://github.com/zhentaoo/p...
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的应用场景远不止这些，大家也可以使用它在各自的领域大放异彩！！！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/84836.html
摘要：本文将介绍如何使用和抓取主流的技术博客文章，然后用搭建一个小型的技术文章聚合平台。是谷歌开源的基于和的自动化测试工具，可以很方便的让程序模拟用户的操作，对浏览器进行程序化控制。相对于，是新的开源项目，而且是谷歌开发，可以使用很多新的特性。 背景 说到爬虫，大多数程序员想到的是scrapy这样受人欢迎的框架。scrapy的确不错，而且有很强大的生态圈，有gerapy等优秀的可视化界面。但...
摘要：本文将介绍如何使用和抓取主流的技术博客文章，然后用搭建一个小型的技术文章聚合平台。是谷歌开源的基于和的自动化测试工具，可以很方便的让程序模拟用户的操作，对浏览器进行程序化控制。相对于，是新的开源项目，而且是谷歌开发，可以使用很多新的特性。 背景 说到爬虫，大多数程序员想到的是scrapy这样受人欢迎的框架。scrapy的确不错，而且有很强大的生态圈，有gerapy等优秀的可视化界面。但...
摘要：视觉感知测试视觉回归测试为了解决上面提到的各种问题，视觉感知测试孕育而生。第三种方式，无法进行视觉感知测试结果只能进行视觉回归测试和上一版的继续比较差异。 前端自动化测试 之 视觉测试 showImg(https://segmentfault.com/img/remote/1460000014720180); 前端测试分类 showImg(https://segmentfault.co...
摘要：视觉感知测试视觉回归测试为了解决上面提到的各种问题，视觉感知测试孕育而生。第三种方式，无法进行视觉感知测试结果只能进行视觉回归测试和上一版的继续比较差异。 前端自动化测试 之 视觉测试 showImg(https://segmentfault.com/img/remote/1460000014720180); 前端测试分类 showImg(https://segmentfault.co...
阅读 2467·2021-11-25 09:43
阅读 1793·2021-11-24 09:39
阅读 1667·2021-11-17 09:33
阅读 2501·2021-09-27 14:11
阅读 1549·2019-08-30 15:54
阅读 3059·2019-08-26 18:27
阅读 1161·2019-08-23 18:00
阅读 1701·2019-08-23 17:53
