这里不讲 Puppeteer 怎么使用，主要讲一些常规操作在这里如何通过另类方法实现。等实现后，你就会感觉，嗯~~ 真香！
场景一
已经找出要的元素，现在有需求再继续寻找他的子元素
// 已经找出父元素
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时的响应对象。
场景四
当主动让页面跳转(重载)，而且这里也需要监听重载后的某个请求的响应对象。
await page.reload(); // 也可以加option，但这里想到要监听某个请求，故为空
await const response = await page.waitForResponse(response => {});
response
这种监听方式有可能会漏掉某些请求。
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 上 ⌘ 不支持。
|
