跳至主要內容

Lighthouse 服務

一個 WebdriverIO 服務，可讓您使用 Google Lighthouse 執行無障礙和效能測試。

注意：此服務目前僅支援在 Google Chrome 或 Chromium 上執行的測試！鑑於大多數雲端供應商不允許存取 Chrome 開發人員工具協定，此服務通常僅在本地執行測試或透過 v4 或更高版本的 Selenium Grid 時才有效。

安裝​

最簡單的方法是透過以下方式，將 @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 命令或點擊連結或任何導致頁面載入的事件所導致的所有頁面載入啟用自動效能稽核。您可以傳入組態物件以決定一些節流選項。預設節流設定檔是 Good 3G 網路，具有 4 倍 CPU 節流。

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 標準。它會檢查

  • 您的應用程式是否可安裝
  • 是否提供 Service Worker
  • 是否有啟動畫面
  • 是否提供 Apple Touch 和遮罩圖示
  • 是否可以在行動裝置上提供服務

如果您對其中一項檢查不感興趣，您可以傳入您想要執行的檢查清單。如果所有檢查都通過，則 passed 屬性會傳回 true。如果它們失敗，您可以使用 details 屬性以詳細資料豐富您的失敗訊息。

// open page first
await browser.url('https://webdriverio.dev.org.tw')
// 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 開發人員工具介面分析追蹤。

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.dev.org.tw')
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