[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

tests/e2e/animateCSS_spec.js

@@ -1,8 +1,11 @@
+const { expect } = require("playwright/test");
 const helpers = require("./helpers/global-setup");
 
 // Validate Animate.css integration for compliments module using class toggling.
 // We intentionally ignore computed animation styles (jsdom doesn't simulate real animations).
 describe("AnimateCSS integration Test", () => {
+	let page;
+
 	// Config variants under test
 	const TEST_CONFIG_ANIM = "tests/configs/modules/compliments/compliments_animateCSS.js";
 	const TEST_CONFIG_FALLBACK = "tests/configs/modules/compliments/compliments_animateCSS_fallbackToDefault.js"; // invalid animation names
@@ -11,32 +14,26 @@ describe("AnimateCSS integration Test", () => {
 
 	/**
 	 * Get the compliments container element (waits until available).
-	 * @returns {Promise<HTMLElement>} compliments root element
+	 * @returns {Promise<void>}
 	 */
 	async function getComplimentsElement () {
 		await helpers.getDocument();
-		const el = await helpers.waitForElement(".compliments");
-		expect(el).not.toBeNull();
-		return el;
+		page = helpers.getPage();
+		await expect(page.locator(".compliments")).toBeVisible();
 	}
 
 	/**
 	 * Wait for an Animate.css class to appear and persist briefly.
 	 * @param {string} cls Animation class name without leading dot (e.g. animate__flipInX)
 	 * @param {{timeout?: number}} [options] Poll timeout in ms (default 6000)
-	 * @returns {Promise<boolean>} true if class detected in time
+	 * @returns {Promise<void>}
 	 */
 	async function waitForAnimationClass (cls, { timeout = 6000 } = {}) {
-		const start = Date.now();
-		while (Date.now() - start < timeout) {
-			if (document.querySelector(`.compliments.animate__animated.${cls}`)) {
-				// small stability wait
-				await new Promise((r) => setTimeout(r, 50));
-				if (document.querySelector(`.compliments.animate__animated.${cls}`)) return true;
-			}
-			await new Promise((r) => setTimeout(r, 100));
-		}
-		throw new Error(`Timeout waiting for class ${cls}`);
+		const locator = page.locator(`.compliments.animate__animated.${cls}`);
+		await locator.waitFor({ state: "attached", timeout });
+		// small stability wait
+		await new Promise((r) => setTimeout(r, 50));
+		await expect(locator).toBeAttached();
 	}
 
 	/**
@@ -46,8 +43,10 @@ describe("AnimateCSS integration Test", () => {
 	 */
 	async function assertNoAnimationWithin (ms = 2000) {
 		const start = Date.now();
+		const locator = page.locator(".compliments.animate__animated");
 		while (Date.now() - start < ms) {
-			if (document.querySelector(".compliments.animate__animated")) {
+			const count = await locator.count();
+			if (count > 0) {
 				throw new Error("Unexpected animate__animated class present in non-animation scenario");
 			}
 			await new Promise((r) => setTimeout(r, 100));
@@ -58,13 +57,13 @@ describe("AnimateCSS integration Test", () => {
 	 * Run one animation test scenario.
 	 * @param {string} [animationIn] Expected animate-in name
 	 * @param {string} [animationOut] Expected animate-out name
-	 * @returns {Promise<boolean>} true when scenario assertions pass
+	 * @returns {Promise<void>} Throws on assertion failure
 	 */
 	async function runAnimationTest (animationIn, animationOut) {
 		await getComplimentsElement();
 		if (!animationIn && !animationOut) {
 			await assertNoAnimationWithin(2000);
-			return true;
+			return;
 		}
 		if (animationIn) await waitForAnimationClass(`animate__${animationIn}`);
 		if (animationOut) {
@@ -72,7 +71,6 @@ describe("AnimateCSS integration Test", () => {
 			await new Promise((r) => setTimeout(r, 2100));
 			await waitForAnimationClass(`animate__${animationOut}`);
 		}
-		return true;
 	}
 
 	afterEach(async () => {
@@ -82,28 +80,28 @@ describe("AnimateCSS integration Test", () => {
 	describe("animateIn and animateOut Test", () => {
 		it("with flipInX and flipOutX animation", async () => {
 			await helpers.startApplication(TEST_CONFIG_ANIM);
-			await expect(runAnimationTest("flipInX", "flipOutX")).resolves.toBe(true);
+			await runAnimationTest("flipInX", "flipOutX");
 		});
 	});
 
 	describe("use animateOut name for animateIn (vice versa) Test", () => {
 		it("without animation (inverted names)", async () => {
 			await helpers.startApplication(TEST_CONFIG_INVERTED);
-			await expect(runAnimationTest()).resolves.toBe(true);
+			await runAnimationTest();
 		});
 	});
 
 	describe("false Animation name test", () => {
 		it("without animation (invalid names)", async () => {
 			await helpers.startApplication(TEST_CONFIG_FALLBACK);
-			await expect(runAnimationTest()).resolves.toBe(true);
+			await runAnimationTest();
 		});
 	});
 
 	describe("no Animation defined test", () => {
 		it("without animation (no config)", async () => {
 			await helpers.startApplication(TEST_CONFIG_NONE);
-			await expect(runAnimationTest()).resolves.toBe(true);
+			await runAnimationTest();
 		});
 	});
 });