WIP: update base fixtures and noop test

e2e/baseFixtures.js

@@ -64,6 +64,26 @@ function waitForAnimations(locator) {
                     .map((animation) => animation.finished)));
 }
 
+/**
+* Return a performance metric from the chrome cdp session.
+* Note: Chrome-only
+* @param {object} page page to attach cdpClient
+* @param {String} metricName the name of the metric to be extracted
+* @return {Object}
+* @see {@link https://github.com/microsoft/playwright/issues/18071 Github RFE}
+*/
+async function getMetrics(client) {
+    const perfMetricObject = await client.send('Performance.getMetrics');
+    const extractedMetric = perfMetricObject?.metrics;
+    const metricObject = extractedMetric.reduce((acc, {name, value}) => {
+        acc[name] = value;
+
+        return acc;
+    }, {});
+
+    return metricObject;
+}
+
 /**
  * This is part of our codecoverage shim.
  * @see {@link https://github.com/mxschmitt/playwright-test-coverage Github Example Project}
@@ -172,3 +192,4 @@ exports.test = base.test.extend({
 });
 exports.expect = expect;
 exports.waitForAnimations = waitForAnimations;
+exports.getMetrics = getMetrics;

e2e/tests/performance/css-recalc.perf.spec.js

@@ -0,0 +1,148 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/**
+ * This is a test suite to assert that we're not regressing in terms of performance in our css rendering pipeline. The general
+ * approach is to get the application into an important state where we can run a new test against a known baseline.
+ */
+
+const uuid = require('uuid');
+
+const { test, expect } = require('@playwright/test');
+const { getMetrics } = require('../../baseFixtures');
+const { createDomainObjectWithDefaults } = require('../../appActions');
+
+const CSS_RECALC_COUNT_METRIC = 'RecalcStyleCount';
+const CSS_RECALC_STYLE_DURATION = 'RecalcStyleDuration';
+const CSS_RECALC_LAYOUT_COUNT = 'LayoutCount';
+
+test.describe('Compare css recalculation count to check for unnecessary DOM repaints', () => {
+    let client;
+
+    test.beforeEach(async ({ page }) => {
+        client = await page.context().newCDPSession(page);
+        await client.send('Performance.enable');
+    });
+    
+    test.afterEach(async ({ page }) => {
+        client.detach();
+        client = undefined;
+    });
+
+    test.only('Navigate to nothing', async ({ page, browser}) => {
+
+        await page.goto('./');
+        await page.goto("./?tc.mode=local&tc.timeSystem=utc&tc.startBound=1666303575413&tc.endBound=1666304490413", { waitUntil: "networkidle" });
+
+        await page.waitForSelector('.c-create-button');
+        const { [CSS_RECALC_COUNT_METRIC]: recalcCountBefore, [CSS_RECALC_LAYOUT_COUNT]: recalcLayoutCountBefore } = await getMetrics(client);
+        await page.waitForTimeout(5 * 1000);
+            // await page.locator('.c-create-button').click();
+
+        const { [CSS_RECALC_COUNT_METRIC]: recalcCountAfter, [CSS_RECALC_LAYOUT_COUNT]: recalcLayoutCountAfter } = await getMetrics(client);
+        console.table({
+            recalcLayoutCountBefore,
+            recalcLayoutCountAfter
+        });
+
+
+    });
+
+    test('Inspector', async ({ page, browser }) => {
+        test.info().annotations.push({
+            type: 'issue',
+            description: 'https://github.com/nasa/openmct/issues/5247'
+        });
+
+
+        const cssRecalcBaseline = 94;
+        const objectName = await createDomainObjectWithDefaults(page, 'Folder');
+
+        console.log({ objectName });
+        const { [CSS_RECALC_COUNT_METRIC]: recalcCountBefore } = await getMetrics(client);        
+
+        await page.goto('./?tc.mode=local', { waitUntil: 'networkidle' });
+
+        await page.waitForTimeout(3*1000);
+
+        const { [CSS_RECALC_COUNT_METRIC]: recalcCountAfter } = await getMetrics(client);
+
+        console.table({
+            cssRecalcBaseline,
+            recalcCountBefore,
+            recalcCountAfter
+        });
+        expect(recalcCountAfter).toBeLessThan(cssRecalcBaseline);
+    });
+
+    test('Clicking create button', async ({ page, browser }) => {
+        const cssRecalcBaseline = 35;
+
+        await page.goto('./');
+        const { [CSS_RECALC_COUNT_METRIC]: recalcCountBefore } = await getMetrics(client);        
+        await page.locator('.c-create-button').click();
+        const { [CSS_RECALC_COUNT_METRIC]: recalcCountAfter } = await getMetrics(client);
+        console.table({
+            cssRecalcBaseline,
+            recalcCountBefore,
+            recalcCountAfter
+        });
+        expect(recalcCountAfter).toBeLessThan(cssRecalcBaseline);
+    });
+
+    test('Searching', async ({ page, browser }) => {
+        const cssRecalcBaseline = 20;
+        const objectName = await createDomainObjectWithDefaults(page, 'Example Imagery', 'Example Imagery'.concat(' ', uuid.v4()));
+        await page.goto('./');
+
+        const searchInput = page.locator('[aria-label="OpenMCT Search"] [aria-label="Search Input"]');
+        await searchInput.hover();
+        const { [CSS_RECALC_COUNT_METRIC]: recalcCountBefore } = await getMetrics(client);
+        await searchInput.fill(objectName);
+        const { [CSS_RECALC_COUNT_METRIC]: recalcCountAfter } = await getMetrics(client);
+        console.table({
+            cssRecalcBaseline,
+            recalcCountBefore,
+            recalcCountAfter,
+            diff: recalcCountAfter - recalcCountBefore
+        });
+        expect(recalcCountAfter).toBeLessThan(cssRecalcBaseline);
+    });
+    test.fixme('MCT Tree', async ({ page, browser }) => {
+        await page.goto('./#/browse/mine?hideTree=false');
+        const objectNames = await Promise.all([
+            createDomainObjectWithDefaults(page, 'Folder', 'Folder'.concat(' ', uuid.v4())),
+            // createDomainObjectWithDefaults(page, 'Folder', 'Folder'.concat(' ', uuid.v4()))
+        ]);
+        console.log({objectNames});
+        await Promise.all(objectNames.map(x => page.locator(`.c-tree__item a:has-text("${x}")`)));
+    });
+    test.fixme('Plot', async ({ page, browser }) => {
+        await page.goto('./');
+        const objectName = await createDomainObjectWithDefaults(page, 'Plot', 'Plot'.concat(' ', uuid.v4()));
+
+        await page.goto('./#/browse/mine?hideTree=false');
+
+        await page.locator(`.c-tree__item a:has-text("${objectName}")`).click();
+    });
+    test.fixme('Clicking on previous folder', async ({ page, browser }) => { });
+
+});