Puppeteer 操作

二、实战经验

搭建一个Puppeteer工程

页面元素选取

页面操作的方式

页面操作与写法

点击操作

点击某个元素的操作，遵循CSS的selector语法

https://www.runoob.com/cssref/css-selectors.html

await page.click(".tab-list .tab:first-child")

另一种点击方式，通过元素方式点击

const loginBtn = await page.$('body > div.component-popup > div > div > div > div:nth-child(6)'); await loginBtn.click();

鼠标操作

page.mouse.down

await page.mouse.down({ button: 'right' });
await page.mouse.up({ button: 'right' });
await page.waitForTimeout(1000)

耗时指标统计

window.performance.now()返回的时间戳没有被限制在一毫秒的精确度内，相反，它们以浮点数的形式表示时间，精度最高可达微秒级。

另外一个不同点是，window.performance.now()是以一个恒定的速率慢慢增加的，它不会受到系统时间的影响（系统时钟可能会被手动调整或被 NTP 等软件篡改）。另外，performance.timing.navigationStart + performance.now() 约等于 Date.now()。

performance.now();

Promise 对象用于表示一个异步操作的最终完成（或失败）及其结果值。

时间计算方式

如果不通过平台的方式，如何计算对应的耗时数据

平台侧的数据处理方式，如何做一个类似的平台

requestAnimationFrame 通过判断帧的变化

waitForSelector 等待元素出现为止

计时器 ？判断元素出来的耗时

Listener，这种其实还是通过帧变化来判断计算耗时

整体帧变化之后，才进行操作。

async addListener() {
      await this.page.evaluate(() => {
        window.$global$.addEventListener('keydown', () => {
          if (window.$global$.fsPerfLogger.key) {
            const startTimestamp = performance.now();
            requestAnimationFrame(() => {
              const endTimestamp = performance.now();
              window.$global$.fsPerfLogger.end(endTimestamp - startTimestamp);
            });
          }
        }, true);
      });