Fix all of the e2e tests (#5477)

* Fix timer test

* be explicit about the warnings text

* add full suite to CI to enable CircleCI Checks

* add back in devtool=false for CI env so firefox tests run

* add framework suite

* Don't install webpack HMR in CI

* Fix playwright version installs

* exclude HMR if running tests in any environment

- use NODE_ENV=TEST to exclude webpack HMR

- deparameterize some of the playwright configs

* use lower-case 'test'

* timer hover fix

* conditionally skip for firefox due to missing console events

* increase timeouts to give time for mutation

* no need to close save banner

* remove devtool setting

* revert

* update snapshots

* disable video to save some resources

* use one worker

* more timeouts :)

* Remove `browser.close()` and `page.close()` as it was breaking other tests

* Remove unnecessary awaits and fix func call syntax

* Fix image reset test

* fix restrictedNotebook tests

* revert playwright-ci.config settings

* increase timeout for polling imagery test

* remove unnecessary waits

* disable notebook lock test for chrome-beta as its unreliable

- remove some unnecessary 'wait for save banner' logic

- remove unused await

- mark imagery test as slow in chrome-beta

* LINT!! *shakes fist*

* don't run full e2e suite per commit

* disable video in all configs

* add flakey zoom comment

* exclude webpack HMR in non-development modes

Co-authored-by: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>

.github/workflows/e2e-pr.yml

@@ -30,7 +30,8 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: '16'
-      - run: npx playwright@1.21.1 install
+      - run: npx playwright@1.23.0 install
+      - run: npx playwright install chrome-beta
       - run: npm install
       - run: npm run test:e2e:full
       - name: Archive test results

.github/workflows/e2e-visual.yml

@@ -17,7 +17,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: '16'
-      - run: npx playwright@1.21.1 install
+      - run: npx playwright@1.23.0 install
       - run: npm install
       - name: Run the e2e visual tests
         run: npm run test:e2e:visual

app.js

@@ -12,6 +12,7 @@ const express = require('express');
 const app = express();
 const fs = require('fs');
 const request = require('request');
+const __DEV__ = process.env.NODE_ENV === 'development';
 
 // Defaults
 options.port = options.port || options.p || 8080;
@@ -49,14 +50,18 @@ class WatchRunPlugin {
 }
 
 const webpack = require('webpack');
-const webpackConfig = process.env.CI ? require('./webpack.coverage.js') : require('./webpack.dev.js');
-webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
-webpackConfig.plugins.push(new WatchRunPlugin());
-
-webpackConfig.entry.openmct = [
-    'webpack-hot-middleware/client?reload=true',
-    webpackConfig.entry.openmct
-];
+let webpackConfig;
+if (__DEV__) {
+    webpackConfig = require('./webpack.dev');
+    webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
+    webpackConfig.entry.openmct = [
+        'webpack-hot-middleware/client?reload=true',
+        webpackConfig.entry.openmct
+    ];
+    webpackConfig.plugins.push(new WatchRunPlugin());
+} else {
+    webpackConfig = require('./webpack.coverage');
+}
 
 const compiler = webpack(webpackConfig);
 
@@ -68,10 +73,12 @@ app.use(require('webpack-dev-middleware')(
     }
 ));
 
-app.use(require('webpack-hot-middleware')(
-    compiler,
-    {}
-));
+if (__DEV__) {
+    app.use(require('webpack-hot-middleware')(
+        compiler,
+        {}
+    ));
+}
 
 // Expose index.html for development users.
 app.get('/', function (req, res) {

e2e/playwright-ci.config.js

@@ -4,6 +4,8 @@
 
 // eslint-disable-next-line no-unused-vars
 const { devices } = require('@playwright/test');
+const MAX_FAILURES = 5;
+const NUM_WORKERS = 2;
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
@@ -12,20 +14,20 @@ const config = {
     testIgnore: '**/*.perf.spec.js', //Ignore performance tests and define in playwright-perfromance.config.js
     timeout: 60 * 1000,
     webServer: {
-        command: 'npm run start',
+        command: 'cross-env NODE_ENV=test npm run start',
         url: 'http://localhost:8080/#',
         timeout: 200 * 1000,
-        reuseExistingServer: !process.env.CI
+        reuseExistingServer: false
     },
-    maxFailures: process.env.CI ? 5 : undefined, //Limits failures to 5 to reduce CI Waste
-    workers: 2, //Limit to 2 for CircleCI Agent
+    maxFailures: MAX_FAILURES, //Limits failures to 5 to reduce CI Waste
+    workers: NUM_WORKERS, //Limit to 2 for CircleCI Agent
     use: {
         baseURL: 'http://localhost:8080/',
         headless: true,
         ignoreHTTPSErrors: true,
         screenshot: 'only-on-failure',
         trace: 'on-first-retry',
-        video: 'on-first-retry'
+        video: 'off'
     },
     projects: [
         {

e2e/playwright-local.config.js

@@ -12,10 +12,10 @@ const config = {
     testIgnore: '**/*.perf.spec.js',
     timeout: 30 * 1000,
     webServer: {
-        command: 'npm run start',
+        command: 'cross-env NODE_ENV=test npm run start',
         url: 'http://localhost:8080/#',
         timeout: 120 * 1000,
-        reuseExistingServer: !process.env.CI
+        reuseExistingServer: true
     },
     workers: 1,
     use: {
@@ -25,7 +25,7 @@ const config = {
         ignoreHTTPSErrors: true,
         screenshot: 'only-on-failure',
         trace: 'retain-on-failure',
-        video: 'retain-on-failure'
+        video: 'off'
     },
     projects: [
         {

e2e/playwright-performance.config.js

@@ -2,22 +2,24 @@
 // playwright.config.js
 // @ts-check
 
+const CI = process.env.CI === 'true';
+
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
     retries: 1, //Only for debugging purposes because trace is enabled only on first retry
     testDir: 'tests/performance/',
     timeout: 60 * 1000,
     workers: 1, //Only run in serial with 1 worker
     webServer: {
-        command: 'npm run start',
+        command: 'cross-env NODE_ENV=test npm run start',
         url: 'http://localhost:8080/#',
         timeout: 200 * 1000,
-        reuseExistingServer: !process.env.CI
+        reuseExistingServer: !CI
     },
     use: {
         browserName: "chromium",
         baseURL: 'http://localhost:8080/',
-        headless: Boolean(process.env.CI), //Only if running locally
+        headless: CI, //Only if running locally
         ignoreHTTPSErrors: true,
         screenshot: 'off',
         trace: 'on-first-retry',

e2e/playwright-visual.config.js

@@ -9,7 +9,7 @@ const config = {
     timeout: 90 * 1000,
     workers: 1, // visual tests should never run in parallel due to test pollution
     webServer: {
-        command: 'npm run start',
+        command: 'cross-env NODE_ENV=test npm run start',
         url: 'http://localhost:8080/#',
         timeout: 200 * 1000,
         reuseExistingServer: !process.env.CI
@@ -21,7 +21,7 @@ const config = {
         ignoreHTTPSErrors: true,
         screenshot: 'on',
         trace: 'off',
-        video: 'on'
+        video: 'off'
     },
     reporter: [
         ['list'],

e2e/tests/branding.e2e.spec.js

@@ -36,7 +36,7 @@ test.describe('Branding tests', () => {
         await page.click('.l-shell__app-logo');
 
         // Verify that the NASA Logo Appears
-        await expect(await page.locator('.c-about__image')).toBeVisible();
+        await expect(page.locator('.c-about__image')).toBeVisible();
 
         // Modify the Build information in 'about' Modal
         const versionInformationLocator = page.locator('ul.t-info.l-info.s-info');

e2e/tests/framework.e2e.spec.js

@@ -0,0 +1,55 @@
+/*****************************************************************************
+ * 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 test suite is dedicated to testing our use of the playwright framework as it
+relates to how we've extended it (i.e. ./e2e/fixtures.js) and assumptions made in our dev environment
+(app.js and ./e2e/webpack-dev-middleware.js)
+*/
+
+const { test } = require('../fixtures.js');
+
+test.describe('fixtures.js tests', () => {
+    test('Verify that tests fail if console.error is thrown', async ({ page }) => {
+        test.fail();
+        //Go to baseURL
+        await page.goto('/', { waitUntil: 'networkidle' });
+
+        //Verify that ../fixtures.js detects console log errors
+        await Promise.all([
+            page.evaluate(() => console.error('This should result in a failure')),
+            page.waitForEvent('console') // always wait for the event to happen while triggering it!
+        ]);
+
+    });
+    test('Verify that tests pass if console.warn is thrown', async ({ page }) => {
+        //Go to baseURL
+        await page.goto('/', { waitUntil: 'networkidle' });
+
+        //Verify that ../fixtures.js detects console log errors
+        await Promise.all([
+            page.evaluate(() => console.warn('This should result in a pass')),
+            page.waitForEvent('console') // always wait for the event to happen while triggering it!
+        ]);
+
+    });
+});

e2e/tests/plugins/condition/condition.e2e.spec.js

@@ -55,16 +55,13 @@ test.describe.serial('Condition Set CRUD Operations on @localStorage', () => {
         await context.storageState({ path: './e2e/test-data/recycled_local_storage.json' });
 
         //Set object identifier from url
-        conditionSetUrl = await page.url();
+        conditionSetUrl = page.url();
         console.log('conditionSetUrl ' + conditionSetUrl);
 
-        getConditionSetIdentifierFromUrl = await conditionSetUrl.split('/').pop().split('?')[0];
+        getConditionSetIdentifierFromUrl = conditionSetUrl.split('/').pop().split('?')[0];
         console.debug('getConditionSetIdentifierFromUrl ' + getConditionSetIdentifierFromUrl);
-        await page.close();
-    });
-    test.afterAll(async ({ browser }) => {
-        await browser.close();
     });
+
     //Load localStorage for subsequent tests
     test.use({ storageState: './e2e/test-data/recycled_local_storage.json' });
     //Begin suite of tests again localStorage
@@ -76,7 +73,7 @@ test.describe.serial('Condition Set CRUD Operations on @localStorage', () => {
         await expect.soft(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Condition Set');
 
         //Assertions on loaded Condition Set in Inspector
-        await expect.soft(page.locator('_vue=item.name=Unnamed Condition Set')).toBeTruthy;
+        expect.soft(page.locator('_vue=item.name=Unnamed Condition Set')).toBeTruthy();
 
         //Reload Page
         await Promise.all([
@@ -87,7 +84,7 @@ test.describe.serial('Condition Set CRUD Operations on @localStorage', () => {
         //Re-verify after reload
         await expect.soft(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Condition Set');
         //Assertions on loaded Condition Set in Inspector
-        await expect.soft(page.locator('_vue=item.name=Unnamed Condition Set')).toBeTruthy;
+        expect.soft(page.locator('_vue=item.name=Unnamed Condition Set')).toBeTruthy();
 
     });
     test('condition set object can be modified on @localStorage', async ({ page }) => {
@@ -113,18 +110,18 @@ test.describe.serial('Condition Set CRUD Operations on @localStorage', () => {
 
         // Verify Inspector properties
         // Verify Inspector has updated Name property
-        await expect.soft(page.locator('text=Renamed Condition Set').nth(1)).toBeTruthy();
+        expect.soft(page.locator('text=Renamed Condition Set').nth(1)).toBeTruthy();
         // Verify Inspector Details has updated Name property
-        await expect.soft(page.locator('text=Renamed Condition Set').nth(2)).toBeTruthy();
+        expect.soft(page.locator('text=Renamed Condition Set').nth(2)).toBeTruthy();
 
         // Verify Tree reflects updated Name proprety
         // Expand Tree
         await page.locator('text=Open MCT My Items >> span >> nth=3').click();
         // Verify Condition Set Object is renamed in Tree
-        await expect(page.locator('a:has-text("Renamed Condition Set")')).toBeTruthy();
+        expect(page.locator('a:has-text("Renamed Condition Set")')).toBeTruthy();
         // Verify Search Tree reflects renamed Name property
         await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Renamed');
-        await expect(page.locator('a:has-text("Renamed Condition Set")')).toBeTruthy();
+        expect(page.locator('a:has-text("Renamed Condition Set")')).toBeTruthy();
 
         //Reload Page
         await Promise.all([
@@ -137,18 +134,18 @@ test.describe.serial('Condition Set CRUD Operations on @localStorage', () => {
 
         // Verify Inspector properties
         // Verify Inspector has updated Name property
-        await expect.soft(page.locator('text=Renamed Condition Set').nth(1)).toBeTruthy();
+        expect.soft(page.locator('text=Renamed Condition Set').nth(1)).toBeTruthy();
         // Verify Inspector Details has updated Name property
-        await expect.soft(page.locator('text=Renamed Condition Set').nth(2)).toBeTruthy();
+        expect.soft(page.locator('text=Renamed Condition Set').nth(2)).toBeTruthy();
 
         // Verify Tree reflects updated Name proprety
         // Expand Tree
         await page.locator('text=Open MCT My Items >> span >> nth=3').click();
         // Verify Condition Set Object is renamed in Tree
-        await expect(page.locator('a:has-text("Renamed Condition Set")')).toBeTruthy();
+        expect(page.locator('a:has-text("Renamed Condition Set")')).toBeTruthy();
         // Verify Search Tree reflects renamed Name property
         await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Renamed');
-        await expect(page.locator('a:has-text("Renamed Condition Set")')).toBeTruthy();
+        expect(page.locator('a:has-text("Renamed Condition Set")')).toBeTruthy();
     });
     test('condition set object can be deleted by Search Tree Actions menu on @localStorage', async ({ page }) => {
         //Navigate to baseURL

e2e/tests/plugins/imagery/exampleImagery.e2e.spec.js

@@ -172,7 +172,8 @@ test.describe('Example Imagery Object', () => {
 
     });
 
-    test('Can use the reset button to reset the image', async ({ page }) => {
+    test('Can use the reset button to reset the image', async ({ page }, testInfo) => {
+        test.slow(testInfo.project === 'chrome-beta', "This test is slow in chrome-beta");
         // wait for zoom animation to finish
         await page.locator(backgroundImageSelector).hover({trial: true});
 
@@ -191,16 +192,17 @@ test.describe('Example Imagery Object', () => {
         expect.soft(zoomedInBoundingBox.height).toBeGreaterThan(initialBoundingBox.height);
         expect.soft(zoomedInBoundingBox.width).toBeGreaterThan(initialBoundingBox.width);
 
-        await zoomResetBtn.click();
         // wait for zoom animation to finish
-        await page.locator(backgroundImageSelector).hover({trial: true});
-
-        const resetBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
-        expect.soft(resetBoundingBox.height).toBeLessThan(zoomedInBoundingBox.height);
-        expect.soft(resetBoundingBox.width).toBeLessThan(zoomedInBoundingBox.width);
+        // FIXME: The zoom is flakey, sometimes not returning to original dimensions
+        // https://github.com/nasa/openmct/issues/5491
+        await expect.poll(async () => {
+            await zoomResetBtn.click();
+            const boundingBox = await page.locator(backgroundImageSelector).boundingBox();
 
-        expect.soft(resetBoundingBox.height).toEqual(initialBoundingBox.height);
-        expect(resetBoundingBox.width).toEqual(initialBoundingBox.width);
+            return boundingBox;
+        }, {
+            timeout: 10 * 1000
+        }).toEqual(initialBoundingBox);
     });
 
     test('Using the zoom features does not pause telemetry', async ({ page }) => {