Node.js Playwright自动化测试页面性能实战指南

概要

在当今的互联网环境中，网站性能至关重要。各大企业都在致力于提升网站加载速度以优化用户体验。然而，如何精准定位影响速度的关键因素并进行有效优化，是对前端工程师技术能力的重大考验。

现代浏览器已开放多项性能指标，利用这些数据可以快速识别需要改进的内容及方法。本文将介绍一种基于Playwright的自动化测试方案，用于评估页面性能。

若对Playwright尚不熟悉，可参考之前的文章：Playwright使用指南。

借助Playwright，我们可以查询浏览器提供的各类性能相关API，从而识别导致网站加载缓慢的原因。例如，Chrome浏览器提供了WebVitals指标，包括Time to First Byte (TTFB)、Total BlockTime (TBT) 和First Contentful Paint (FCP)。这些是衡量用户体验的重要指标，值得在测试过程中进行监控。

接下来，将介绍几种常见的页面性能衡量方案。

导航和资源加载时间 API

该API允许检索与页面加载相关的所有事件时间，例如domComplete time、duration和connectEnd。在测试过程中，可利用这些指标来检测网页的性能状况。

1. Performance 得分

我们可以利用Playwright定期检查页面性能，确保网页性能不低于设定的特定标准。

以下代码展示了如何使用Playwright自动化检测淘宝网的domComplete时间。如果该时间低于设定的阈值，测试用例将标记为失败，从而提醒开发者及时对页面进行性能回归测试。

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch({
    headless: true,
  });
  const context = await browser.newContext()
  const page = await context.newPage()

  await page.goto('https://www.taobao.com/');
  
  const navigationTimingJson = await page.evaluate(() =>
    JSON.stringify(performance.getEntriesByType('navigation'))
  )
  const navigationTiming = JSON.parse(navigationTimingJson)

  if (navigationTiming.domComplete < 2000) {
    console.error('ERROR: domComplete below 2 seconds')
  }

  await browser.close()
})()

2. 资源加载时间 API

该API提供了一种获取页面特定资源加载时间的方法，便于衡量页面资源的加载效率。

例如，可以使用以下代码检查淘宝网首页webp格式图片的加载时间。

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch({
    headless: true,
  });
  const context = await browser.newContext()
  const page = await context.newPage()

  await page.goto('https://www.taobao.com/');
  
  const resourceTimingJson = await page.evaluate(() =>
    JSON.stringify(window.performance.getEntriesByType('resource'))
  )

  const resourceTiming = JSON.parse(resourceTimingJson)
  const logoResourceTiming = resourceTiming.find((element) =>
    element.name.includes('.webp')
  )

  console.log(logoResourceTiming)

  await browser.close()
})()

页面绘制时间 API

我们可以利用页面绘制时间API来检索页面First Paint (FP)和First Contentful Paint (FCP)的时间数据。

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch({
    headless: true,
  });

  const context = await browser.newContext()
  const page = await context.newPage()

  await page.goto('https://www.taobao.com/');
  
  const paintTimingJson = await page.evaluate(() =>
    JSON.stringify(window.performance.getEntriesByType('paint'))
  )
  const paintTiming = JSON.parse(paintTimingJson)

  console.log(paintTiming)

  await browser.close()

})()

布局稳定性 API

该API提供有关页面布局变化的信息，可用于计算网页的Core Web Vital Cumulative Layout Shift (CLS)数据。

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch({
    headless: true,
  });

  const context = await browser.newContext()
  const page = await context.newPage()

  await page.goto('https://www.taobao.com/');
  
  const cummulativeLayoutShift = await page.evaluate(() => {
    return new Promise((resolve) => {
      let CLS = 0

      new PerformanceObserver((l) => {
        const entries = l.getEntries()

        entries.forEach(entry => {
          if (!entry.hadRecentInput) {
            CLS += entry.value
          }
        })

        resolve(CLS)
      }).observe({
        type: 'layout-shift',
        buffered: true
      })
    })
  })

  console.log(parseFloat(cummulativeLayoutShift))

  await browser.close()

})()

Long Task（长任务） API

Long Task API会返回一个JavaScript执行列表，其中包含执行时间超过50毫秒的任务。这些任务会阻塞页面UI线程，导致页面卡顿。我们可以利用此API计算页面的总阻塞时间（Total Blocking Time, TBT）。

以下代码使用了PerformanceObserver来计算页面长任务时间超过50毫秒的时间总和。

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch({
    headless: true,
  });

  const context = await browser.newContext()
  const page = await context.newPage()

  await page.goto('https://www.taobao.com/');
  

  const totalBlockingTime = await page.evaluate(() => {
    return new Promise((resolve) => {
      let totalBlockingTime = 0
      new PerformanceObserver(function (list) {
        const perfEntries = list.getEntries()
        for (const perfEntry of perfEntries) {
          totalBlockingTime += perfEntry.duration - 50
        }
        resolve(totalBlockingTime)
      }).observe({ type: 'longtask', buffered: true })

      // Resolve promise if there haven't been any long tasks
      setTimeout(() => resolve(totalBlockingTime), 5000)
    })
  })

  console.log(parseFloat(totalBlockingTime))

  await browser.close()

})()

Chrome DevTools

Chrome DevTools提供了许多实用功能，我们可以充分利用。例如，可以使用Network.emulateNetworkConditions来控制浏览器网络速度。

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch({
    headless: true,
  });

  const context = await browser.newContext()
  const page = await context.newPage()

  await page.goto('https://www.taobao.com/');
  
  const context = await browser.newContext()
  const page = await context.newPage()

  await client.send('Network.enable')
  await client.send('Network.emulateNetworkConditions', {
    offline: false,
    downloadThroughput: (5 * 1024 * 1024) / 8,
    uploadThroughput: (4 * 1024 * 1024) / 8,
    latency: 30
  )

  await page.goto('https://testingbot.com/');
  await browser.close()


})()

以上就是Node.js使用Playwright自动化测试页面性能的详细内容，更多关于Playwright测试页面性能的资料请关注本站其它相关文章！

Node.js使用Playwright自动化测试页面性能

概要