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