puppeteer的使用

puppeteer是一个基于js的强大API,它可以操作Chrome浏览器进行网页的获取,并且能进行无头浏览模式,强大到没朋友。
一个坑:puppeteer中获取元素的方法和浏览器里面一样,但是,获取元素的属性的办法和浏览器不一样,它有一套API用来获取界面中的元素,有一套API用来获取元素的属性,获取元素具体的操作如下:

# (1). Page.$(selector) 获取单个元素,底层是调用的是 document.querySelector() , 所以选择器的 selector 格式遵循 [css 选择器规范]
# 实例如下:
let inputElement = await page.$('#search');

#(2). Page.$$(selector) 获取一组元素,底层调用的是 document.querySelectorAll(). 返回 Promise(Array(ElemetHandle)) 元素数组.
const links = await page.$$("a");

获取元素属性的操作如下:

# Puppeteer 获取元素属性跟我们平时写前段的js的逻辑有点不一样,按照通常的逻辑,应该是现获取元素,然后在获取元素的属性。但是上面我们知道
# 获取元素的 API 最终返回的都是 ElemetHandle 对象,而你去查看 ElemetHandle 的 API 你会发现,它并没有获取元素属性的 API.

# 事实上 Puppeteer 专门提供了一套获取属性的 API, Page.$eval() 和 Page.$$eval()

const value = await page.$eval('input[name=search]', input => input.value);
const href = await page.$eval('#a', ele => ele.href);
const content = await page.$eval('.content', ele => ele.outerHTML);
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,859评论 1 45
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,107评论 19 139
  • 一个字,累。 追电视剧就是这样,看电视看得好累,晚上睡太晚,中午还不能睡,要困成茄子了。。。 今天思考了半天之后做...
    释放自我阅读 164评论 0 1
  • 看到今天的主题想了好久,奇迹是指极难做到的,不同寻常的事。这么多年我的生活一直都是在平平淡淡中度过,从来都没想过会...
    yangzinm阅读 256评论 0 0
  • 渐渐的觉得,这样的日子也不那么难熬。 可以早睡,不必发虚地等待什么。 睡的安心,因为没什么再会失去。 居然在该焦虑...
    0娜娜子0阅读 228评论 0 0