Puppeteer-常规操作一

这里不讲 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) => 
  await page.waitFor(selector =>
    !!document.querySelector<