facebook / memlab

A framework for finding JavaScript memory leaks and analyzing heap snapshots
https://facebook.github.io/memlab/
MIT License
4.36k stars 119 forks source link

Support for cypress #15

Open phalgunv opened 2 years ago

phalgunv commented 2 years ago

Hello,

I would like to know if memlab can work with Cypress. We have a large test suite of Cypress based tests, it would be nice to use memlabs with those tests rather than creating new ones with pupeteer.

JacksonGL commented 2 years ago

MemLab can analyze heap snapshots taken from V8. In your case, write scripts to take heap snapshots from Cypress (if Cypress supports taking heap snapshots from browser) and put them into disk in the format that can be processed by MemLab.

Here is what the MemLab output files look like (only run-meta.json, snap-seq.json and all .heapsnapshot files are necessary): https://facebook.github.io/memlab/docs/guides/integration-and-file-structure/#collect-results

To get examples of those meta files, run a random MemLab test scenario and view those files under this directory: $(memlab get-default-work-dir)/data/cur.

When the files are ready, create a result reader:

const reader = BrowserInteractionResultReader.from(directory);

Then find memory leaks with the reader and this MemLab API: https://facebook.github.io/memlab/docs/api/modules/api_src#findleaksrunresult

Levix commented 1 year ago

Can't find a way for cypress to take heap snapshots, embarrassing.

JacksonGL commented 1 year ago

@Levix I've never used Cypress before, but it seems Cypress supports Chrome DevTools Protocol, which could be used to get JS heap snapshots from Chromium.

Here is the code pointer of how memlab uses puppeteer to collect the heap snapshots from Chromium.

Levix commented 1 year ago

@Levix I've never used Cypress before, but it seems Cypress supports Chrome DevTools Protocol, which could be used to get JS heap snapshots from Chromium.

Here is the code pointer of how memlab uses puppeteer to collect the heap snapshots from Chromium.

Here is an article written in Chinese on how to take heap snapshots. https://github.com/Levix/weekly/blob/feat-docs-cypress-heap/article/2022/%E4%BD%BF%E7%94%A8%20Cypress%20%E6%8B%8D%E6%91%84%E5%A0%86%E5%BF%AB%E7%85%A7%EF%BC%88Take%20snapshot%EF%BC%89/%E4%BD%BF%E7%94%A8%20Cypress%20%E6%8B%8D%E6%91%84%E5%A0%86%E5%BF%AB%E7%85%A7%EF%BC%88Take%20snapshot%EF%BC%89.md