MemMonitor

MemMonitor is a node library based on Puppeteer which provides means to control Google chrome/chromium over DevTools protocols. The current implementation logs in to the MS Teams app and performs profiling as per the developer instructions in Config.json file.

Input

MemMonitor accepts input in the form of config.json file. Example config.json

{
"scenarioEvents" : ["Files","OneDrive"] , "leakEvents" : ["Files", "Calendar"], "leakIterations" : 5, "analysisType" : "devDriven", "URL" : "https://teams.microsoft.com", "username" : "-", "password" : "-", "coreClasses" : ["SimpleFileEntity","FilesListController"] }

• scenarioEvents : Sequence of events that will be executed as part of this test. In the above example, ["Files", "OneDrive"] imply that puppeteer will click on "Files" followed by "oneDrive" automatically. Undefined/null - imply that user will manually perform these events on the webpage.
• leakEvents : These events will be performed in a repetitive manner (leakIterations number of times) to detect memory leaks present if any.
• analysisType : This can take two values devDriven/testDriven; and these values imply following
  • devDriven : imply that hooks are inserted in the source code and accordingly snapshots will be captured. hooks in the form of //console.timeStamp("componentWillMount")
  • testDriven :
    imply that timeStamp hooks are inserted in the test case (integration is not yet done)
• URL : URL of the webpage that needs to be tested
• username, password : login details of the above URL
• coreClasses : These classes will be monitored.

How to run?

$ cd memMonitor
$ npm install 
$ npm run remove //cleans up the previous profiles
$ npm run start

Output

Opens a Google chrome browser with multiple tabs as per following details : #First Tab:

Opens the Teams app, and performs all the events as per config.json automatically.

#Second Tab:

Opens results.html with analysis data (See the sample output.png): 
-   Test details : brief summary of the test details in config.json
-   Memory analysis table : State 1 corresponds to the Teams homepage, additional states are created for each event in the scenarioEvents(config.json). For each state, a heap snapshot is computed. These snapshots are present in ./memoryProfiles folder with suffix snapshot_{stateid}.json. This table also shows the JSHeapTotalSize, JSHeapUsedSize and DOM nodes pertaining to that state. 
-  {click here to get trace file} : trace.json file which stores the end-to-end performance profile when running scenarioEvents(config.json). One can upload this file to performance tab and analyse the corresponding profile. 
- Memory leak analysis table : tool executes leakEvents(config.json) repeatedly for iterations(#leakIterations) and computes metrics pertaining to JSHeapTotalSize and JSHeapUsedSize. DOM nodes are also computed.
- core classes analysis table : shows the heap difference between two states (selected from memory analysis table) for the core classes that developer mentioned in config.json
- Heap Snapshot comparison : shows the heap difference between two states (selected from memory analysis table) for all the objects. One can select on the column header and sort the table accordingly.

Snapshot difference for different states can be computed on demand by selecting any two states from memory analysis table. ComputeDiff button will compute the diff and store in ./memoryProfiles folder with heapDiffSnapshot_{state1}_{state2}.json as file name.One can upload this file using "choose file", this will update the data present in core classes analysis and Heap snapshot comparison table accordingly.

Todos

• Handle destroy of react component
• Integrate with react bridge
• Integrate with scenario tests