feat: grab metrics playwright (#3809)

* feat: grab metrics playwright

* fix: increase timeout for UTs

---------

Co-authored-by: Michael Bodnarchuk <[email protected]>

Author: kobenguyent

.github/workflows/playwright.yml

@@ -51,4 +51,4 @@ jobs:
     - name: run webkit tests
       run: "BROWSER=webkit node ./bin/codecept.js run -c test/acceptance/codecept.Playwright.js --grep @Playwright --debug"
     - name: run unit tests
-      run: ./node_modules/.bin/mocha test/helper/Playwright_test.js
+      run: ./node_modules/.bin/mocha test/helper/Playwright_test.js --timeout 5000

docs/helpers/Playwright.md

@@ -1114,6 +1114,60 @@ let postHTMLs = await I.grabHTMLFromAll('.post');
 
 Returns **[Promise][21]<[Array][9]<[string][8]>>** HTML code for an element
 
+### grabMetrics
+
+Return a performance metric from the chrome cdp session.
+Note: Chrome-only
+
+Examples:
+
+```js
+const metrics = await I.grabMetrics();
+
+// returned metrics
+
+[
+  { name: 'Timestamp', value: 1584904.203473 },
+  { name: 'AudioHandlers', value: 0 },
+  { name: 'AudioWorkletProcessors', value: 0 },
+  { name: 'Documents', value: 22 },
+  { name: 'Frames', value: 10 },
+  { name: 'JSEventListeners', value: 366 },
+  { name: 'LayoutObjects', value: 1240 },
+  { name: 'MediaKeySessions', value: 0 },
+  { name: 'MediaKeys', value: 0 },
+  { name: 'Nodes', value: 4505 },
+  { name: 'Resources', value: 141 },
+  { name: 'ContextLifecycleStateObservers', value: 34 },
+  { name: 'V8PerContextDatas', value: 4 },
+  { name: 'WorkerGlobalScopes', value: 0 },
+  { name: 'UACSSResources', value: 0 },
+  { name: 'RTCPeerConnections', value: 0 },
+  { name: 'ResourceFetchers', value: 22 },
+  { name: 'AdSubframes', value: 0 },
+  { name: 'DetachedScriptStates', value: 2 },
+  { name: 'ArrayBufferContents', value: 1 },
+  { name: 'LayoutCount', value: 0 },
+  { name: 'RecalcStyleCount', value: 0 },
+  { name: 'LayoutDuration', value: 0 },
+  { name: 'RecalcStyleDuration', value: 0 },
+  { name: 'DevToolsCommandDuration', value: 0.000013 },
+  { name: 'ScriptDuration', value: 0 },
+  { name: 'V8CompileDuration', value: 0 },
+  { name: 'TaskDuration', value: 0.000014 },
+  { name: 'TaskOtherDuration', value: 0.000001 },
+  { name: 'ThreadTime', value: 0.000046 },
+  { name: 'ProcessTime', value: 0.616852 },
+  { name: 'JSHeapUsedSize', value: 19004908 },
+  { name: 'JSHeapTotalSize', value: 26820608 },
+  { name: 'FirstMeaningfulPaint', value: 0 },
+  { name: 'DomContentLoaded', value: 1584903.690491 },
+  { name: 'NavigationStart', value: 1584902.841845 }
+]
+```
+
+Returns **[Promise][20]<[Array][22]<[Object][5]>>** 
+
 ### grabNumberOfOpenTabs
 
 Grab number of open tabs.

lib/helper/Playwright.js

@@ -3124,6 +3124,67 @@ class Playwright extends Helper {
   flushWebSocketMessages() {
     this.webSocketMessages = [];
   }
+  
+   /**
+   * Return a performance metric from the chrome cdp session.
+   * Note: Chrome-only
+   *
+   * Examples:
+   *
+   * ```js
+   * const metrics = await I.grabMetrics();
+   *
+   * // returned metrics
+   *
+   * [
+   *   { name: 'Timestamp', value: 1584904.203473 },
+   *   { name: 'AudioHandlers', value: 0 },
+   *   { name: 'AudioWorkletProcessors', value: 0 },
+   *   { name: 'Documents', value: 22 },
+   *   { name: 'Frames', value: 10 },
+   *   { name: 'JSEventListeners', value: 366 },
+   *   { name: 'LayoutObjects', value: 1240 },
+   *   { name: 'MediaKeySessions', value: 0 },
+   *   { name: 'MediaKeys', value: 0 },
+   *   { name: 'Nodes', value: 4505 },
+   *   { name: 'Resources', value: 141 },
+   *   { name: 'ContextLifecycleStateObservers', value: 34 },
+   *   { name: 'V8PerContextDatas', value: 4 },
+   *   { name: 'WorkerGlobalScopes', value: 0 },
+   *   { name: 'UACSSResources', value: 0 },
+   *   { name: 'RTCPeerConnections', value: 0 },
+   *   { name: 'ResourceFetchers', value: 22 },
+   *   { name: 'AdSubframes', value: 0 },
+   *   { name: 'DetachedScriptStates', value: 2 },
+   *   { name: 'ArrayBufferContents', value: 1 },
+   *   { name: 'LayoutCount', value: 0 },
+   *   { name: 'RecalcStyleCount', value: 0 },
+   *   { name: 'LayoutDuration', value: 0 },
+   *   { name: 'RecalcStyleDuration', value: 0 },
+   *   { name: 'DevToolsCommandDuration', value: 0.000013 },
+   *   { name: 'ScriptDuration', value: 0 },
+   *   { name: 'V8CompileDuration', value: 0 },
+   *   { name: 'TaskDuration', value: 0.000014 },
+   *   { name: 'TaskOtherDuration', value: 0.000001 },
+   *   { name: 'ThreadTime', value: 0.000046 },
+   *   { name: 'ProcessTime', value: 0.616852 },
+   *   { name: 'JSHeapUsedSize', value: 19004908 },
+   *   { name: 'JSHeapTotalSize', value: 26820608 },
+   *   { name: 'FirstMeaningfulPaint', value: 0 },
+   *   { name: 'DomContentLoaded', value: 1584903.690491 },
+   *   { name: 'NavigationStart', value: 1584902.841845 }
+   * ]
+   *
+   * ```
+   *
+   * @return {Promise<Array<Object>>}
+   */
+  async grabMetrics() {
+    const client = await this.page.context().newCDPSession(this.page);
+    await client.send('Performance.enable');
+    const perfMetricObject = await client.send('Performance.getMetrics');
+    return perfMetricObject?.metrics;
+  }
 
   _getWebSocketMessage(payload) {
     if (payload.errorMessage) {

test/helper/Playwright_test.js

@@ -1405,6 +1405,48 @@ describe('Playwright - Electron', () => {
   });
 });
 
+describe('Playwright - Performance Metrics', () => {
+  before(() => {
+    global.codecept_dir = path.join(__dirname, '/../data');
+    global.output_dir = path.join(`${__dirname}/../data/output`);
+
+    I = new Playwright({
+      url: siteUrl,
+      windowSize: '500x700',
+      show: false,
+      restart: true,
+      browser: 'chromium',
+      trace: true,
+      video: true,
+    });
+    I._init();
+    return I._beforeSuite();
+  });
+
+  beforeEach(async () => {
+    webApiTests.init({
+      I, siteUrl,
+    });
+    deleteDir(path.join(global.output_dir, 'video'));
+    return I._before().then(() => {
+      page = I.page;
+      browser = I.browser;
+    });
+  });
+
+  afterEach(async () => {
+    return I._after();
+  });
+
+  it('grabs performance metrics', async () => {
+    await I.amOnPage('https://codecept.io');
+    const metrics = await I.grabMetrics();
+    console.log(metrics);
+    expect(metrics.length).to.greaterThan(0);
+    expect(metrics[0].name).to.equal('Timestamp');
+  });
+});
+
 describe('Playwright - Video & Trace', () => {
   before(() => {
     global.codecept_dir = path.join(__dirname, '/../data');