puppeteer-API备忘

puppeteer

1.API

1.获取某个元素的文本采用下面的方式：

1
let text = await.page.$eval('query', ele => ele.textContent); /* 其中text就是该dom元素所对应的文本 */

2.测试页面中是否存在某个元素:

1
page.waitForSelector('query').then(() => {}, () => {console.error('要检查的元素不存在')});

3.获取某个响应的数据:

1
2
3
4
5
6
7
page.on('requestfinished', request => {
  if (request.url().endsWith('the url you want compare')) {
    request.response().json().then(res => {
      /* do something with the res */
    })
  }
});

4.获取当前页面的url：

1
2
3
4
5
6
7
8
await page.click('query').then(() => {
  // do something when success click
}, err => {
  // err log or something
});
if (!page.url().match(/\/someUrl/)) { // 匹配不上的话，说明点击这个按钮没有跳转到相关的页面
  // error log or something
}

5.模拟输入enter：

1
await page.keyboard.press('Enter');

2.小技巧

1.遇到一些问题，加入有一个交互是这样的，点击button.dropdown-toggle，UI表现上展开ul.dropdown-menu列表数据。在这种场景下我们希望列表数据中的第二项，那应该这样写：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 模拟点击button.dropdown-toggle
await page.click('button.dropdown-toggle').then(() => {}, () => {
  Utils.log('课堂练习->班级练习页面->点击请选择班级按钮时发生错误', 'error');
}); // 不知道为什么一定得先点击这个按钮

// 模拟点击列表中的第二个数据
await page.click('ul.dropdown-menu li:nth-of-type(2) a').then(async () => {
  page.on('requestfinished', request => {
    if (request.url().endsWith('gk/ops/class/exercise/page')) {
      request.response().json().then(async res => {
        await testUI(res, '二');
      })
    }
  });
}, () => {
  Utils.log('课堂练习->班级练习页面->点击第二个班级按钮的时候发生错误', 'error');
})

2.某些用户产生的交互行为会触发网络请求，那么怎么捕获监听呢？思路：模拟产生交互的行为，在其返回的promise的resolve cb里面使用page去监听requestfinished事件，如下所示：

1
2
3
4
5
6
7
8
9
10
11
await page.click('ul.dropdown-menu li:nth-of-type(2) a').then(async () => {
  page.on('requestfinished', request => {
    if (request.url().endsWith('you want compare')) {
      request.response().json().then(async res => {
        await testUI(res, '二'); // 测试UI与响应是否对应
      })
    }
  });
}, () => {
  Utils.log('some error message', 'error');
})

3.近期做项目遇到一个问题，那就是localStorage丢失的问题，思前想后才发现上一个页面的域名是HTTPS（在上个页面写的localStorage)，而下个页面成了http，这就解释了为什么localStorage为什么会丢失的问题了。毕竟localStorage特定于页面的协议。有可能是第二个页面引入了某个非https的协议，所以降成了http。

4.page.$eval方法怎么使用，用处是什么？，先看下面示例代码：

1
2
3
4
5
6
7
await page.$eval(
  '#login',
  (ele, userName) => {
    ele.value = userName;
  },
  'hahahai'
);

page.$eval方法相当于执行document.querySelector()，并且将match到的结果作为callback的第一个参数，而$eval方法所返回的结果就是callback所返回的结果，如果callback返回的是一个promise的话，那么会等待直到promise被决议。函数的第三个参数如果提供了的话，那么将会作为callback方法的第二个参数。

5.我想摸你按下回车。代码如下所示：

1
await page.keyboard.press("Enter");