web: Fix css loading in unit tests, remove unneeded dot paths (#11629)

* Adding the aliases to Vite helped, but now why are the E2E tests failing?

* web: fix CSS loading with unit tests

- Fix the CSS loader and replace the cut-and-paste loader with a standardized one.
- Fix the aliasing for Wdio's "browser"-based unit testing (Vite)
  - With the aliasing fixed, remove all of the dotted paths in tests.
- Update the End-to-End tests to run in Firefox and Safari.
- Put an (optional) pause at the end of each unit test so we can visually confirm the CSS works.
  - Environment flag is `WDIO_LEMME_SEE=true`
- Reduce the verbosity of the tests to level `warn` or higher

* This change was due to a misunderstanding. It is not needed in 9.

* Fix the Oauth2 Provider test.

web/tests/specs/oauth-provider.ts

@@ -9,7 +9,7 @@ async function reachTheProvider() {
     await ProvidersListPage.logout();
     await login();
     await ProvidersListPage.open();
-    await expect(await ProvidersListPage.pageHeader).toHaveText("Providers");
+    await expect(await ProvidersListPage.pageHeader()).toHaveText("Providers");
 
     await ProvidersListPage.startWizardButton.click();
     await ProviderWizardView.wizardTitle.waitForDisplayed();
@@ -22,16 +22,13 @@ describe("Configure Oauth2 Providers", () => {
 
         await reachTheProvider();
 
-        await ProviderWizardView.providerList.waitForDisplayed();
-        // @ts-expect-error "TSC does not understand metaprogramming."
-        await ProviderWizardView.oauth2Provider.scrollIntoView();
-        // @ts-expect-error "TSC does not understand metaprogramming."
-        await ProviderWizardView.oauth2Provider.click();
+        await $("ak-wizard-page-type-create").waitForDisplayed();
+        await $('div[data-ouid-component-name="oauth2provider"]').scrollIntoView();
+        await $('div[data-ouid-component-name="oauth2provider"]').click();
         await ProviderWizardView.nextButton.click();
         await ProviderWizardView.pause();
 
-        // @ts-expect-error "TSC does not understand ChainablePromiseElement"
-        await ProviderWizardView.oauth.providerName.setValue(newProviderName);
+        return await $('ak-form-element-horizontal[name="name"]').$("input");
         await ProviderWizardView.oauth.setAuthorizationFlow(
             "default-provider-authorization-explicit-consent",
         );

web/tests/wdio.conf.ts

@@ -1,3 +1,50 @@
+import { browser } from "@wdio/globals";
+
+const lemmeSee = process.env.WDIO_LEMME_SEE !== undefined;
+
+const testSafari = process.env.WDIO_TEST_SAFARI !== undefined;
+const testFirefox = process.env.WDIO_TEST_FIREFOX !== undefined;
+const skipChrome = process.env.WDIO_SKIP_CHROME !== undefined;
+const runHeadless = process.env.CI !== undefined;
+
+const capabilities = [];
+
+if (!skipChrome) {
+    capabilities.push({
+        "browserName": "chrome",
+        "wdio:chromedriverOptions": {
+            binary: "./node_modules/.bin/chromedriver",
+        },
+        "goog:chromeOptions": {
+            args: ["disable-infobars", "window-size=1280,800"].concat(
+                (function () {
+                    return runHeadless
+                        ? [
+                              "headless",
+                              "no-sandbox",
+                              "disable-gpu",
+                              "disable-setuid-sandbox",
+                              "disable-dev-shm-usage",
+                          ]
+                        : [];
+                })(),
+            ),
+        },
+    });
+}
+
+if (testSafari) {
+    capabilities.push({
+        browserName: "safari", // or "firefox", "microsoftedge", "safari"
+    });
+}
+
+if (testFirefox) {
+    capabilities.push({
+        browserName: "firefox", // or "firefox", "microsoftedge", "safari"
+    });
+}
+
 export const config: WebdriverIO.Config = {
     //
     // ====================
@@ -50,30 +97,7 @@ export const config: WebdriverIO.Config = {
     // Sauce Labs platform configurator - a great tool to configure your capabilities:
     // https://saucelabs.com/platform/platform-configurator
     //
-    capabilities: [
-        {
-            "browserName": "chrome",
-            "wdio:chromedriverOptions": {
-                binary: "./node_modules/.bin/chromedriver",
-            },
-            "goog:chromeOptions": {
-                args: ["--disable-infobars", "--window-size=1280,800"].concat(
-                    (function () {
-                        return process.env.HEADLESS_CHROME === "1"
-                            ? [
-                                  "--headless",
-                                  "--no-sandbox",
-                                  "--disable-gpu",
-                                  "--disable-setuid-sandbox",
-                                  "--disable-dev-shm-usage",
-                              ]
-                            : [];
-                    })(),
-                ),
-            },
-        },
-    ],
-
+    capabilities,
     //
     // ===================
     // Test Configurations
@@ -246,9 +270,13 @@ export const config: WebdriverIO.Config = {
      * @param {boolean} result.passed    true if test has passed, otherwise false
      * @param {object}  result.retries   information about spec related retries, e.g. `{ attempts: 0, limit: 0 }`
      */
-    // afterTest: function(test, context, { error, result, duration, passed, retries }) {
-    // },
-
+    // Below is the full signature; we're not using any of them.
+    //     afterTest: async function (test, context, { error, result, duration, passed, retries }) {
+    afterTest: async function () {
+        if (lemmeSee) {
+            await browser.pause(500);
+        }
+    },
     /**
      * Hook that gets executed after the suite has ended
      * @param {object} suite suite details