获取堆快照

概述

堆快照表示快照拍摄时页面 JavaScript 对象及其相关 DOM 节点之间的内存分配方式。这有助于您查找并修复影响页面性能的内存问题，包括内存泄漏、内存膨胀和频繁的垃圾回收。

借助 Selenium 4 中现在可用的 Chrome DevTools 协议支持，Nightwatch 现在允许您在测试运行期间随时获取浏览器当前执行上下文的堆快照，并将其保存为 .heapsnapshot 文件。然后可以将此文件加载到 Chrome DevTools（Memory > 选择 "Heap Snapshot" > 点击底部的 "Load" 按钮）中，以分析内存图表、比较快照并查找内存泄漏。

此命令仅适用于基于 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);
  });
});

推荐内容