二、实战经验
搭建一个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);
});