refactor: migrate to ESM (#7331)

* refactor: move package.json to type: module

this is where the fun begins

* chore: move webpack common and prod to esm

* chore: move webpack to esm, eslint to explicit cjs

* refactor: migrate all files to esm

* style: lint

* refactor: begin moving karma to cjs, use dynamic esm import

* refactor: move index-test to cjs

* refactor: begin moving e2e to ESM

this was manual. I'm committing this because I'm about to try the `cjstoesm` tool

* refactor: move all to esm

* fix: make all e2e tests use .js imports

* refactor: begin moving exports to esm

* refactor: use URL transforms instead of __dirname

* fix: use libraryExport: default to properly handle openmct

* fix: export all playwright configs as modules

* refactor: move all instances of __dirname to import.meta.url

* refactor: lint, drop unnecessary URL call

* fix: use correct URL path on helper/addNoneditableObject.js

* fix: more incorrect URL resolve issues

* fix: parse json after reading it

.webpack/webpack.common.js

@@ -1,5 +1,3 @@
-/* global __dirname module */
-
 /*
 This is the OpenMCT common webpack file. It is imported by the other three webpack configurations:
  - webpack.prod.js - the production configuration for OpenMCT (default)
@@ -8,27 +6,30 @@ This is the OpenMCT common webpack file. It is imported by the other three webpa
 There are separate npm scripts to use these configurations, though simply running `npm install`
 will use the default production configuration.
 */
-const path = require('path');
+import path from 'node:path';
-const packageDefinition = require('../package.json');
+import CopyWebpackPlugin from 'copy-webpack-plugin';
-const CopyWebpackPlugin = require('copy-webpack-plugin');
+import webpack from 'webpack';
-const webpack = require('webpack');
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+import fs from 'node:fs';
+import { execSync } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
 
-const { VueLoaderPlugin } = require('vue-loader');
+import { VueLoaderPlugin } from 'vue-loader';
 let gitRevision = 'error-retrieving-revision';
 let gitBranch = 'error-retrieving-branch';
 
+const packageDefinition = JSON.parse(fs.readFileSync(new URL('../package.json', import.meta.url)));
+
 try {
-  gitRevision = require('child_process').execSync('git rev-parse HEAD').toString().trim();
+  gitRevision = execSync('git rev-parse HEAD').toString().trim();
-  gitBranch = require('child_process')
+  gitBranch = execSync('git rev-parse --abbrev-ref HEAD')
-    .execSync('git rev-parse --abbrev-ref HEAD')
     .toString()
     .trim();
 } catch (err) {
   console.warn(err);
 }
 
-const projectRootDir = path.resolve(__dirname, '..');
+const projectRootDir = fileURLToPath(new URL('../', import.meta.url));
 
 /** @type {import('webpack').Configuration} */
 const config = {
@@ -56,6 +57,7 @@ const config = {
     filename: '[name].js',
     path: path.resolve(projectRootDir, 'dist'),
     library: 'openmct',
+    libraryExport: 'default',
     libraryTarget: 'umd',
     publicPath: '',
     hashFunction: 'xxhash64',
@@ -183,4 +185,4 @@ const config = {
   }
 };
 
-module.exports = config;
+export default config;

.webpack/webpack.coverage.js

@@ -1,12 +1,10 @@
-/* global module */
-
 /*
 This file extends the webpack.dev.js config to add babel istanbul coverage.
 OpenMCT Continuous Integration servers use this configuration to add code coverage
 information to pull requests.
 */
 
-const config = require('./webpack.dev');
+import config from './webpack.dev.js';
 // eslint-disable-next-line no-undef
 const CI = process.env.CI === 'true';
 
@@ -34,4 +32,4 @@ config.module.rules.push({
   }
 });
 
-module.exports = config;
+export default config;

.webpack/webpack.dev.js

@@ -1,18 +1,16 @@
-/* global __dirname module */
-
 /*
 This configuration should be used for development purposes. It contains full source map, a
 devServer (which be invoked using by `npm start`), and a non-minified Vue.js distribution.
 If OpenMCT is to be used for a production server, use webpack.prod.js instead.
 */
-const path = require('path');
+import path from 'path';
-const webpack = require('webpack');
+import webpack from 'webpack';
-const { merge } = require('webpack-merge');
+import { merge } from 'webpack-merge';
+import { fileURLToPath } from 'node:url';
 
-const common = require('./webpack.common');
+import common from './webpack.common.js';
-const projectRootDir = path.resolve(__dirname, '..');
 
-module.exports = merge(common, {
+export default merge(common, {
   mode: 'development',
   watchOptions: {
     // Since we use require.context, webpack is watching the entire directory.
@@ -42,7 +40,7 @@ module.exports = merge(common, {
     },
     watchFiles: ['**/*.css'],
     static: {
-      directory: path.join(__dirname, '..', '/dist'),
+      directory: fileURLToPath(new URL('../dist', import.meta.url)),
       publicPath: '/dist',
       watch: false
     }

.webpack/webpack.prod.js

@@ -1,17 +1,14 @@
-/* global __dirname module */
-
 /*
 This configuration should be used for production installs.
 It is the default webpack configuration.
 */
-const path = require('path');
-const webpack = require('webpack');
-const { merge } = require('webpack-merge');
 
-const common = require('./webpack.common');
+import webpack from 'webpack';
-const projectRootDir = path.resolve(__dirname, '..');
+import { merge } from 'webpack-merge';
 
-module.exports = merge(common, {
+import common from './webpack.common.js';
+
+export default merge(common, {
   mode: 'production',
   plugins: [
     new webpack.DefinePlugin({

e2e/README.md

@@ -480,7 +480,7 @@ The following contains a list of tips and tricks which don't exactly fit into a
 It is possible to override the browser's clock in order to control time-based elements. Since this can cause unwanted behavior (i.e. Tree not rendering), only use this sparingly. To do this, use the `overrideClock` fixture as such:
 
 ```js
-const { test, expect } = require('../../pluginFixtures.js');
+import { test, expect } from '../../pluginFixtures.js';
 
 test.describe('foo test suite', () => {
   

e2e/appActions.js

@@ -54,9 +54,9 @@
  * @property {import('../src/api/notifications/NotificationAPI').NotificationOptions} [notificationOptions] additional options
  */
 
-const Buffer = require('buffer').Buffer;
+import { expect } from '@playwright/test';
-const genUuid = require('uuid').v4;
+import { Buffer } from 'buffer';
-const { expect } = require('@playwright/test');
+import { v4 as genUuid } from 'uuid';
 
 /**
  * This common function creates a domain object with the default options. It is the preferred way of creating objects
@@ -644,8 +644,7 @@ async function renameObjectFromContextMenu(page, url, newName) {
   await page.click('[aria-label="Save"]');
 }
 
-// eslint-disable-next-line no-undef
+export {
-module.exports = {
   createDomainObjectWithDefaults,
   createExampleTelemetryObject,
   createNotification,
@@ -653,16 +652,16 @@ module.exports = {
   expandEntireTree,
   expandTreePaneItemByName,
   getCanvasPixels,
-  getHashUrlToDomainObject,
   getFocusedObjectUuid,
+  getHashUrlToDomainObject,
   navigateToObjectWithFixedTimeBounds,
   openObjectTreeContextMenu,
+  renameObjectFromContextMenu,
+  setEndOffset,
   setFixedTimeMode,
+  setIndependentTimeConductorBounds,
   setRealTimeMode,
   setStartOffset,
-  setEndOffset,
   setTimeConductorBounds,
-  setIndependentTimeConductorBounds,
+  waitForPlotsToRender
-  waitForPlotsToRender,
-  renameObjectFromContextMenu
 };

e2e/avpFixtures.js

@@ -33,10 +33,11 @@
  * existing ones.
  */
 
-const fs = require('fs');
+import AxeBuilder from '@axe-core/playwright';
-const path = require('path');
+import fs from 'fs';
-const { test, expect } = require('./pluginFixtures');
+import path from 'path';
-const AxeBuilder = require('@axe-core/playwright').default;
+
+import { expect, test } from './pluginFixtures.js';
 
 // Constants for repeated values
 const TEST_RESULTS_DIR = './test-results';
@@ -56,7 +57,7 @@ const TEST_RESULTS_DIR = './test-results';
  *                                  otherwise returns null.
  */
 /* eslint-disable no-undef */
-exports.scanForA11yViolations = async function (page, testCaseName, options = {}) {
+export async function scanForA11yViolations(page, testCaseName, options = {}) {
   const builder = new AxeBuilder({ page });
   builder.withTags(['wcag2aa']);
   // https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md
@@ -91,7 +92,6 @@ exports.scanForA11yViolations = async function (page, testCaseName, options = {}
     console.log('No accessibility violations found, no report generated.');
     return null;
   }
-};
+}
 
-exports.expect = expect;
+export { expect, test };
-exports.test = test;

e2e/baseFixtures.js

@@ -28,12 +28,12 @@
  * GitHub issues.
  */
 
-const base = require('@playwright/test');
+import { expect, request, test } from '@playwright/test';
-const { expect, request } = base;
+import fs from 'fs';
-const fs = require('fs');
+import path from 'path';
-const path = require('path');
+import sinon from 'sinon';
-const { v4: uuid } = require('uuid');
+import { fileURLToPath } from 'url';
-const sinon = require('sinon');
+import { v4 as uuid } from 'uuid';
 
 /**
  * Takes a `ConsoleMessage` and returns a formatted string. Used to enable console log error detection.
@@ -68,7 +68,7 @@ function waitForAnimations(locator) {
  */
 const istanbulCLIOutput = path.join(process.cwd(), '.nyc_output');
 
-exports.test = base.test.extend({
+const extendedTest = test.extend({
   /**
    * This allows the test to manipulate the browser clock. This is useful for Visual and Snapshot tests which need
    * the Time Indicator Clock to be in a specific state.
@@ -97,7 +97,7 @@ exports.test = base.test.extend({
     async ({ context, clockOptions }, use) => {
       if (clockOptions !== undefined) {
         await context.addInitScript({
-          path: path.join(__dirname, '../', './node_modules/sinon/pkg/sinon.js')
+          path: fileURLToPath(new URL('../node_modules/sinon/pkg/sinon.js', import.meta.url))
         });
         await context.addInitScript((options) => {
           window.__clock = sinon.useFakeTimers(options);
@@ -201,6 +201,4 @@ exports.test = base.test.extend({
   }
 });
 
-exports.expect = expect;
+export { expect, request, extendedTest as test, waitForAnimations };
-exports.request = request;
-exports.waitForAnimations = waitForAnimations;

e2e/helper/faultUtils.js

@@ -19,14 +19,15 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* global __dirname */
+import { fileURLToPath } from 'url';
-const path = require('path');
 
 /**
  * @param {import('@playwright/test').Page} page
  */
 async function navigateToFaultManagementWithExample(page) {
-  await page.addInitScript({ path: path.join(__dirname, './', 'addInitExampleFaultProvider.js') });
+  await page.addInitScript({
+    path: fileURLToPath(new URL('./addInitExampleFaultProvider.js', import.meta.url))
+  });
 
   await navigateToFaultItemInTree(page);
 }
@@ -36,7 +37,7 @@ async function navigateToFaultManagementWithExample(page) {
  */
 async function navigateToFaultManagementWithStaticExample(page) {
   await page.addInitScript({
-    path: path.join(__dirname, './', 'addInitExampleFaultProviderStatic.js')
+    path: fileURLToPath(new URL('./addInitExampleFaultProviderStatic.js', import.meta.url))
   });
 
   await navigateToFaultItemInTree(page);
@@ -46,7 +47,9 @@ async function navigateToFaultManagementWithStaticExample(page) {
  * @param {import('@playwright/test').Page} page
  */
 async function navigateToFaultManagementWithoutExample(page) {
-  await page.addInitScript({ path: path.join(__dirname, './', 'addInitFaultManagementPlugin.js') });
+  await page.addInitScript({
+    path: fileURLToPath(new URL('./addInitFaultManagementPlugin.js', import.meta.url))
+  });
 
   await navigateToFaultItemInTree(page);
 }
@@ -265,29 +268,28 @@ async function openFaultRowMenu(page, rowNumber) {
     .click();
 }
 
-// eslint-disable-next-line no-undef
+export {
-module.exports = {
-  navigateToFaultManagementWithExample,
-  navigateToFaultManagementWithStaticExample,
-  navigateToFaultManagementWithoutExample,
-  navigateToFaultItemInTree,
   acknowledgeFault,
-  shelveMultipleFaults,
   acknowledgeMultipleFaults,
-  shelveFault,
   changeViewTo,
-  sortFaultsBy,
-  enterSearchTerm,
   clearSearch,
-  selectFaultItem,
+  enterSearchTerm,
-  getHighestSeverity,
-  getLowestSeverity,
-  getFaultResultCount,
   getFault,
   getFaultByName,
   getFaultName,
-  getFaultSeverity,
   getFaultNamespace,
+  getFaultResultCount,
+  getFaultSeverity,
   getFaultTriggerTime,
-  openFaultRowMenu
+  getHighestSeverity,
+  getLowestSeverity,
+  navigateToFaultItemInTree,
+  navigateToFaultManagementWithExample,
+  navigateToFaultManagementWithoutExample,
+  navigateToFaultManagementWithStaticExample,
+  openFaultRowMenu,
+  selectFaultItem,
+  shelveFault,
+  shelveMultipleFaults,
+  sortFaultsBy
 };

e2e/helper/notebookUtils.js

@@ -20,11 +20,11 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { createDomainObjectWithDefaults } = require('../appActions');
+import { createDomainObjectWithDefaults } from '../appActions.js';
 
 const NOTEBOOK_DROP_AREA = '.c-notebook__drag-area';
 const CUSTOM_NAME = 'CUSTOM_NAME';
-const path = require('path');
+import { fileURLToPath } from 'url';
 
 /**
  * @param {import('@playwright/test').Page} page
@@ -69,7 +69,9 @@ async function commitEntry(page) {
  */
 async function startAndAddRestrictedNotebookObject(page) {
   // eslint-disable-next-line no-undef
-  await page.addInitScript({ path: path.join(__dirname, 'addInitRestrictedNotebook.js') });
+  await page.addInitScript({
+    path: fileURLToPath(new URL('./addInitRestrictedNotebook.js', import.meta.url))
+  });
   await page.goto('./', { waitUntil: 'domcontentloaded' });
 
   return createDomainObjectWithDefaults(page, {
@@ -138,12 +140,11 @@ async function createNotebookEntryAndTags(page, iterations = 1) {
   return notebook;
 }
 
-// eslint-disable-next-line no-undef
+export {
-module.exports = {
+  createNotebookAndEntry,
-  enterTextEntry,
-  dragAndDropEmbed,
-  startAndAddRestrictedNotebookObject,
-  lockPage,
   createNotebookEntryAndTags,
-  createNotebookAndEntry
+  dragAndDropEmbed,
+  enterTextEntry,
+  lockPage,
+  startAndAddRestrictedNotebookObject
 };

e2e/helper/planningUtils.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import { expect } from '../pluginFixtures';
+import { expect } from '../pluginFixtures.js';
 
 /**
  * Asserts that the number of activities in the plan view matches the number of

e2e/helper/plotTagsUtils.js

@@ -20,8 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import { expect } from '../pluginFixtures';
+import { waitForPlotsToRender } from '../appActions.js';
-const { waitForPlotsToRender } = require('../appActions');
+import { expect } from '../pluginFixtures.js';
 
 /**
  * Given a canvas and a set of points, tags the points on the canvas.

e2e/playwright-ci.config.js

@@ -1,9 +1,8 @@
-/* eslint-disable no-undef */
 // playwright.config.js
 // @ts-check
 
 // eslint-disable-next-line no-unused-vars
-const { devices } = require('@playwright/test');
+import { devices } from '@playwright/test';
 const MAX_FAILURES = 5;
 const NUM_WORKERS = 2;
 
@@ -81,4 +80,4 @@ const config = {
   ]
 };
 
-module.exports = config;
+export default config;

e2e/playwright-local.config.js

@@ -1,9 +1,8 @@
-/* eslint-disable no-undef */
 // playwright.config.js
 // @ts-check
 
 // eslint-disable-next-line no-unused-vars
-const { devices } = require('@playwright/test');
+import { devices } from '@playwright/test';
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
@@ -104,4 +103,4 @@ const config = {
   ]
 };
 
-module.exports = config;
+export default config;

e2e/playwright-performance-dev.config.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 // playwright.config.js
 // @ts-check
 
@@ -40,4 +39,4 @@ const config = {
   ]
 };
 
-module.exports = config;
+export default config;

e2e/playwright-performance-prod.config.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 // playwright.config.js
 // @ts-check
 
@@ -57,4 +56,4 @@ const config = {
   ]
 };
 
-module.exports = config;
+export default config;

e2e/playwright-visual-a11y.config.js

@@ -51,4 +51,4 @@ const config = {
   ]
 };
 
-module.exports = config;
+export default config;

e2e/playwright-watch.config.js

@@ -1,9 +1,8 @@
-/* eslint-disable no-undef */
 // playwright.config.js
 // @ts-check
 
 // eslint-disable-next-line no-unused-vars
-const { devices } = require('@playwright/test');
+import { devices } from '@playwright/test';
 const MAX_FAILURES = 5;
 const NUM_WORKERS = 2;
 
@@ -51,4 +50,4 @@ const config = {
   ]
 };
 
-module.exports = config;
+export default config;

e2e/pluginFixtures.js

@@ -26,9 +26,10 @@
  * and appActions. These fixtures should be generalized across all plugins.
  */
 
-const { test, expect, request } = require('./baseFixtures');
+// import { createDomainObjectWithDefaults } from './appActions.js';
-// const { createDomainObjectWithDefaults } = require('./appActions');
+import { fileURLToPath } from 'url';
-const path = require('path');
+
+import { expect, request, test } from './baseFixtures.js';
 
 /**
  * @typedef {Object} ObjectCreateOptions
@@ -117,7 +118,7 @@ const theme = 'espresso';
  */
 const myItemsFolderName = 'My Items';
 
-exports.test = test.extend({
+const extendedTest = test.extend({
   // This should follow in the Project's configuration. Can be set to 'snow' in playwright config.js
   theme: [theme, { option: true }],
   // eslint-disable-next-line no-shadow
@@ -125,7 +126,9 @@ exports.test = test.extend({
     // eslint-disable-next-line playwright/no-conditional-in-test
     if (theme === 'snow') {
       //inject snow theme
-      await page.addInitScript({ path: path.join(__dirname, './helper', './useSnowTheme.js') });
+      await page.addInitScript({
+        path: fileURLToPath(new URL('./helper/useSnowTheme.js', import.meta.url))
+      });
     }
 
     // Attach info about the currently running test and its project.
@@ -142,19 +145,18 @@ exports.test = test.extend({
   }
 });
 
-exports.expect = expect;
+export { expect, request, extendedTest as test };
-exports.request = request;
 
 /**
  * Takes a readable stream and returns a string.
  * @param {ReadableStream} readable - the readable stream
  * @return {Promise<String>} the stringified stream
  */
-exports.streamToString = async function (readable) {
+export async function streamToString(readable) {
   let result = '';
   for await (const chunk of readable) {
     result += chunk;
   }
 
   return result;
-};
+}

e2e/tests/framework/appActions.e2e.spec.js

@@ -20,12 +20,12 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { test, expect } = require('../../pluginFixtures.js');
+import {
-const {
   createDomainObjectWithDefaults,
   createNotification,
   expandEntireTree
-} = require('../../appActions.js');
+} from '../../appActions.js';
+import { expect, test } from '../../pluginFixtures.js';
 
 test.describe('AppActions', () => {
   test('createDomainObjectsWithDefaults', async ({ page }) => {

e2e/tests/framework/baseFixtures.e2e.spec.js

@@ -26,7 +26,7 @@ relates to how we've extended it (i.e. ./e2e/baseFixtures.js) and assumptions ma
 (`npm start` and ./e2e/webpack-dev-middleware.js)
 */
 
-const { test } = require('../../baseFixtures.js');
+import { test } from '../../baseFixtures.js';
 
 test.describe('baseFixtures tests', () => {
   //Skip this test for now https://github.com/nasa/openmct/issues/6785

e2e/tests/framework/exampleTemplate.e2e.spec.js

@@ -45,8 +45,8 @@
  */
 
 // Structure: Some standard Imports. Please update the required pathing.
-const { test, expect } = require('../../pluginFixtures');
+import { createDomainObjectWithDefaults } from '../../appActions.js';
-const { createDomainObjectWithDefaults } = require('../../appActions');
+import { expect, test } from '../../pluginFixtures.js';
 
 /**
  * Structure:

e2e/tests/framework/generateLocalStorageData.e2e.spec.js

@@ -19,7 +19,6 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* global __dirname */
 /**
  * This test suite is dedicated to generating LocalStorage via Session Storage to be used
  * in some visual test suites like controlledClock.visual.spec.js. This suite should run to completion
@@ -32,13 +31,11 @@
  * and is additionally verified in the validation test suites below.
  */
 
-const { test, expect } = require('../../pluginFixtures.js');
+import { fileURLToPath } from 'url';
-const {
+
-  createDomainObjectWithDefaults,
+import { createDomainObjectWithDefaults, createExampleTelemetryObject } from '../../appActions.js';
-  createExampleTelemetryObject
+import { MISSION_TIME } from '../../constants.js';
-} = require('../../appActions.js');
+import { expect, test } from '../../pluginFixtures.js';
-const { MISSION_TIME } = require('../../constants.js');
-const path = require('path');
 
 const overlayPlotName = 'Overlay Plot with Telemetry Object';
 
@@ -87,7 +84,9 @@ test.describe('Generate Visual Test Data @localStorage @generatedata', () => {
 
     //Save localStorage for future test execution
     await context.storageState({
-      path: path.join(__dirname, '../../../e2e/test-data/display_layout_with_child_layouts.json')
+      path: fileURLToPath(
+        new URL('../../../e2e/test-data/display_layout_with_child_layouts.json', import.meta.url)
+      )
     });
   });
 
@@ -112,7 +111,9 @@ test.describe('Generate Visual Test Data @localStorage @generatedata', () => {
 
     //Save localStorage for future test execution
     await context.storageState({
-      path: path.join(__dirname, '../../../e2e/test-data/flexible_layout_with_child_layouts.json')
+      path: fileURLToPath(
+        new URL('../../../e2e/test-data/flexible_layout_with_child_layouts.json', import.meta.url)
+      )
     });
   });
 
@@ -189,7 +190,9 @@ test.describe('Generate Visual Test Data @localStorage @generatedata', () => {
 
     // Save localStorage for future test execution
     await context.storageState({
-      path: path.join(__dirname, '../../../e2e/test-data/overlay_plot_storage.json')
+      path: fileURLToPath(
+        new URL('../../../e2e/test-data/overlay_plot_storage.json', import.meta.url)
+      )
     });
   });
   // TODO: Merge this with previous test. Edit object created in previous test.
@@ -226,14 +229,18 @@ test.describe('Generate Visual Test Data @localStorage @generatedata', () => {
     await page.getByRole('button', { name: 'OK' }).click();
     //Save localStorage for future test execution
     await context.storageState({
-      path: path.join(__dirname, '../../../e2e/test-data/overlay_plot_with_delay_storage.json')
+      path: fileURLToPath(
+        new URL('../../../e2e/test-data/overlay_plot_with_delay_storage.json', import.meta.url)
+      )
     });
   });
 });
 
 test.describe('Validate Overlay Plot with Telemetry Object @localStorage @generatedata', () => {
   test.use({
-    storageState: path.join(__dirname, '../../../e2e/test-data/overlay_plot_storage.json')
+    storageState: fileURLToPath(
+      new URL('../../../e2e/test-data/overlay_plot_storage.json', import.meta.url)
+    )
   });
   test('Validate Overlay Plot with Telemetry Object', async ({ page }) => {
     await page.goto('./', { waitUntil: 'domcontentloaded' });
@@ -275,9 +282,8 @@ test.describe('Validate Overlay Plot with Telemetry Object @localStorage @genera
 
 test.describe('Validate Overlay Plot with 5s Delay Telemetry Object @localStorage @generatedata', () => {
   test.use({
-    storageState: path.join(
+    storageState: fileURLToPath(
-      __dirname,
+      new URL('../../../e2e/test-data/overlay_plot_with_delay_storage.json', import.meta.url)
-      '../../../e2e/test-data/overlay_plot_with_delay_storage.json'
     )
   });
   test('Validate Overlay Plot with Telemetry Object', async ({ page }) => {

e2e/tests/framework/pluginFixtures.e2e.spec.js

@@ -25,7 +25,7 @@ This test suite is dedicated to testing our use of our custom fixtures to verify
 that they are working as expected.
 */
 
-const { test } = require('../../pluginFixtures.js');
+import { test } from '../../pluginFixtures.js';
 
 // eslint-disable-next-line playwright/no-skipped-test
 test.describe.skip('pluginFixtures tests', () => {

e2e/tests/functional/branding.e2e.spec.js

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

e2e/tests/functional/clearDataAction.e2e.spec.js

@@ -24,8 +24,8 @@
 Verify that the "Clear Data" menu action performs as expected for various object types.
 */
 
-const { test, expect } = require('../../pluginFixtures.js');
+import { createDomainObjectWithDefaults } from '../../appActions.js';
-const { createDomainObjectWithDefaults } = require('../../appActions.js');
+import { expect, test } from '../../pluginFixtures.js';
 
 const backgroundImageSelector = '.c-imagery__main-image__background-image';
 

e2e/tests/functional/couchdb.e2e.spec.js

@@ -25,7 +25,7 @@
  *
  */
 
-const { test, expect } = require('../../pluginFixtures');
+import { expect, test } from '../../pluginFixtures.js';
 
 test.describe('CouchDB Status Indicator with mocked responses @couchdb', () => {
   test.use({ failOnConsoleError: false });

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

@@ -24,8 +24,8 @@
 This test suite is dedicated to tests which verify the basic operations surrounding the example event generator.
 */
 
-const { test, expect } = require('../../../pluginFixtures');
+import { createDomainObjectWithDefaults } from '../../../appActions.js';
-const { createDomainObjectWithDefaults } = require('../../../appActions');
+import { expect, test } from '../../../pluginFixtures.js';
 
 test.describe('Example Event Generator CRUD Operations', () => {
   test('Can create a Test Event Generator and it results in the table View', async ({ page }) => {

e2e/tests/functional/example/generator/sineWaveLimitProvider.e2e.spec.js

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

e2e/tests/functional/forms.e2e.spec.js

@@ -19,15 +19,16 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* global __dirname */
+
 /*
 This test suite is dedicated to tests which verify form functionality in isolation
 */
 
-const { test, expect } = require('../../pluginFixtures');
+import { fileURLToPath } from 'url';
-const { createDomainObjectWithDefaults } = require('../../appActions');
+import { v4 as genUuid } from 'uuid';
-const genUuid = require('uuid').v4;
+
-const path = require('path');
+import { createDomainObjectWithDefaults } from '../../appActions.js';
+import { expect, test } from '../../pluginFixtures.js';
 
 const TEST_FOLDER = 'test folder';
 const jsonFilePath = 'e2e/test-data/ExampleLayouts.json';
@@ -72,7 +73,7 @@ test.describe('Form Validation Behavior', () => {
 test.describe('Form File Input Behavior', () => {
   test.beforeEach(async ({ page }) => {
     await page.addInitScript({
-      path: path.join(__dirname, '../../helper', 'addInitFileInputObject.js')
+      path: fileURLToPath(new URL('../../helper/addInitFileInputObject.js', import.meta.url))
     });
   });
 
@@ -109,7 +110,7 @@ test.describe('Persistence operations @addInit', () => {
   // add non persistable root item
   test.beforeEach(async ({ page }) => {
     await page.addInitScript({
-      path: path.join(__dirname, '../../helper', 'addNoneditableObject.js')
+      path: fileURLToPath(new URL('../../helper/addNoneditableObject.js', import.meta.url))
     });
   });
 

e2e/tests/functional/menu.e2e.spec.js

@@ -19,20 +19,20 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* global __dirname */
+
 /*
 This test suite is dedicated to tests which verify persistability checks
 */
 
-const { test, expect } = require('../../baseFixtures.js');
+import { fileURLToPath } from 'url';
 
-const path = require('path');
+import { expect, test } from '../../baseFixtures.js';
 
 test.describe('Persistence operations @addInit', () => {
   // add non persistable root item
   test.beforeEach(async ({ page }) => {
     await page.addInitScript({
-      path: path.join(__dirname, '../../helper', 'addNoneditableObject.js')
+      path: fileURLToPath(new URL('../../helper/addNoneditableObject.js', import.meta.url))
     });
   });
 

e2e/tests/functional/moveAndLinkObjects.e2e.spec.js

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

e2e/tests/functional/notification.e2e.spec.js

@@ -24,8 +24,8 @@
 This test suite is dedicated to tests which verify Open MCT's Notification functionality
 */
 
-const { createDomainObjectWithDefaults, createNotification } = require('../../appActions');
+import { createDomainObjectWithDefaults, createNotification } from '../../appActions.js';
-const { test, expect } = require('../../pluginFixtures');
+import { expect, test } from '../../pluginFixtures.js';
 
 test.describe('Notifications List', () => {
   test.fixme('Notifications can be dismissed individually', async ({ page }) => {

e2e/tests/functional/planning/ganttChart.e2e.spec.js

@@ -19,15 +19,26 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-const { test, expect } = require('../../../pluginFixtures');
+import fs from 'fs';
-const { createPlanFromJSON, createDomainObjectWithDefaults } = require('../../../appActions');
+
-const testPlan1 = require('../../../test-data/examplePlans/ExamplePlan_Small1.json');
+import { getPreciseDuration } from '../../../../src/utils/duration.js';
-const testPlan2 = require('../../../test-data/examplePlans/ExamplePlan_Small2.json');
+import { createDomainObjectWithDefaults, createPlanFromJSON } from '../../../appActions.js';
-const {
+import {
   assertPlanActivities,
   setBoundsToSpanAllActivities
-} = require('../../../helper/planningUtils');
+} from '../../../helper/planningUtils.js';
-const { getPreciseDuration } = require('../../../../src/utils/duration');
+import { expect, test } from '../../../pluginFixtures.js';
+
+const testPlan1 = JSON.parse(
+  fs.readFileSync(
+    new URL('../../../test-data/examplePlans/ExamplePlan_Small1.json', import.meta.url)
+  )
+);
+const testPlan2 = JSON.parse(
+  fs.readFileSync(
+    new URL('../../../test-data/examplePlans/ExamplePlan_Small2.json', import.meta.url)
+  )
+);
 
 test.describe('Gantt Chart', () => {
   let ganttChart;

e2e/tests/functional/planning/plan.e2e.spec.js

@@ -19,15 +19,27 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-const { test } = require('../../../pluginFixtures');
+import fs from 'fs';
-const { createPlanFromJSON } = require('../../../appActions');
+
-const { addPlanGetInterceptor } = require('../../../helper/planningUtils.js');
+import { createPlanFromJSON } from '../../../appActions.js';
-const testPlan1 = require('../../../test-data/examplePlans/ExamplePlan_Small1.json');
+import {
-const testPlanWithOrderedLanes = require('../../../test-data/examplePlans/ExamplePlanWithOrderedLanes.json');
+  addPlanGetInterceptor,
-const {
   assertPlanActivities,
   assertPlanOrderedSwimLanes
-} = require('../../../helper/planningUtils');
+} from '../../../helper/planningUtils.js';
+import { test } from '../../../pluginFixtures.js';
+
+const testPlan1 = JSON.parse(
+  fs.readFileSync(
+    new URL('../../../test-data/examplePlans/ExamplePlan_Small1.json', import.meta.url)
+  )
+);
+
+const testPlanWithOrderedLanes = JSON.parse(
+  fs.readFileSync(
+    new URL('../../../test-data/examplePlans/ExamplePlanWithOrderedLanes.json', import.meta.url)
+  )
+);
 
 test.describe('Plan', () => {
   let plan;

e2e/tests/functional/planning/timelist.e2e.spec.js

@@ -20,8 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { test, expect } = require('../../../pluginFixtures');
+import { createDomainObjectWithDefaults, createPlanFromJSON } from '../../../appActions.js';
-const { createDomainObjectWithDefaults, createPlanFromJSON } = require('../../../appActions');
+import { expect, test } from '../../../pluginFixtures.js';
 
 const testPlan = {
   TEST_GROUP: [

e2e/tests/functional/planning/timestrip.e2e.spec.js

@@ -20,12 +20,12 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { test, expect } = require('../../../pluginFixtures');
+import {
-const {
   createDomainObjectWithDefaults,
   createPlanFromJSON,
   setIndependentTimeConductorBounds
-} = require('../../../appActions');
+} from '../../../appActions.js';
+import { expect, test } from '../../../pluginFixtures.js';
 
 const testPlan = {
   TEST_GROUP: [

e2e/tests/functional/plugins/clocks/clock.e2e.spec.js

@@ -24,7 +24,7 @@
 This test suite is dedicated to tests which verify the basic operations surrounding Clock.
 */
 
-const { test, expect } = require('../../../../baseFixtures');
+import { expect, test } from '../../../../baseFixtures.js';
 
 test.describe('Clock Generator CRUD Operations', () => {
   test('Timezone dropdown will collapse when clicked outside or on dropdown icon again', async ({

e2e/tests/functional/plugins/clocks/remoteClock.e2e.spec.js

@@ -22,7 +22,7 @@
 
 // FIXME: Remove this eslint exception once tests are implemented
 // eslint-disable-next-line no-unused-vars
-const { test, expect } = require('../../../../baseFixtures');
+import { expect, test } from '../../../../baseFixtures.js';
 
 test.describe('Remote Clock', () => {
   // eslint-disable-next-line require-await

e2e/tests/functional/plugins/conditionSet/conditionSet.e2e.spec.js

@@ -19,19 +19,19 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* global __dirname */
 /*
 This test suite is dedicated to tests which verify the basic operations surrounding conditionSets. Note: this
 suite is sharing state between tests which is considered an anti-pattern. Implementing in this way to
 demonstrate some playwright for test developers. This pattern should not be re-used in other CRUD suites.
 */
 
-const { test, expect } = require('../../../../pluginFixtures.js');
+import { fileURLToPath } from 'url';
-const {
+
+import {
   createDomainObjectWithDefaults,
   createExampleTelemetryObject
-} = require('../../../../appActions');
+} from '../../../../appActions.js';
-const path = require('path');
+import { expect, test } from '../../../../pluginFixtures.js';
 
 let conditionSetUrl;
 let getConditionSetIdentifierFromUrl;
@@ -50,7 +50,9 @@ test.describe.serial('Condition Set CRUD Operations on @localStorage', () => {
 
     //Save localStorage for future test execution
     await context.storageState({
-      path: path.resolve(__dirname, '../../../../test-data/recycled_local_storage.json')
+      path: fileURLToPath(
+        new URL('../../../../test-data/recycled_local_storage.json', import.meta.url)
+      )
     });
 
     //Set object identifier from url
@@ -63,7 +65,9 @@ test.describe.serial('Condition Set CRUD Operations on @localStorage', () => {
 
   //Load localStorage for subsequent tests
   test.use({
-    storageState: path.resolve(__dirname, '../../../../test-data/recycled_local_storage.json')
+    storageState: fileURLToPath(
+      new URL('../../../../test-data/recycled_local_storage.json', import.meta.url)
+    )
   });
 
   //Begin suite of tests again localStorage

e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js

@@ -19,20 +19,19 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* global __dirname */
+import { fileURLToPath } from 'url';
-const { test, expect } = require('../../../../pluginFixtures');
-const path = require('path');
-const {
-  createDomainObjectWithDefaults,
-  setStartOffset,
-  setFixedTimeMode,
-  setRealTimeMode,
-  setIndependentTimeConductorBounds
-} = require('../../../../appActions');
 
-const LOCALSTORAGE_PATH = path.resolve(
+import {
-  __dirname,
+  createDomainObjectWithDefaults,
-  '../../../../test-data/display_layout_with_child_layouts.json'
+  setFixedTimeMode,
+  setIndependentTimeConductorBounds,
+  setRealTimeMode,
+  setStartOffset
+} from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+const LOCALSTORAGE_PATH = fileURLToPath(
+  new URL('../../../../test-data/display_layout_with_child_layouts.json', import.meta.url)
 );
 const TINY_IMAGE_BASE64 =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII';
@@ -51,7 +50,7 @@ test.describe('Display Layout Toolbar Actions @localStorage', () => {
     await page.getByLabel('Edit').click();
   });
   test.use({
-    storageState: path.resolve(__dirname, LOCALSTORAGE_PATH)
+    storageState: LOCALSTORAGE_PATH
   });
 
   test('can add/remove Text element to a single layout', async ({ page }) => {

e2e/tests/functional/plugins/faultManagement/faultManagement.e2e.spec.js

@@ -20,8 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { test, expect } = require('../../../../pluginFixtures');
+import * as utils from '../../../../helper/faultUtils.js';
-const utils = require('../../../../helper/faultUtils');
+import { expect, test } from '../../../../pluginFixtures.js';
 
 test.describe('The Fault Management Plugin using example faults', () => {
   test.beforeEach(async ({ page }) => {

e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js

@@ -19,18 +19,17 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* global __dirname */
 
-const { test, expect } = require('../../../../pluginFixtures');
+import { fileURLToPath } from 'url';
-const {
+
+import {
   createDomainObjectWithDefaults,
   setIndependentTimeConductorBounds
-} = require('../../../../appActions');
+} from '../../../../appActions.js';
-const path = require('path');
+import { expect, test } from '../../../../pluginFixtures.js';
 
-const LOCALSTORAGE_PATH = path.resolve(
+const LOCALSTORAGE_PATH = fileURLToPath(
-  __dirname,
+  new URL('../../../../test-data/flexible_layout_with_child_layouts.json', import.meta.url)
-  '../../../../test-data/flexible_layout_with_child_layouts.json'
 );
 
 test.describe('Flexible Layout', () => {
@@ -267,7 +266,7 @@ test.describe('Flexible Layout', () => {
 
 test.describe('Flexible Layout Toolbar Actions @localStorage', () => {
   test.use({
-    storageState: path.resolve(__dirname, LOCALSTORAGE_PATH)
+    storageState: LOCALSTORAGE_PATH
   });
 
   test.beforeEach(async ({ page }) => {

e2e/tests/functional/plugins/gauge/gauge.e2e.spec.js

@@ -24,12 +24,13 @@
  * This test suite is dedicated to testing the Gauge component.
  */
 
-const { test, expect } = require('../../../../pluginFixtures');
+import { v4 as uuid } from 'uuid';
-const {
+
+import {
   createDomainObjectWithDefaults,
   createExampleTelemetryObject
-} = require('../../../../appActions');
+} from '../../../../appActions.js';
-const uuid = require('uuid').v4;
+import { expect, test } from '../../../../pluginFixtures.js';
 
 test.describe('Gauge', () => {
   test.beforeEach(async ({ page }) => {

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

@@ -25,9 +25,9 @@ This test suite is dedicated to tests which verify the basic operations surround
 but only assume that example imagery is present.
 */
 /* globals process */
-const { waitForAnimations } = require('../../../../baseFixtures');
+import { createDomainObjectWithDefaults, setRealTimeMode } from '../../../../appActions.js';
-const { test, expect } = require('../../../../pluginFixtures');
+import { waitForAnimations } from '../../../../baseFixtures.js';
-const { createDomainObjectWithDefaults, setRealTimeMode } = require('../../../../appActions');
+import { expect, test } from '../../../../pluginFixtures.js';
 const backgroundImageSelector = '.c-imagery__main-image__background-image';
 const panHotkey = process.platform === 'linux' ? ['Shift', 'Alt'] : ['Alt'];
 const tagHotkey = ['Shift', 'Alt'];

e2e/tests/functional/plugins/importAndExportAsJSON/exportAsJson.e2e.spec.js

@@ -26,7 +26,7 @@ This test suite is dedicated to tests which verify the basic operations surround
 
 // FIXME: Remove this eslint exception once tests are implemented
 // eslint-disable-next-line no-unused-vars
-const { test, expect } = require('../../../../baseFixtures');
+import { expect, test } from '../../../../baseFixtures.js';
 
 test.describe('ExportAsJSON', () => {
   test.fixme(

e2e/tests/functional/plugins/importAndExportAsJSON/importAsJson.e2e.spec.js

@@ -26,7 +26,7 @@ This test suite is dedicated to tests which verify the basic operations surround
 
 // FIXME: Remove this eslint exception once tests are implemented
 // eslint-disable-next-line no-unused-vars
-const { test, expect } = require('../../../../baseFixtures');
+import { expect, test } from '../../../../baseFixtures.js';
 
 test.describe('ExportAsJSON', () => {
   test.fixme('Verify that domain object can be importAsJSON from Tree', async ({ page }) => {

e2e/tests/functional/plugins/inspectorDataVisualization/numericData.e2e.spec.js

@@ -19,17 +19,19 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* global __dirname */
 
-const { test, expect } = require('../../../../pluginFixtures');
+import { fileURLToPath } from 'url';
-const { createDomainObjectWithDefaults } = require('../../../../appActions');
+
-const path = require('path');
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
 
 test.describe('Testing numeric data with inspector data visualization (i.e., data pivoting)', () => {
   test.beforeEach(async ({ page }) => {
     // eslint-disable-next-line no-undef
     await page.addInitScript({
-      path: path.join(__dirname, '../../../../helper/', 'addInitDataVisualization.js')
+      path: fileURLToPath(
+        new URL('../../../../helper/addInitDataVisualization.js', import.meta.url)
+      )
     });
     await page.goto('./', { waitUntil: 'domcontentloaded' });
   });

e2e/tests/functional/plugins/lad/lad.e2e.spec.js

@@ -20,14 +20,14 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { test, expect } = require('../../../../pluginFixtures');
+import {
-const {
   createDomainObjectWithDefaults,
-  setStartOffset,
+  openObjectTreeContextMenu,
   setFixedTimeMode,
   setRealTimeMode,
-  openObjectTreeContextMenu
+  setStartOffset
-} = require('../../../../appActions');
+} from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
 
 test.describe('Testing LAD table configuration', () => {
   let ladTable;

e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js

@@ -19,15 +19,16 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* global __dirname */
+
 /*
 This test suite is dedicated to tests which verify the basic operations surrounding Notebooks.
 */
 
-const { test, expect, streamToString } = require('../../../../pluginFixtures');
+import { fileURLToPath } from 'url';
-const { createDomainObjectWithDefaults } = require('../../../../appActions');
+
-const nbUtils = require('../../../../helper/notebookUtils');
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
-const path = require('path');
+import * as nbUtils from '../../../../helper/notebookUtils.js';
+import { expect, streamToString, test } from '../../../../pluginFixtures.js';
 
 const NOTEBOOK_NAME = 'Notebook';
 
@@ -278,7 +279,7 @@ test.describe('Notebook entry tests', () => {
   test.beforeEach(async ({ page }) => {
     // eslint-disable-next-line no-undef
     await page.addInitScript({
-      path: path.join(__dirname, '../../../../helper/', 'addInitNotebookWithUrls.js')
+      path: fileURLToPath(new URL('../../../../helper/addInitNotebookWithUrls.js', import.meta.url))
     });
     await page.goto('./', { waitUntil: 'domcontentloaded' });
 

e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js

@@ -19,15 +19,16 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* global __dirname */
+
 /*
 This test suite is dedicated to tests which verify the basic operations surrounding Notebooks.
 */
 
-const fs = require('fs').promises;
+import fs from 'fs/promises';
-const path = require('path');
+import { fileURLToPath } from 'url';
-const { test, expect } = require('../../../../pluginFixtures');
+
-const { createDomainObjectWithDefaults } = require('../../../../appActions');
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
 
 const NOTEBOOK_NAME = 'Notebook';
 
@@ -178,7 +179,9 @@ test.describe('Snapshot image tests', () => {
 
   test('Can drop an image onto a notebook and create a new entry', async ({ page }) => {
     const imageData = await fs.readFile(
-      path.resolve(__dirname, '../../../../../src/images/favicons/favicon-96x96.png')
+      fileURLToPath(
+        new URL('../../../../../src/images/favicons/favicon-96x96.png', import.meta.url)
+      )
     );
     const imageArray = new Uint8Array(imageData);
     const fileData = Array.from(imageArray);

e2e/tests/functional/plugins/notebook/notebookWithCouchDB.e2e.spec.js

@@ -24,9 +24,9 @@
 This test suite is dedicated to tests which verify the basic operations surrounding Notebooks with CouchDB.
 */
 
-const { test, expect } = require('../../../../pluginFixtures');
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
-const { createDomainObjectWithDefaults } = require('../../../../appActions');
+import * as nbUtils from '../../../../helper/notebookUtils.js';
-const nbUtils = require('../../../../helper/notebookUtils');
+import { expect, test } from '../../../../pluginFixtures.js';
 
 test.describe('Notebook Tests with CouchDB @couchdb', () => {
   let testNotebook;

e2e/tests/functional/plugins/notebook/restrictedNotebook.e2e.spec.js

@@ -20,14 +20,14 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { test, expect, streamToString } = require('../../../../pluginFixtures');
+import { openObjectTreeContextMenu } from '../../../../appActions.js';
-const { openObjectTreeContextMenu } = require('../../../../appActions');
+import {
-const {
-  lockPage,
   dragAndDropEmbed,
   enterTextEntry,
+  lockPage,
   startAndAddRestrictedNotebookObject
-} = require('../../../../helper/notebookUtils');
+} from '../../../../helper/notebookUtils.js';
+import { expect, streamToString, test } from '../../../../pluginFixtures.js';
 
 const TEST_TEXT = 'Testing text for entries.';
 const TEST_TEXT_NAME = 'Test Page';

e2e/tests/functional/plugins/notebook/tags.e2e.spec.js

@@ -24,13 +24,13 @@
 This test suite is dedicated to tests which verify notebook tag functionality.
 */
 
-const { test, expect } = require('../../../../pluginFixtures');
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
-const { createDomainObjectWithDefaults } = require('../../../../appActions');
+import {
-const {
-  enterTextEntry,
   createNotebookAndEntry,
-  createNotebookEntryAndTags
+  createNotebookEntryAndTags,
-} = require('../../../../helper/notebookUtils');
+  enterTextEntry
+} from '../../../../helper/notebookUtils.js';
+import { expect, test } from '../../../../pluginFixtures.js';
 
 test.describe('Tagging in Notebooks @addInit', () => {
   test.beforeEach(async ({ page }) => {

e2e/tests/functional/plugins/operatorStatus/operatorStatus.e2e.spec.js

@@ -19,13 +19,13 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* global __dirname */
 /*
  * This test suite is dedicated to testing the operator status plugin.
  */
 
-const path = require('path');
+import { fileURLToPath } from 'url';
-const { test, expect } = require('../../../../pluginFixtures');
+
+import { expect, test } from '../../../../pluginFixtures.js';
 
 /*
 
@@ -41,10 +41,10 @@ test.describe('Operator Status', () => {
   test.beforeEach(async ({ page }) => {
     // FIXME: determine if plugins will be added to index.html or need to be injected
     await page.addInitScript({
-      path: path.join(__dirname, '../../../../helper/', 'addInitExampleUser.js')
+      path: fileURLToPath(new URL('../../../../helper/addInitExampleUser.js', import.meta.url))
     });
     await page.addInitScript({
-      path: path.join(__dirname, '../../../../helper/', 'addInitOperatorStatus.js')
+      path: fileURLToPath(new URL('../../../../helper/addInitOperatorStatus.js', import.meta.url))
     });
     await page.goto('./', { waitUntil: 'domcontentloaded' });
     await expect(page.getByText('Select Role')).toBeVisible();

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

@@ -24,8 +24,8 @@
 Testsuite for plot autoscale.
 */
 
-const { createDomainObjectWithDefaults } = require('../../../../appActions');
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
-const { test, expect } = require('../../../../pluginFixtures');
+import { expect, test } from '../../../../pluginFixtures.js';
 test.use({
   viewport: {
     width: 1280,

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

@@ -25,8 +25,8 @@ 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('../../../../pluginFixtures');
+import { setTimeConductorBounds } from '../../../../appActions.js';
-const { setTimeConductorBounds } = require('../../../../appActions');
+import { expect, test } from '../../../../pluginFixtures.js';
 
 test.describe('Log plot tests', () => {
   test('Log Plot ticks are functionally correct in regular and log mode and after refresh', async ({

e2e/tests/functional/plugins/plot/missingPlotObj.e2e.spec.js

@@ -24,7 +24,7 @@
 Tests to verify log plot functionality when objects are missing
 */
 
-const { test, expect } = require('../../../../pluginFixtures');
+import { expect, test } from '../../../../pluginFixtures.js';
 
 test.describe('Handle missing object for plots', () => {
   test('Displays empty div for missing stacked plot item @unstable', async ({

e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js

@@ -25,12 +25,12 @@ 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('../../../../pluginFixtures');
+import {
-const {
   createDomainObjectWithDefaults,
   getCanvasPixels,
   waitForPlotsToRender
-} = require('../../../../appActions');
+} from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
 
 test.describe('Overlay Plot', () => {
   test.beforeEach(async ({ page }) => {

e2e/tests/functional/plugins/plot/plotRendering.e2e.spec.js

@@ -25,8 +25,8 @@
  *
  */
 
-const { test, expect } = require('../../../../pluginFixtures');
+import { createDomainObjectWithDefaults, getCanvasPixels } from '../../../../appActions.js';
-const { createDomainObjectWithDefaults, getCanvasPixels } = require('../../../../appActions');
+import { expect, test } from '../../../../pluginFixtures.js';
 
 test.describe('Plot Rendering', () => {
   let sineWaveGeneratorObject;

e2e/tests/functional/plugins/plot/scatterPlot.e2e.spec.js

@@ -24,9 +24,10 @@
  * This test suite is dedicated to testing the Scatter Plot component.
  */
 
-const { test, expect } = require('../../../../pluginFixtures');
+import { v4 as uuid } from 'uuid';
-const { createDomainObjectWithDefaults } = require('../../../../appActions');
+
-const uuid = require('uuid').v4;
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
 
 test.describe('Scatter Plot', () => {
   let scatterPlot;

e2e/tests/functional/plugins/plot/stackedPlot.e2e.spec.js

@@ -25,8 +25,8 @@ 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('../../../../pluginFixtures');
+import { createDomainObjectWithDefaults, waitForPlotsToRender } from '../../../../appActions.js';
-const { createDomainObjectWithDefaults, waitForPlotsToRender } = require('../../../../appActions');
+import { expect, test } from '../../../../pluginFixtures.js';
 
 test.describe('Stacked Plot', () => {
   let stackedPlot;

e2e/tests/functional/plugins/plot/tagging.e2e.spec.js

@@ -24,18 +24,14 @@
 Tests to verify plot tagging functionality.
 */
 
-const { test, expect } = require('../../../../pluginFixtures');
+import {
-const {
-  basicTagsTests,
-  createTags,
-  testTelemetryItem
-} = require('../../../../helper/plotTagsUtils');
-const {
   createDomainObjectWithDefaults,
-  setRealTimeMode,
   setFixedTimeMode,
+  setRealTimeMode,
   waitForPlotsToRender
-} = require('../../../../appActions');
+} from '../../../../appActions.js';
+import { basicTagsTests, createTags, testTelemetryItem } from '../../../../helper/plotTagsUtils.js';
+import { expect, test } from '../../../../pluginFixtures.js';
 
 test.describe('Plot Tagging', () => {
   test.beforeEach(async ({ page }) => {

e2e/tests/functional/plugins/tabs/tabs.e2e.spec.js

@@ -20,8 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { createDomainObjectWithDefaults } = require('../../../../appActions');
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
-const { test, expect } = require('../../../../pluginFixtures');
+import { expect, test } from '../../../../pluginFixtures.js';
 
 test.describe('Tabs View', () => {
   test('Renders tabbed elements', async ({ page }) => {

e2e/tests/functional/plugins/telemetryTable/telemetryTable.e2e.spec.js

@@ -20,11 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const {
+import { createDomainObjectWithDefaults, setTimeConductorBounds } from '../../../../appActions.js';
-  createDomainObjectWithDefaults,
+import { expect, test } from '../../../../pluginFixtures.js';
-  setTimeConductorBounds
-} = require('../../../../appActions');
-const { test, expect } = require('../../../../pluginFixtures');
 
 test.describe('Telemetry Table', () => {
   test('unpauses and filters data when paused by button and user changes bounds', async ({

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

@@ -20,14 +20,14 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { test, expect } = require('../../../../pluginFixtures');
+import {
-const {
+  setEndOffset,
   setFixedTimeMode,
   setRealTimeMode,
   setStartOffset,
-  setEndOffset,
   setTimeConductorBounds
-} = require('../../../../appActions');
+} from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
 
 test.describe('Time conductor operations', () => {
   test('validate start time does not exceeds end time', async ({ page }) => {

e2e/tests/functional/plugins/timer/timer.e2e.spec.js

@@ -20,12 +20,12 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { test, expect } = require('../../../../pluginFixtures');
+import {
-const {
+  createDomainObjectWithDefaults,
-  openObjectTreeContextMenu,
+  openObjectTreeContextMenu
-  createDomainObjectWithDefaults
+} from '../../../../appActions.js';
-} = require('../../../../appActions');
+import { MISSION_TIME } from '../../../../constants.js';
-import { MISSION_TIME } from '../../../../constants';
+import { expect, test } from '../../../../pluginFixtures.js';
 
 test.describe('Timer', () => {
   let timer;

e2e/tests/functional/recentObjects.e2e.spec.js

@@ -20,9 +20,9 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { test, expect } = require('../../pluginFixtures.js');
+import { createDomainObjectWithDefaults } from '../../appActions.js';
-const { createDomainObjectWithDefaults } = require('../../appActions.js');
+import { waitForAnimations } from '../../baseFixtures.js';
-const { waitForAnimations } = require('../../baseFixtures.js');
+import { expect, test } from '../../pluginFixtures.js';
 
 test.describe('Recent Objects', () => {
   /** @type {import('@playwright/test').Locator} */

e2e/tests/functional/renaming.e2e.spec.js

@@ -24,11 +24,8 @@
 This test suite is dedicated to tests for renaming objects, and their global application effects.
 */
 
-const { test, expect } = require('../../baseFixtures.js');
+import { createDomainObjectWithDefaults, renameObjectFromContextMenu } from '../../appActions.js';
-const {
+import { expect, test } from '../../baseFixtures.js';
-  createDomainObjectWithDefaults,
-  renameObjectFromContextMenu
-} = require('../../appActions.js');
 
 test.describe('Renaming objects', () => {
   test.beforeEach(async ({ page }) => {

e2e/tests/functional/search.e2e.spec.js

@@ -23,9 +23,10 @@
  * This test suite is dedicated to tests which verify search functionalities.
  */
 
-const { test, expect } = require('../../pluginFixtures');
+import { v4 as uuid } from 'uuid';
-const { createDomainObjectWithDefaults } = require('../../appActions');
+
-const { v4: uuid } = require('uuid');
+import { createDomainObjectWithDefaults } from '../../appActions.js';
+import { expect, test } from '../../pluginFixtures.js';
 
 test.describe('Grand Search', () => {
   const searchResultSelector = '.c-gsearch-result__title';

e2e/tests/functional/smoke.e2e.spec.js

@@ -33,7 +33,7 @@ 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('../../pluginFixtures');
+import { expect, test } from '../../pluginFixtures.js';
 
 test('Verify that the create button appears and that the Folder Domain Object is available for selection', async ({
   page

e2e/tests/functional/tooltips.e2e.spec.js

@@ -33,8 +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('../../pluginFixtures');
+import { createDomainObjectWithDefaults, expandEntireTree } from '../../appActions.js';
-const { createDomainObjectWithDefaults, expandEntireTree } = require('../../appActions');
+import { expect, test } from '../../pluginFixtures.js';
 
 test.describe('Verify tooltips', () => {
   let folder1;

e2e/tests/functional/tree.e2e.spec.js

@@ -20,11 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { test, expect } = require('../../pluginFixtures.js');
+import { createDomainObjectWithDefaults, renameObjectFromContextMenu } from '../../appActions.js';
-const {
+import { expect, test } from '../../pluginFixtures.js';
-  createDomainObjectWithDefaults,
-  renameObjectFromContextMenu
-} = require('../../appActions.js');
 
 test.describe('Main Tree', () => {
   test.beforeEach(async ({ page }) => {

e2e/tests/performance/contract/imagery.contract.perf.spec.js

@@ -32,7 +32,7 @@ TODO:
 
 */
 
-const { test, expect } = require('@playwright/test');
+import { expect, test } from '@playwright/test';
 
 const filePath = 'e2e/test-data/PerformanceDisplayLayout.json';
 

e2e/tests/performance/contract/notebook.contract.perf.spec.js

@@ -31,7 +31,7 @@ TODO:
 
 */
 
-const { test, expect } = require('@playwright/test');
+import { expect, test } from '@playwright/test';
 
 const notebookFilePath = 'e2e/test-data/PerformanceNotebook.json';
 

e2e/tests/performance/memory/navigation.memory.perf.spec.js

@@ -19,14 +19,12 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* global __dirname */
 
-const { test, expect } = require('@playwright/test');
+import { expect, test } from '@playwright/test';
-const path = require('path');
+import { fileURLToPath } from 'url';
 
-const memoryLeakFilePath = path.resolve(
+const memoryLeakFilePath = fileURLToPath(
-  __dirname,
+  new URL('../../../../e2e/test-data/memory-leak-detection.json', import.meta.url)
-  '../../../../e2e/test-data/memory-leak-detection.json'
 );
 /**
  * Executes tests to verify that views are not leaking memory on navigation away. This sort of

e2e/tests/performance/tabs.e2e.spec.js

@@ -20,8 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { createDomainObjectWithDefaults, waitForPlotsToRender } = require('../../appActions');
+import { createDomainObjectWithDefaults, waitForPlotsToRender } from '../../appActions.js';
-const { test, expect } = require('../../pluginFixtures');
+import { expect, test } from '../../pluginFixtures.js';
 
 test.describe('Tabs View', () => {
   test('Renders tabbed elements nicely', async ({ page }) => {

e2e/tests/performance/tagging.perf.spec.js

@@ -24,14 +24,14 @@
 Tests to verify plot tagging performance.
 */
 
-const { test, expect } = require('../../pluginFixtures');
+import {
-const { basicTagsTests, createTags, testTelemetryItem } = require('../../helper/plotTagsUtils');
-const {
   createDomainObjectWithDefaults,
-  setRealTimeMode,
   setFixedTimeMode,
+  setRealTimeMode,
   waitForPlotsToRender
-} = require('../../appActions');
+} from '../../appActions.js';
+import { basicTagsTests, createTags, testTelemetryItem } from '../../helper/plotTagsUtils.js';
+import { expect, test } from '../../pluginFixtures.js';
 
 test.describe('Plot Tagging Performance', () => {
   test.beforeEach(async ({ page }) => {

e2e/tests/visual-a11y/a11y.visual.spec.js

@@ -20,8 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { test, scanForA11yViolations } = require('../../avpFixtures');
+import { scanForA11yViolations, test } from '../../avpFixtures.js';
-const VISUAL_URL = require('../../constants').VISUAL_URL;
+import { VISUAL_URL } from '../../constants.js';
 
 test.describe('a11y - Default @a11y', () => {
   test.beforeEach(async ({ page }) => {

e2e/tests/visual-a11y/components/about.visual.spec.js

@@ -24,9 +24,10 @@
 Tests the branding associated with the default deployment. At least the about modal for now
 */
 
-const { test, expect } = require('../../../pluginFixtures');
+import percySnapshot from '@percy/playwright';
-const percySnapshot = require('@percy/playwright');
+
-const VISUAL_URL = require('../../../constants').VISUAL_URL;
+import { VISUAL_URL } from '../../../constants.js';
+import { expect, test } from '../../../pluginFixtures.js';
 
 test.describe('Visual - Branding', () => {
   test.beforeEach(async ({ page }) => {

e2e/tests/visual-a11y/components/inspector.visual.spec.js

@@ -20,9 +20,10 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { test } = require('../../../pluginFixtures.js');
+import percySnapshot from '@percy/playwright';
-const { VISUAL_URL, MISSION_TIME } = require('../../../constants.js');
+
-const percySnapshot = require('@percy/playwright');
+import { MISSION_TIME, VISUAL_URL } from '../../../constants.js';
+import { test } from '../../../pluginFixtures.js';
 
 //Declare the scope of the visual test
 const inspectorPane = '.l-shell__pane-inspector';

e2e/tests/visual-a11y/components/tree.visual.spec.js

@@ -20,13 +20,11 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { test } = require('../../../pluginFixtures.js');
+import percySnapshot from '@percy/playwright';
-const {
+
-  expandTreePaneItemByName,
+import { createDomainObjectWithDefaults, expandTreePaneItemByName } from '../../../appActions.js';
-  createDomainObjectWithDefaults
+import { VISUAL_URL } from '../../../constants.js';
-} = require('../../../appActions.js');
+import { test } from '../../../pluginFixtures.js';
-const VISUAL_URL = require('../../../constants.js').VISUAL_URL;
-const percySnapshot = require('@percy/playwright');
 
 //Declare the scope of the visual test
 const treePane = "[role=tree][aria-label='Main Tree']";

e2e/tests/visual-a11y/controlledClock.visual.spec.js

@@ -25,9 +25,10 @@ Collection of Visual Tests set to run with browser clock manipulate made possibl
 clockOptions plugin fixture.
 */
 
-const { VISUAL_URL, MISSION_TIME } = require('../../constants');
+import percySnapshot from '@percy/playwright';
-const { test, expect } = require('../../pluginFixtures');
+
-const percySnapshot = require('@percy/playwright');
+import { MISSION_TIME, VISUAL_URL } from '../../constants.js';
+import { expect, test } from '../../pluginFixtures.js';
 
 test.describe('Visual - Controlled Clock', () => {
   test.beforeEach(async ({ page }) => {

e2e/tests/visual-a11y/defaultPlugins.visual.spec.js

@@ -26,10 +26,11 @@ are only meant to run against openmct's app.js started by `npm run start` within
 `./e2e/playwright-visual.config.js` file.
 */
 
-const { test, expect, scanForA11yViolations } = require('../../avpFixtures');
+import percySnapshot from '@percy/playwright';
-const percySnapshot = require('@percy/playwright');
+
-const { createDomainObjectWithDefaults } = require('../../appActions');
+import { createDomainObjectWithDefaults } from '../../appActions.js';
-const { VISUAL_URL } = require('../../constants');
+import { expect, scanForA11yViolations, test } from '../../avpFixtures.js';
+import { VISUAL_URL } from '../../constants.js';
 
 test.describe('Visual - Default @a11y', () => {
   test.beforeEach(async ({ page }) => {

e2e/tests/visual-a11y/displayLayout.visual.spec.js

@@ -26,10 +26,11 @@
  * @property {Object<string, import('@playwright/test').Locator>} LayoutLocator
  */
 
-const { test } = require('../../pluginFixtures');
+import percySnapshot from '@percy/playwright';
-const { createDomainObjectWithDefaults } = require('../../appActions');
+
-const VISUAL_URL = require('../../constants').VISUAL_URL;
+import { createDomainObjectWithDefaults } from '../../appActions.js';
-const percySnapshot = require('@percy/playwright');
+import { VISUAL_URL } from '../../constants.js';
+import { test } from '../../pluginFixtures.js';
 const snapshotScope = '.l-shell__pane-main .l-pane__contents';
 
 test.describe('Visual - Display Layout', () => {

e2e/tests/visual-a11y/faultManagement.visual.spec.js

@@ -19,17 +19,16 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* global __dirname */
+import percySnapshot from '@percy/playwright';
-const path = require('path');
+import { fileURLToPath } from 'url';
-const { test } = require('../../pluginFixtures');
-const percySnapshot = require('@percy/playwright');
 
-const utils = require('../../helper/faultUtils');
+import * as utils from '../../helper/faultUtils.js';
+import { test } from '../../pluginFixtures.js';
 
 test.describe('Fault Management Visual Tests', () => {
   test('icon test', async ({ page, theme }) => {
     await page.addInitScript({
-      path: path.join(__dirname, '../../helper/', 'addInitFaultManagementPlugin.js')
+      path: fileURLToPath(new URL('../../helper/addInitFaultManagementPlugin.js', import.meta.url))
     });
     await page.goto('./', { waitUntil: 'domcontentloaded' });
 

e2e/tests/visual-a11y/ladTable.visual.spec.js

@@ -20,10 +20,11 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { expect, test } = require('../../pluginFixtures');
+import percySnapshot from '@percy/playwright';
-const percySnapshot = require('@percy/playwright');
+
-const { createDomainObjectWithDefaults } = require('../../appActions');
+import { createDomainObjectWithDefaults } from '../../appActions.js';
-const VISUAL_URL = require('../../constants').VISUAL_URL;
+import { VISUAL_URL } from '../../constants.js';
+import { expect, test } from '../../pluginFixtures.js';
 
 test.describe('Visual - LAD Table', () => {
   /** @type {import('@playwright/test').Locator} */

e2e/tests/visual-a11y/notebook.visual.spec.js

@@ -20,14 +20,12 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { test, scanForA11yViolations } = require('../../avpFixtures');
+import percySnapshot from '@percy/playwright';
-const percySnapshot = require('@percy/playwright');
+
-const { expandTreePaneItemByName, createDomainObjectWithDefaults } = require('../../appActions');
+import { createDomainObjectWithDefaults, expandTreePaneItemByName } from '../../appActions.js';
-const {
+import { scanForA11yViolations, test } from '../../avpFixtures.js';
-  startAndAddRestrictedNotebookObject,
+import { VISUAL_URL } from '../../constants.js';
-  enterTextEntry
+import { enterTextEntry, startAndAddRestrictedNotebookObject } from '../../helper/notebookUtils.js';
-} = require('../../helper/notebookUtils');
-const { VISUAL_URL } = require('../../constants');
 
 test.describe('Visual - Restricted Notebook', () => {
   test.beforeEach(async ({ page }) => {

e2e/tests/visual-a11y/notification.visual.spec.js

@@ -24,10 +24,11 @@
  * This test is dedicated to test notification banner functionality and its accessibility attributes.
  */
 
-const { test, expect, scanForA11yViolations } = require('../../avpFixtures');
+import percySnapshot from '@percy/playwright';
-const percySnapshot = require('@percy/playwright');
+
-const { createDomainObjectWithDefaults } = require('../../appActions');
+import { createDomainObjectWithDefaults } from '../../appActions.js';
-const VISUAL_URL = require('../../constants').VISUAL_URL;
+import { expect, scanForA11yViolations, test } from '../../avpFixtures.js';
+import { VISUAL_URL } from '../../constants.js';
 
 test.describe("Visual - Check Notification Info Banner of 'Save successful' @a11y", () => {
   test.beforeEach(async ({ page }) => {

e2e/tests/visual-a11y/planning.visual.spec.js

@@ -20,15 +20,17 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { test, scanForA11yViolations } = require('../../avpFixtures');
+import percySnapshot from '@percy/playwright';
-const {
+import fs from 'fs';
-  setBoundsToSpanAllActivities,
+
-  setDraftStatusForPlan
+import { createDomainObjectWithDefaults, createPlanFromJSON } from '../../appActions.js';
-} = require('../../helper/planningUtils');
+import { scanForA11yViolations, test } from '../../avpFixtures.js';
-const { createDomainObjectWithDefaults, createPlanFromJSON } = require('../../appActions');
+import { VISUAL_URL } from '../../constants.js';
-const percySnapshot = require('@percy/playwright');
+import { setBoundsToSpanAllActivities, setDraftStatusForPlan } from '../../helper/planningUtils.js';
-const VISUAL_URL = require('../../constants').VISUAL_URL;
+
-const examplePlanSmall = require('../../test-data/examplePlans/ExamplePlan_Small2.json');
+const examplePlanSmall = JSON.parse(
+  fs.readFileSync(new URL('../../test-data/examplePlans/ExamplePlan_Small2.json', import.meta.url))
+);
 
 const snapshotScope = '.l-shell__pane-main .l-pane__contents';
 

e2e/tests/visual-a11y/search.visual.spec.js

@@ -24,11 +24,11 @@
 This test suite is dedicated to tests which verify search functionality.
 */
 
-const { test, expect, scanForA11yViolations } = require('../../avpFixtures');
+import percySnapshot from '@percy/playwright';
-const { createDomainObjectWithDefaults } = require('../../appActions');
-const { VISUAL_URL } = require('../../constants');
 
-const percySnapshot = require('@percy/playwright');
+import { createDomainObjectWithDefaults } from '../../appActions.js';
+import { expect, scanForA11yViolations, test } from '../../avpFixtures.js';
+import { VISUAL_URL } from '../../constants.js';
 
 test.describe('Grand Search @a11y', () => {
   let conditionWidget;

example/dataVisualization/plugin.js

@@ -19,7 +19,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import ExampleDataVisualizationSourceViewProvider from './ExampleDataVisualizationSourceViewProvider';
+import ExampleDataVisualizationSourceViewProvider from './ExampleDataVisualizationSourceViewProvider.js';
 
 export default function () {
   return function install(openmct) {

example/eventGenerator/plugin.js

@@ -19,8 +19,8 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import EventMetadataProvider from './EventMetadataProvider';
+import EventMetadataProvider from './EventMetadataProvider.js';
-import EventTelemetryProvider from './EventTelemetryProvider';
+import EventTelemetryProvider from './EventTelemetryProvider.js';
 
 export default function EventGeneratorPlugin(options) {
   return function install(openmct) {

example/eventGenerator/pluginSpec.js

@@ -19,7 +19,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import { createOpenMct, resetApplicationState } from '../../src/utils/testing';
+import { createOpenMct, resetApplicationState } from '../../src/utils/testing.js';
 import EventMessageGeneratorPlugin from './plugin.js';
 
 describe('the plugin', () => {

example/exampleUser/ExampleUserProvider.js

@@ -23,7 +23,7 @@
 import EventEmitter from 'EventEmitter';
 import { v4 as uuid } from 'uuid';
 
-import createExampleUser from './exampleUserCreator';
+import createExampleUser from './exampleUserCreator.js';
 
 const STATUSES = [
   {

example/exampleUser/plugin.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import ExampleUserProvider from './ExampleUserProvider';
+import ExampleUserProvider from './ExampleUserProvider.js';
 const AUTO_LOGIN_USER = 'mct-user';
 const STATUS_ROLES = ['flight', 'driver'];
 

example/exampleUser/pluginSpec.js

@@ -20,8 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import { createOpenMct, resetApplicationState } from '../../src/utils/testing';
+import { createOpenMct, resetApplicationState } from '../../src/utils/testing.js';
-import ExampleUserProvider from './ExampleUserProvider';
+import ExampleUserProvider from './ExampleUserProvider.js';
 
 describe('The Example User Plugin', () => {
   let openmct;

example/faultManagement/exampleFaultSource.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import utils from './utils';
+import utils from './utils.js';
 
 export default function (staticFaults = false) {
   return function install(openmct) {