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(selector), {}, st);
// 等待消失
const waitFade = async(st) => 
  await page.waitFor(selector =>
    !document.querySelector(selector), {}, st);

await waitPre('.foo'); // await page.waitFor('.foo');
await page.click('.foo');
// await waitPre('.foo');
// dosomething...

这里不作过多解释，非人操做都很快，不像人同样还看到后再操做。

场景三

当点击形成页面跳转或者从新加载时，须要等待页面加载完成。

const [response] = awiat Promise.all([
    page.waitFroNavigation(),
    page.click('.btn'), // 点击致使页面跳转(重载)
]);

response

response 是加载dom时的响应对象。

场景四

当主动让页面跳转(重载)，并且这里也须要监听重载后的某个请求的响应对象。

• 第一种、等待 reload 完成后再监听

await page.reload(); // 也能够加option，但这里想到要监听某个请求，故为空
await const response = await page.waitForResponse(response => {});

response

这种监听方式有可能会漏掉某些请求。

• 第二种、直接经过 on 监听

page.on('response', response => {});
await page.reload();

这里的监听无任何限制，不管页面作什么操做，都不会逃过 on 的法眼。

场景五

我想删除全部文本，这里只能经过 keyboard 来实现。

• 第一种、计算长度，逐个删除

const cls = '.foo';
await page.waitFor(cls);
await page.focus(cls);
const len = await page.$eval(cls, el => el.textContent.length);
for (let i = 0; i < len; i++) {
    await page.keyboard.press('Backspace');
}
await page.type(cls, 'something');

经过循环删除，不推荐

• 第二种、计算长度，选中，删除

const cls = '.foo';
await page.waitFor(cls);
await page.focus(cls);
const text = await page.$eval(cls, el => el.textContent.length);
await page.keyboard.down('Shift');
for (let i = 0; i < text.length; i++) {
    await page.keyboard.press('ArrowLeft');
}
await page.keyboard.up('Shift');
await page.keyboard.press('Backspace');
await page.type(cls, 'something');

循环选中，一次性删除。

• 第三种、全选，一次性删除

const cls = '.foo';
await page.waitFor(cls);
await page.focus(cls);
const text = await page.$eval(cls, el => el.textContent.length);
await page.keyboard.down('ControlLeft');
await page.keyboard.press('KeyA');
await page.keyboard.up('ControlLeft');
await page.keyboard.press('Backspace');
await page.type(cls, 'something');

Mac os x 上这里未实现，这种方法不可用。目前推荐使用第二种方法，等官方消息。
Mac os x 上 ⌘ 不支持。