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 上 ⌘ 不支持。