[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
This commit is contained in:
Kristjan ESPERANTO
2025-11-08 21:59:05 +01:00
committed by GitHub
parent 2b08288346
commit f29f424a62
31 changed files with 508 additions and 361 deletions

View File

@@ -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 {