diff --git a/cypress.config.cjs b/cypress.config.cjs
index 14bc68e70a0..838b6f9f68f 100644
--- a/cypress.config.cjs
+++ b/cypress.config.cjs
@@ -9,6 +9,29 @@ module.exports = defineConfig({
   defaultCommandTimeout: 25000,
   blockHosts: ['*google-analytics.com', '*googletagmanager.com'],
   e2e: {
+    // setupNodeEvents can be defined in either
+    // the e2e or component configuration.
+    setupNodeEvents(on, config) {
+      on('before:browser:launch', (browser = {}, launchOptions) => {
+        // Log browser info. This could be useful when comparing local to CI.
+        // console.log('Launching browser', browser);
+
+        // Auto open devtools.
+        if (browser.family === 'chromium') {
+          if (browser.name === 'electron')
+            launchOptions.preferences.devTools = true;
+          else launchOptions.args.push('--auto-open-devtools-for-tabs');
+        } else if (browser.family === 'firefox') {
+          launchOptions.args.push('-devtools');
+        }
+
+        // Whatever you return here becomes the launchOptions.
+        return launchOptions;
+      });
+
+      // IMPORTANT return the updated config object.
+      return config;
+    },
     baseUrl: 'http://localhost:8000',
     specPattern: 'test/cypress/integration/**/*.cy.{js,jsx,ts,tsx}',
     supportFile: 'test/cypress/support/e2e.js',
diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
deleted file mode 100644
index 8229063adc1..00000000000
--- a/cypress/plugins/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************************
-// This example plugins/index.js can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-/**
- * @type {Cypress.PluginConfig}
- */
-// eslint-disable-next-line no-unused-vars
-module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-};
diff --git a/test/cypress/plugins/index.js b/test/cypress/plugins/index.js
deleted file mode 100644
index 5ed3ca1d4bc..00000000000
--- a/test/cypress/plugins/index.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/* / <reference types="cypress" />
-    ***********************************************************
-    This example plugins/index.js can be used to load plugins
-
-    You can change the location of this file or turn off loading
-    the plugins file with the 'pluginsFile' configuration option.
-
-    You can read more here:
-    https://on.cypress.io/plugins-guide
-    *********************************************************** */
-
-/* This function is called when a project is opened or re-opened (e.g. due to
-   the project's config changing) */
-
-/**
- * @type {Cypress.PluginConfig}
- * @param {object} on - hook into various events Cypress emits
- * @param {object} config - the resolved Cypress config
- */
-// eslint-disable-next-line no-unused-vars
-module.exports = (on, config) => {
-  /* `on` is used to hook into various events Cypress emits
-     `config` is the resolved Cypress config */
-};