Lighthouseサービス
Google Lighthouseを使用してアクセシビリティとパフォーマンスのテストを実行できるWebdriverIOサービス。
注：このサービスは現在、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 Performance Scoreを返します。これは、次のメトリクスの加重平均です：firstContentfulPaint、speedIndex、largestContentfulPaint、cumulativeLayoutShift、totalBlockingTime、interactive、maxPotentialFIDまたはcumulativeLayoutShift。
console.log(await browser.getPerformanceScore())
/**
* 0.897826278457836
*/
enablePerformanceAudits
urlコマンドを呼び出すか、リンクをクリックするか、ページロードを引き起こすすべてのページロードに対して、自動パフォーマンス監査を有効にします。スロットリングオプションを決定するために、configオブジェクトを渡すことができます。デフォルトのスロットリングプロファイルは、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.dokyumento.jp')
// 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.dokyumento.jp')
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の詳細については、ホームページをご覧ください。
