[core] refactor: replace XMLHttpRequest with fetch and migrate e2e tests to Playwright (#3950)

### 1. Replace `XMLHttpRequest` with the modern `fetch` API for loading
translation files

#### Changes
- **translator.js**: Use `fetch` with `async/await` instead of XHR
callbacks
- **loader.js**: Align URL handling and add error handling (follow-up to
fetch migration)
- **Tests**: Update infrastructure for `fetch` compatibility

#### Benefits
- Modern standard API
- Cleaner, more readable code
- Better error handling and fallback mechanisms

### 2. Migrate e2e tests to Playwright

This wasn't originally planned for this PR, but is related. While
investigating suspicious log entries which surfaced after the fetch
migration I kept running into JSDOM’s limitations. That pushed me to
migrate the E2E suite to Playwright instead.

#### Changes
- switch e2e harness to Playwright (`tests/e2e/helpers/global-setup.js`)
- rewrite specs to use Playwright locators + shared `expectTextContent`
- install Chromium via `npx playwright install --with-deps` in CI

#### Benefits
- much closer to real browser behaviour
- and no more fighting JSDOM’s quirks

js/loader.js

@@ -10,13 +10,36 @@ const Loader = (function () {
 
 	/* Private Methods */
 
+	/**
+	 * Get environment variables from config.
+	 * @returns {object} Env vars with modulesDir and customCss paths from config.
+	 */
+	const getEnvVarsFromConfig = function () {
+		return {
+			modulesDir: config.foreignModulesDir || "modules",
+			customCss: config.customCss || "css/custom.css"
+		};
+	};
+
 	/**
 	 * Retrieve object of env variables.
 	 * @returns {object} with key: values as assembled in js/server_functions.js
 	 */
 	const getEnvVars = async function () {
-		const res = await fetch(`${location.protocol}//${location.host}${config.basePath}env`);
-		return JSON.parse(await res.text());
+		// In test mode, skip server fetch and use config values directly
+		if (typeof process !== "undefined" && process.env && process.env.mmTestMode === "true") {
+			return getEnvVarsFromConfig();
+		}
+
+		// In production, fetch env vars from server
+		try {
+			const res = await fetch(new URL("env", `${location.origin}${config.basePath}`));
+			return JSON.parse(await res.text());
+		} catch (error) {
+			// Fallback to config values if server fetch fails
+			Log.error("Unable to retrieve env configuration", error);
+			return getEnvVarsFromConfig();
+		}
 	};
 
 	/**

js/translator.js

@@ -3,30 +3,24 @@
 const Translator = (function () {
 
 	/**
-	 * Load a JSON file via XHR.
+	 * Load a JSON file via fetch.
 	 * @param {string} file Path of the file we want to load.
 	 * @returns {Promise<object>} the translations in the specified file
 	 */
 	async function loadJSON (file) {
-		const xhr = new XMLHttpRequest();
-		return new Promise(function (resolve) {
-			xhr.overrideMimeType("application/json");
-			xhr.open("GET", file, true);
-			xhr.onreadystatechange = function () {
-				if (xhr.readyState === 4 && xhr.status === 200) {
-					// needs error handler try/catch at least
-					let fileInfo = null;
-					try {
-						fileInfo = JSON.parse(xhr.responseText);
-					} catch (exception) {
-						// nothing here, but don't die
-						Log.error(`[translator] loading json file =${file} failed`);
-					}
-					resolve(fileInfo);
-				}
-			};
-			xhr.send(null);
-		});
+		const baseHref = document.baseURI;
+		const url = new URL(file, baseHref);
+
+		try {
+			const response = await fetch(url);
+			if (!response.ok) {
+				throw new Error(`Unexpected response status: ${response.status}`);
+			}
+			return await response.json();
+		} catch (exception) {
+			Log.error(`Loading json file =${file} failed`);
+			return null;
+		}
 	}
 
 	return {