Add console error checking to our e2e suite (#5177)

Co-authored-by: unlikelyzero <jchill2@gmail.com>

.github/ISSUE_TEMPLATE/bug_report.md

@@ -40,6 +40,7 @@ assignees: ''
 - [ ] Is there a workaround available?
 - [ ] Does this impact a critical component?
 - [ ] Is this just a visual bug with no functional impact?
+- [ ] Does this block the execution of e2e tests?
 
 #### Additional Information
 <!--- Include any screenshots, gifs, or logs which will expedite triage -->

e2e/fixtures.js

@@ -0,0 +1,27 @@
+/* eslint-disable no-undef */
+
+// This file extends the base functionality of the playwright test framework
+const base = require('@playwright/test');
+const { expect } = require('@playwright/test');
+
+exports.test = base.test.extend({
+    page: async ({ baseURL, page }, use) => {
+        const messages = [];
+        page.on('console', msg => messages.push(`[${msg.type()}] ${msg.text()}`));
+        await use(page);
+        await expect.soft(messages.toString()).not.toContain('[error]');
+    },
+    browser: async ({ playwright, browser }, use, workerInfo) => {
+    // Use browserless if configured
+        if (workerInfo.project.name.match(/browserless/)) {
+            const vBrowser = await playwright.chromium.connectOverCDP({
+                endpointURL: 'ws://localhost:3003'
+            });
+            await use(vBrowser);
+        } else {
+            // Use Local Browser for testing.
+            await use(browser);
+        }
+    }
+});
+

e2e/tests/branding.e2e.spec.js

@@ -24,7 +24,8 @@
 This test suite is dedicated to tests which verify branding related components.
 */
 
-const { test, expect } = require('@playwright/test');
+const { test } = require('../fixtures.js');
+const { expect } = require('@playwright/test');
 
 test.describe('Branding tests', () => {
     test('About Modal launches with basic branding properties', async ({ page }) => {

e2e/tests/example/eventGenerator.e2e.spec.js

@@ -24,7 +24,8 @@
 This test suite is dedicated to tests which verify the basic operations surrounding the example event generator.
 */
 
-const { test, expect } = require('@playwright/test');
+const { test } = require('../../fixtures.js');
+const { expect } = require('@playwright/test');
 
 test.describe('Example Event Generator Operations', () => {
     test('Can create example event generator with a name', async ({ page }) => {

e2e/tests/example/generator/SinewaveLimitProvider.e2e.spec.js

@@ -24,7 +24,8 @@
 This test suite is dedicated to tests which verify the basic operations surrounding conditionSets.
 */
 
-const { test, expect } = require('@playwright/test');
+const { test } = require('../../../fixtures.js');
+const { expect } = require('@playwright/test');
 
 test.describe('Sine Wave Generator', () => {
     test('Create new Sine Wave Generator Object and validate create Form Logic', async ({ page }) => {

e2e/tests/moveObjects.e2e.spec.js

@@ -24,7 +24,8 @@
 This test suite is dedicated to tests which verify the basic operations surrounding moving objects.
 */
 
-const { test, expect } = require('@playwright/test');
+const { test } = require('../fixtures.js');
+const { expect } = require('@playwright/test');
 
 test.describe('Move item tests', () => {
     test('Create a basic object and verify that it can be moved to another folder', async ({ page }) => {

e2e/tests/persistence/persistability.e2e.spec.js

@@ -24,7 +24,8 @@
 This test suite is dedicated to tests which verify the basic operations surrounding conditionSets.
 */
 
-const { test, expect } = require('@playwright/test');
+const { test } = require('../../fixtures.js');
+const { expect } = require('@playwright/test');
 const path = require('path');
 
 // https://github.com/nasa/openmct/issues/4323#issuecomment-1067282651

e2e/tests/plugins/ExportAsJSON/exportAsJson.e2e.spec.js

@@ -24,7 +24,8 @@
 This test suite is dedicated to tests which verify the basic operations surrounding exportAsJSON.
 */
 
-const { test, expect } = require('@playwright/test');
+const { test } = require('../../../fixtures.js');
+const { expect } = require('@playwright/test');
 
 test.describe('ExportAsJSON', () => {
     test.fixme('Create a basic object and verify that it can be exported as JSON from Tree', async ({ page }) => {

e2e/tests/plugins/ImportAsJSON/importAsJson.e2e.spec.js

@@ -24,7 +24,8 @@
 This test suite is dedicated to tests which verify the basic operations surrounding importAsJSON.
 */
 
-const { test, expect } = require('@playwright/test');
+const { test } = require('../../../fixtures.js');
+const { expect } = require('@playwright/test');
 
 test.describe('ExportAsJSON', () => {
     test.fixme('Verify that domain object can be importAsJSON from Tree', async ({ page }) => {

e2e/tests/plugins/clock/Clock.e2e.spec.js

@@ -24,7 +24,8 @@
 This test suite is dedicated to tests which verify the basic operations surrounding Clock.
 */
 
-const { test, expect } = require('@playwright/test');
+const { test } = require('../../../fixtures.js');
+const { expect } = require('@playwright/test');
 
 test.describe('Clock Generator', () => {
 

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

@@ -26,7 +26,8 @@ suite is sharing state between tests which is considered an anti-pattern. Implim
 demonstrate some playwright for test developers. This pattern should not be re-used in other CRUD suites.
 */
 
-const { test, expect } = require('@playwright/test');
+const { test } = require('../../../fixtures.js');
+const { expect } = require('@playwright/test');
 
 let conditionSetUrl;
 let getConditionSetIdentifierFromUrl;

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

@@ -26,7 +26,8 @@ but only assume that example imagery is present.
 */
 /* globals process */
 
-const { test, expect } = require('@playwright/test');
+const { test } = require('../../../fixtures.js');
+const { expect } = require('@playwright/test');
 
 test.describe('Example Imagery', () => {
 
@@ -41,6 +42,9 @@ test.describe('Example Imagery', () => {
         // Click text=Example Imagery
         await page.click('text=Example Imagery');
 
+        // Click on My Items in Tree. Workaround for https://github.com/nasa/openmct/issues/5184
+        await page.click('form[name="mctForm"] a:has-text("My Items")');
+
         // Click text=OK
         await Promise.all([
             page.waitForNavigation({waitUntil: 'networkidle'}),

e2e/tests/plugins/plot/autoscale.e2e.spec.js

@@ -24,7 +24,8 @@
 Testsuite for plot autoscale.
 */
 
-const { test: _test, expect } = require('@playwright/test');
+const { test: _test } = require('../../../fixtures.js');
+const { expect } = require('@playwright/test');
 
 // create a new `test` API that will not append platform details to snapshot
 // file names, only for the tests in this file, so that the same snapshots will
@@ -47,7 +48,10 @@ test.use({
 });
 
 test.describe('ExportAsJSON', () => {
-    test.slow('User can set autoscale with a valid range @snapshot', async ({ page }) => {
+    test('User can set autoscale with a valid range @snapshot', async ({ page }) => {
+        //This is necessary due to the size of the test suite.
+        await test.setTimeout(120 * 1000);
+
         await page.goto('/', { waitUntil: 'networkidle' });
 
         await setTimeRange(page);

e2e/tests/plugins/plot/logPlot.e2e.spec.js

@@ -25,10 +25,14 @@ Tests to verify log plot functionality. Note this test suite if very much under
 necessarily be used for reference when writing new tests in this area.
 */
 
-const { test, expect } = require('@playwright/test');
+const { test } = require('../../../fixtures.js');
+const { expect } = require('@playwright/test');
 
 test.describe('Log plot tests', () => {
-    test.slow('Log Plot ticks are functionally correct in regular and log mode and after refresh', async ({ page }) => {
+    test('Log Plot ticks are functionally correct in regular and log mode and after refresh', async ({ page }) => {
+        //This is necessary due to the size of the test suite.
+        await test.setTimeout(120 * 1000);
+
         await makeOverlayPlot(page);
         await testRegularTicks(page);
         await enableEditMode(page);

e2e/tests/plugins/timeConductor/timeConductor.e2e.spec.js

@@ -20,7 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { test, expect } = require('@playwright/test');
+const { test } = require('../../../fixtures.js');
+const { expect } = require('@playwright/test');
 
 test.describe('Time counductor operations', () => {
     test('validate start time does not exceeds end time', async ({ page }) => {
@@ -68,7 +69,6 @@ test.describe('Time counductor operations', () => {
     });
 });
 
-
 // Testing instructions:
 // Try to change the realtime offsets when in realtime (local clock) mode.
 test.describe('Time conductor input fields real-time mode', () => {
@@ -101,7 +101,7 @@ test.describe('Time conductor input fields real-time mode', () => {
         await page.locator('.c-conductor__delta-button >> text=00:00:30').click();
 
         // Input preceding time offset
-        await page.fill('.pr-time-controls__secs', '31')
+        await page.fill('.pr-time-controls__secs', '31');
 
         // Click the check buttons
         await page.locator('.icon-check').click();

e2e/tests/smoke.e2e.spec.js

@@ -33,7 +33,8 @@ comfortable running this test during a live mission?" Avoid creating or deleting
 Make no assumptions about the order that elements appear in the DOM.
 */
 
-const { test, expect } = require('@playwright/test');
+const { test } = require('../fixtures.js');
+const { expect } = require('@playwright/test');
 
 test('Verify that the create button appears and that the Folder Domain Object is available for selection', async ({ page }) => {
 

package.json

@@ -92,7 +92,7 @@
     "test": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --single-run",
     "test:firefox": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --single-run --browsers=FirefoxHeadless",
     "test:debug": "cross-env NODE_ENV=debug karma start --no-single-run",
-    "test:e2e:ci": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome smoke default condition timeConductor branding clock",
+    "test:e2e:ci": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome smoke default condition timeConductor branding clock exampleImagery",
     "test:e2e:local": "npx playwright test --config=e2e/playwright-local.config.js --project=chrome",
     "test:e2e:updatesnapshots": "npx playwright test --config=e2e/playwright-local.config.js --project=chrome --grep @snapshot --update-snapshots",
     "test:e2e:visual": "percy exec --config ./e2e/.percy.yml -- npx playwright test --config=e2e/playwright-visual.config.js default",