这里不讲
Puppeteer
怎么使用,主要讲一些常规操作在这里如何通过另类方法实现。等实现后,你就会感觉,嗯~~ 真香!
场景一
已经找出要的元素,现在有需求再继续寻找他的子元素
- 第一种、将父元素带入
evaluate
事件中
// 已经找出父元素
const foo = await page.$('.foo');
// 将父元素带入 `evaluate` 事件中,通过原生方法继续后续操作
const bar = await page.evaluate(fooEle => fooEle.querySelector('.bar'), foo);
这里的 evaluate
好处就是 callback 里面可以通过原生js进行操作,callback 后面的 argument
以逗号形式分割,顺序传入 callback 中。
- 第二种、继续通过原本的操作
// 已经找出父元素
const foo = await page.$('.foo');
// 继续通过原本的操作
const bar = await foo.$('.bar');
这里比较通俗易懂,page
找出的对象后面其实是继续给了 page
的所有方法,但由于 page
大部分方法都是异步 <Promise>
的,所以必须等待完成才可以操作,不能使用链式操作。
这里主要看习惯哪一种操作,第一种的好处习惯原生js,但是大部分操作只能在 callback 中操作,类似 page.$eval
等操作;第二种的好处是直接操作,不含糊,让人觉得更舒服一点,不管以后做输入还是点击,都非常方便。
场景二
每次做点击/输入之前都要进行验证即将操作对象是否存在
// 封装需要等待
// 等待出现
const waitPre = async(st) =&