跳至主要内容

Lighthouse 服务

一个 WebdriverIO 服务，允许您使用Google Lighthouse运行可访问性和性能测试。

注意：此服务目前仅支持在 Google Chrome 或 Chromium 上运行的测试！鉴于大多数云供应商不公开访问 Chrome DevTools 协议，因此此服务通常也仅在本地运行测试或通过Selenium Grid v4 或更高版本运行测试时有效。

安装​

最简单的方法是将@wdio/lighthouse-service作为开发依赖项保存在您的package.json中，通过

npm install @wdio/lighthouse-service --save-dev

有关如何安装WebdriverIO的说明，请参见此处。

配置​

为了使用该服务，您只需要将该服务添加到wdio.conf.js中的服务列表中，例如

// wdio.conf.js
export const config = {
    // ...
    services: ['lighthouse'],
    // ...
};

用法​

@wdio/lighthouse-service允许您通过 WebdriverIO 运行 Google Lighthouse 可访问性和性能测试。

性能测试​

Lighthouse 服务允许您捕获每次页面加载或由点击引起的页面转换的性能数据。要启用它，请调用browser.enablePerformanceAudits(<options>)。完成后捕获所有必要的性能数据，禁用它以恢复节流设置，例如

import assert from 'node:assert'

describe('JSON.org page', () => {
    before(async () => {
        await browser.enablePerformanceAudits()
    })

    it('should load within performance budget', async () => {
        /**
         * this page load will take a bit longer as the DevTools service will
         * capture all metrics in the background
         */
        await browser.url('http://json.org')

        let metrics = await browser.getMetrics()
        assert.ok(metrics.speedIndex < 1500) // check that speedIndex is below 1.5ms

        let score = await browser.getPerformanceScore() // get Lighthouse Performance score
        assert.ok(score >= .99) // Lighthouse Performance score is at 99% or higher

        $('=Esperanto').click()

        metrics = await browser.getMetrics()
        assert.ok(metrics.speedIndex < 1500)
        score = await browser.getPerformanceScore()
        assert.ok(score >= .99)
    })

    after(async () => {
        await browser.disablePerformanceAudits()
    })
})

您可以通过使用emulateDevice命令模拟移动设备，节流 CPU 和网络，并将mobile设置为外形尺寸

await browser.emulateDevice('iPhone X')
await browser.enablePerformanceAudits({
    networkThrottling: 'Good 3G',
    cpuThrottling: 4,
    formFactor: 'mobile'
})

以下命令及其结果可用

getMetrics​

获取最常用的性能指标，例如

console.log(await browser.getMetrics())
/**
 * { timeToFirstByte: 566,
 *   serverResponseTime: 566,
 *   domContentLoaded: 3397,
 *   firstVisualChange: 2610,
 *   firstPaint: 2822,
 *   firstContentfulPaint: 2822,
 *   firstMeaningfulPaint: 2822,
 *   largestContentfulPaint: 2822,
 *   lastVisualChange: 15572,
 *   interactive: 6135,
 *   load: 8429,
 *   speedIndex: 3259,
 *   totalBlockingTime: 31,
 *   maxPotentialFID: 161,
 *   cumulativeLayoutShift: 2822 }
 */

getDiagnostics​

获取有关页面加载的一些有用的诊断信息。

console.log(await browser.getDiagnostics())
/**
 * { numRequests: 8,
 *   numScripts: 0,
 *   numStylesheets: 0,
 *   numFonts: 0,
 *   numTasks: 237,
 *   numTasksOver10ms: 5,
 *   numTasksOver25ms: 2,
 *   numTasksOver50ms: 2,
 *   numTasksOver100ms: 0,
 *   numTasksOver500ms: 0,
 *   rtt: 147.20600000000002,
 *   throughput: 47729.68474448835,
 *   maxRtt: 176.085,
 *   maxServerLatency: 1016.813,
 *   totalByteWeight: 62929,
 *   totalTaskTime: 254.07899999999978,
 *   mainDocumentTransferSize: 8023 }
 */

getMainThreadWorkBreakdown​

返回一个列表，其中包含所有主线程任务及其总持续时间的细分。

console.log(await browser.getMainThreadWorkBreakdown())
/**
 * [ { group: 'styleLayout', duration: 130.59099999999998 },
 *   { group: 'other', duration: 44.819 },
 *   { group: 'paintCompositeRender', duration: 13.732000000000005 },
 *   { group: 'parseHTML', duration: 3.9080000000000004 },
 *   { group: 'scriptEvaluation', duration: 2.437999999999999 },
 *   { group: 'scriptParseCompile', duration: 0.20800000000000002 } ]
 */

getPerformanceScore​

返回Lighthouse 性能得分，它是以下指标的加权平均值：firstContentfulPaint、speedIndex、largestContentfulPaint、cumulativeLayoutShift、totalBlockingTime、interactive、maxPotentialFID 或cumulativeLayoutShift。

console.log(await browser.getPerformanceScore())
/**
 * 0.897826278457836
 */

enablePerformanceAudits​

为所有由调用url命令或单击链接或导致页面加载的任何内容引起的页面加载启用自动性能审核。您可以传入一个配置对象来确定一些节流选项。默认节流配置文件是具有 4 倍 CPU 节流的Good 3G网络。

await browser.enablePerformanceAudits({
    networkThrottling: 'Good 3G',
    cpuThrottling: 4,
    cacheEnabled: true,
    formFactor: 'mobile'
})

以下网络节流配置文件可用：offline、GPRS、Regular 2G、Good 2G、Regular 3G、Good 3G、Regular 4G、DSL、Wifi和online（无节流）。

PWA 测试​

使用checkPWA命令，您可以验证您的 Web 应用在渐进式 Web 应用方面是否符合最新的 Web 标准。它检查

  • 您的应用是否可安装
  • 提供服务工作线程
  • 有启动画面
  • 提供 Apple Touch 和可遮罩图标
  • 可以在移动设备上提供服务

如果您对其中一项检查不感兴趣，则可以传入您想要运行的检查列表。如果所有检查都通过，则passed属性将返回true。如果它们失败，您可以使用details属性使用失败的详细信息丰富您的失败消息。

// open page first
await browser.url('https://webdriverio.node.org.cn')
// validate PWA
const result = await browser.checkPWA()
expect(result.passed).toBe(true)

startTracing(categories, samplingFrequency) 命令​

开始跟踪浏览器。您可以选择传入自定义跟踪类别（默认为此列表）和采样频率（默认为10000）。

await browser.startTracing()

endTracing 命令​

停止跟踪浏览器。

await browser.endTracing()

getTraceLogs 命令​

返回在跟踪期间捕获的跟踪日志。您可以使用此命令将跟踪日志存储在文件系统上，以便通过 Chrome DevTools 接口分析跟踪。

import fs from 'node:fs/promises'

await browser.startTracing()
await browser.url('http://json.org')
await browser.endTracing()

await fs.writeFile('/path/to/tracelog.json', JSON.stringify(browser.getTraceLogs()))

getPageWeight 命令​

返回上次页面加载的页面权重信息。

await browser.startTracing()
await browser.url('https://webdriverio.node.org.cn')
await browser.endTracing()

console.log(await browser.getPageWeight())
// outputs:
// { pageWeight: 2438485,
//   transferred: 1139136,
//   requestCount: 72,
//   details: {
//       Document: { size: 221705, encoded: 85386, count: 11 },
//       Stylesheet: { size: 52712, encoded: 50130, count: 2 },
//       Image: { size: 495023, encoded: 482433, count: 36 },
//       Script: { size: 1073597, encoded: 322854, count: 15 },
//       Font: { size: 84412, encoded: 84412, count: 5 },
//       Other: { size: 1790, encoded: 1790, count: 2 },
//       XHR: { size: 509246, encoded: 112131, count: 1 } }
// }

有关 WebdriverIO 的更多信息，请参见主页。

欢迎！我怎样才能帮到您？

WebdriverIO AI Copilot