取得堆積快照

概觀

堆積快照代表在拍攝快照的時間點，您的頁面的 JavaScript 物件和相關 DOM 節點之間的記憶體分配方式。這有助於您找到並修正影響頁面效能的記憶體問題，包括記憶體洩漏、記憶體膨脹和頻繁的垃圾回收。

由於 Selenium 4 現在提供 Chrome DevTools 協議支援，Nightwatch 現在允許您在測試執行期間隨時取得瀏覽器目前執行內容的堆積快照，並將其儲存為 .heapsnapshot 檔案。然後，您可以將此檔案載入 Chrome DevTools (記憶體 > 選取「堆積快照」> 按一下底部的「載入」按鈕) 中，以分析記憶體圖表、比較快照並找出記憶體洩漏。

此指令僅適用於以 Chromium 為基礎的瀏覽器，例如 Google Chrome 和 Microsoft Edge。

取得堆積快照

此指令可讓您取得堆積記憶體在您頁面的 JavaScript 物件和相關 DOM 節點之間如何分配的快照，然後可以將該快照載入 Chrome DevTools 中，以進行分析並找出任何記憶體洩漏。

您也可以在不同時間點取得堆積記憶體的複數快照，然後比較在拍攝這些快照的時間之間，記憶體中發生了什麼變化。

在您想要取得快照的任何時間呼叫具有必要參數的 browser.takeHeapSnapshot() 指令。

takeHeapSnapshot() 接受要儲存快照的位置做為第一個引數。可以將選用的回呼函式做為第二個引數傳遞，該函式將在擷取堆積快照的程序完成後執行，並以快照的內容做為其引數。

範例

tests/take-heap-snapshot.js 
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 檔案。

tests/take-heap-snapshot-async-await.js 
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);
  });
});

建議內容