Puppeteer--代码示例(3)

一、先找父元素，再找子元素

1.通过page.evaluate传参的方式

// 已经找出父元素
const foo = await page.$('.foo');
// 将父元素带入 `evaluate` 事件中，通过原生方法继续后续操作
const bar = await page.evaluate(fooEle => fooEle.querySelector('.bar'), foo);

这里的 evaluate 好处就是 callback 里面可以通过原生js进行操作，callback 后面的 argument 以逗号形式分割，顺序传入 callback 中。

 

2. 继续通过ele.$选择器的方式

// 已经找出父元素
const foo = await page.$('.foo');
// 继续通过原本的操作
const bar = await foo.$('.bar');

这里page 找出的对象后面其实是继续给了 page 的所有方法，但由于 page 大部分方法都是异步 <Promise> 的，所以必须等待完成才可以操作，不能使用链式操作。

 

二、监听打开或重载后的某个请求的响应对象。

1、等待 reload 完成后再监听

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

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

 

2、直接通过 on 监听

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

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

 

三、keybord的使用，下面通过删除所有文本来介绍

1、计算长度，逐个删除

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');

通过循环删除，不推荐

 

2、计算长度，区域选中，删除

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');

 

3、全选，一次性删除

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');