ヒープスナップショットの取得
概要
ヒープスナップショットは、スナップショットが取得された時点での、ページ上のJavaScriptオブジェクトと関連するDOMノード間のメモリの分布を表します。これは、メモリリーク、メモリ肥大化、頻繁なガベージコレクションなど、ページのパフォーマンスに影響を与えるメモリの問題を見つけて修正するのに役立ちます。
Selenium 4でChrome DevTools Protocolのサポートが利用可能になったことで、Nightwatchでは、テスト実行中にいつでもブラウザの現在の実行コンテキストのヒープスナップショットを取得し、.heapsnapshotファイルとして保存できるようになりました。このファイルは、Chrome DevTools (Memory > "ヒープスナップショット"を選択 > 下部の"Load"ボタンをクリック) にロードして、メモリグラフの分析、スナップショットの比較、メモリリークの発見を行うことができます。
ヒープスナップショットの取得
このコマンドを使用すると、ページのJavaScriptオブジェクトと関連するDOMノード間のヒープメモリの分散のスナップショットを取得できます。これは、Chrome DevToolsにロードして分析し、メモリリークを見つけるために使用できます。
また、異なる時点でのヒープメモリの複数のスナップショットを取得し、それらのスナップショットが取得された時間の間でメモリがどのように変化したかを比較することもできます。
スナップショットを取得したいときはいつでも、必要なパラメータを指定してbrowser.takeHeapSnapshot()コマンドを呼び出します。
takeHeapSnapshot()は、スナップショットを保存する場所を最初の引数として受け入れます。オプションのコールバック関数を2番目の引数として渡すことができます。これは、ヒープスナップショットの取得プロセスが完了したときに、スナップショットの内容を引数として実行されます。
例
describe('take heap snapshot', function() {
it('takes heap snapshot and saves it as snapshot1.heapsnapshot file', function() {
browser
.navigateTo('https://www.google.com')
.takeHeapSnapshot('heap_snaps/snapshot1.heapsnapshot');
});
});
async/await構文で使用した場合、takeHeapSnapshotコマンドはヒープスナップショットの内容を返し、それを手動で.heapsnapshotファイルに保存できます。
const fs = require('fs');
describe('take heap snapshot with async/await', function() {
it('takes heap snapshot and returns the snapshot content', async function() {
await browser.navigateTo('https://www.google.com');
const heapSnapshot = await browser.takeHeapSnapshot();
fs.writeFileSync('heap_snaps/snapshot2.heapsnapshot', heapSnapshot);
});
});