[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

.github/workflows/automated-tests.yaml

@@ -59,6 +59,9 @@ jobs:
       - name: "Install MagicMirror²"
         run: |
           node --run install-mm:dev
+      - name: "Install Playwright browsers"
+        run: |
+          npx playwright install --with-deps chromium
       - name: "Prepare environment for tests"
         run: |
           # Fix chrome-sandbox permissions:

CHANGELOG.md

@@ -32,6 +32,8 @@ planned for 2026-01-01
 - [tests] replace `node-libgpiod` with `serialport` in electron-rebuild workflow (#3945)
 - [calendar] hide repeatingCountTitle if the event count is zero (#3949)
 - [core] configure cspell to check default modules only and fix typos (#3955)
+- [core] refactor: replace `XMLHttpRequest` with `fetch` in `translator.js` (#3950)
+- [tests] migrate e2e tests to Playwright (#3950)
 
 ### Fixed
 

eslint.config.mjs

@@ -4,6 +4,7 @@ import {flatConfigs as importX} from "eslint-plugin-import-x";
 import js from "@eslint/js";
 import jsdocPlugin from "eslint-plugin-jsdoc";
 import packageJson from "eslint-plugin-package-json";
+import playwright from "eslint-plugin-playwright";
 import stylistic from "@stylistic/eslint-plugin";
 import vitest from "eslint-plugin-vitest";
 
@@ -59,6 +60,20 @@ export default defineConfig([
 			"import-x/order": "error",
 			"init-declarations": "off",
 			"vitest/consistent-test-it": "warn",
+			"vitest/expect-expect": [
+				"warn",
+				{
+					assertFunctionNames: [
+						"expect",
+						"testElementLength",
+						"testTextContain",
+						"doTest",
+						"runAnimationTest",
+						"waitForAnimationClass",
+						"assertNoAnimationWithin"
+					]
+				}
+			],
 			"vitest/prefer-to-be": "warn",
 			"vitest/prefer-to-have-length": "warn",
 			"max-lines-per-function": ["warn", 400],
@@ -125,5 +140,12 @@ export default defineConfig([
 		rules: {
 			"@stylistic/quotes": "off"
 		}
+	},
+	{
+		files: ["tests/e2e/**/*.js"],
+		extends: [playwright.configs["flat/recommended"]],
+		rules: {
+			"playwright/no-standalone-expect": "off"
+		}
 	}
 ]);

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`);
+		// 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();
+		const baseHref = document.baseURI;
-		return new Promise(function (resolve) {
+		const url = new URL(file, baseHref);
-			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);
+			const response = await fetch(url);
+			if (!response.ok) {
+				throw new Error(`Unexpected response status: ${response.status}`);
+			}
+			return await response.json();
 		} catch (exception) {
-						// nothing here, but don't die
+			Log.error(`Loading json file =${file} failed`);
-						Log.error(`[translator] loading json file =${file} failed`);
+			return null;
 		}
-					resolve(fileInfo);
-				}
-			};
-			xhr.send(null);
-		});
 	}
 
 	return {

package-lock.json

@@ -44,6 +44,7 @@
 				"eslint-plugin-import-x": "^4.16.1",
 				"eslint-plugin-jsdoc": "^61.1.11",
 				"eslint-plugin-package-json": "^0.59.1",
+				"eslint-plugin-playwright": "^2.3.0",
 				"eslint-plugin-vitest": "^0.5.4",
 				"express-basic-auth": "^1.2.1",
 				"husky": "^9.1.7",
@@ -5496,6 +5497,35 @@
 				"jsonc-eslint-parser": "^2.0.0"
 			}
 		},
+		"node_modules/eslint-plugin-playwright": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-playwright/-/eslint-plugin-playwright-2.3.0.tgz",
+			"integrity": "sha512-7UeUuIb5SZrNkrUGb2F+iwHM97kn33/huajcVtAaQFCSMUYGNFvjzRPil5C0OIppslPfuOV68M/zsisXx+/ZvQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"globals": "^16.4.0"
+			},
+			"engines": {
+				"node": ">=16.9.0"
+			},
+			"peerDependencies": {
+				"eslint": ">=8.40.0"
+			}
+		},
+		"node_modules/eslint-plugin-playwright/node_modules/globals": {
+			"version": "16.5.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-16.5.0.tgz",
+			"integrity": "sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/eslint-plugin-vitest": {
 			"version": "0.5.4",
 			"resolved": "https://registry.npmjs.org/eslint-plugin-vitest/-/eslint-plugin-vitest-0.5.4.tgz",

package.json

@@ -36,7 +36,7 @@
 		"config:check": "node js/check_config.js",
 		"postinstall": "git clean -df fonts vendor",
 		"install-mm": "npm install --no-audit --no-fund --no-update-notifier --only=prod --omit=dev",
-		"install-mm:dev": "npm install --no-audit --no-fund --no-update-notifier",
+		"install-mm:dev": "npm install --no-audit --no-fund --no-update-notifier && npx playwright install chromium",
 		"lint:css": "stylelint 'css/main.css' 'css/roboto.css' 'css/font-awesome.css' 'modules/default/**/*.css' --fix",
 		"lint:js": "eslint --fix",
 		"lint:markdown": "markdownlint-cli2 . --fix",
@@ -106,6 +106,7 @@
 		"eslint-plugin-import-x": "^4.16.1",
 		"eslint-plugin-jsdoc": "^61.1.11",
 		"eslint-plugin-package-json": "^0.59.1",
+		"eslint-plugin-playwright": "^2.3.0",
 		"eslint-plugin-vitest": "^0.5.4",
 		"express-basic-auth": "^1.2.1",
 		"husky": "^9.1.7",

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");
+		page = helpers.getPage();
-		expect(el).not.toBeNull();
+		await expect(page.locator(".compliments")).toBeVisible();
-		return el;
 	}
 
 	/**
 	 * 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();
+		const locator = page.locator(`.compliments.animate__animated.${cls}`);
-		while (Date.now() - start < timeout) {
+		await locator.waitFor({ state: "attached", 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 expect(locator).toBeAttached();
-			}
-			await new Promise((r) => setTimeout(r, 100));
-		}
-		throw new Error(`Timeout waiting for class ${cls}`);
 	}
 
 	/**
@@ -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();
 		});
 	});
 });

tests/e2e/custom_module_regions_spec.js

@@ -1,10 +1,14 @@
+const { expect } = require("playwright/test");
 const helpers = require("./helpers/global-setup");
 
 describe("Custom Position of modules", () => {
+	let page;
+
 	beforeAll(async () => {
 		await helpers.fixupIndex();
 		await helpers.startApplication("tests/configs/customregions.js");
 		await helpers.getDocument();
+		page = helpers.getPage();
 	});
 	afterAll(async () => {
 		await helpers.stopApplication();
@@ -16,15 +20,12 @@ describe("Custom Position of modules", () => {
 	const className1 = positions[i].replace("_", ".");
 	let message1 = positions[i];
 	it(`should show text in ${message1}`, async () => {
-		const elem = await helpers.waitForElement(`.${className1}`);
+		await expect(page.locator(`.${className1} .module-content`)).toContainText(`Text in ${message1}`);
-		expect(elem).not.toBeNull();
-		expect(elem.textContent).toContain(`Text in ${message1}`);
 	});
 	i = 1;
 	const className2 = positions[i].replace("_", ".");
 	let message2 = positions[i];
 	it(`should NOT show text in ${message2}`, async () => {
-		const elem = await helpers.waitForElement(`.${className2}`, "", 1500);
+		await expect(page.locator(`.${className2} .module-content`)).toHaveCount(0);
-		expect(elem).toBeNull();
+	});
-	}, 1510);
 });

tests/e2e/env_spec.js

@@ -1,9 +1,13 @@
+const { expect } = require("playwright/test");
 const helpers = require("./helpers/global-setup");
 
 describe("App environment", () => {
+	let page;
+
 	beforeAll(async () => {
 		await helpers.startApplication("tests/configs/default.js");
 		await helpers.getDocument();
+		page = helpers.getPage();
 	});
 	afterAll(async () => {
 		await helpers.stopApplication();
@@ -20,8 +24,6 @@ describe("App environment", () => {
 	});
 
 	it("should show the title MagicMirror²", async () => {
-		const elem = await helpers.waitForElement("title");
+		await expect(page).toHaveTitle("MagicMirror²");
-		expect(elem).not.toBeNull();
-		expect(elem.textContent).toBe("MagicMirror²");
 	});
 });

tests/e2e/helpers/global-setup.js

@@ -1,7 +1,7 @@
 const path = require("node:path");
 const os = require("node:os");
 const fs = require("node:fs");
-const jsdom = require("jsdom");
+const { chromium } = require("playwright");
 
 // global absolute root path
 global.root_path = path.resolve(`${__dirname}/../../../`);
@@ -16,8 +16,67 @@ const sampleCss = [
 	" top: 100%;",
 	"}"
 ];
-var indexData = [];
+let indexData = "";
-var cssData = [];
+let cssData = "";
+
+let browser;
+let context;
+let page;
+
+/**
+ * Ensure Playwright browser and context are available.
+ * @returns {Promise<void>}
+ */
+async function ensureContext () {
+	if (!browser) {
+		browser = await chromium.launch({ headless: true });
+	}
+	if (!context) {
+		context = await browser.newContext();
+	}
+}
+
+/**
+ * Open a fresh page pointing to the provided url.
+ * @param {string} url target url
+ * @returns {Promise<import('playwright').Page>} initialized page instance
+ */
+async function openPage (url) {
+	await ensureContext();
+	if (page) {
+		await page.close();
+	}
+	page = await context.newPage();
+	await page.goto(url, { waitUntil: "load" });
+	return page;
+}
+
+/**
+ * Close page, context and browser if they exist.
+ * @returns {Promise<void>}
+ */
+async function closeBrowser () {
+	if (page) {
+		await page.close();
+		page = null;
+	}
+	if (context) {
+		await context.close();
+		context = null;
+	}
+	if (browser) {
+		await browser.close();
+		browser = null;
+	}
+}
+
+exports.getPage = () => {
+	if (!page) {
+		throw new Error("Playwright page is not initialized. Call getDocument() first.");
+	}
+	return page;
+};
+
 
 exports.startApplication = async (configFilename, exec) => {
 	vi.resetModules();
@@ -35,7 +94,7 @@ exports.startApplication = async (configFilename, exec) => {
 	});
 
 	if (global.app) {
-		await this.stopApplication();
+		await exports.stopApplication();
 	}
 
 	// Use fixed port 8080 (tests run sequentially, no conflicts)
@@ -64,11 +123,7 @@ exports.startApplication = async (configFilename, exec) => {
 };
 
 exports.stopApplication = async (waitTime = 100) => {
-	if (global.window) {
+	await closeBrowser();
-		// no closing causes test errors and memory leaks
-		global.window.close();
-		delete global.window;
-	}
 
 	if (!global.app) {
 		delete global.testPort;
@@ -79,90 +134,23 @@ exports.stopApplication = async (waitTime = 100) => {
 	delete global.app;
 	delete global.testPort;
 
-	// Small delay to ensure clean shutdown
+	// Wait for any pending async operations to complete before closing DOM
 	await new Promise((resolve) => setTimeout(resolve, waitTime));
 };
 
-exports.getDocument = () => {
+exports.getDocument = async () => {
-	return new Promise((resolve) => {
 	const port = global.testPort || config.port || 8080;
-		const url = `http://${config.address || "localhost"}:${port}`;
+	const address = config.address === "0.0.0.0" ? "localhost" : config.address || "localhost";
-		jsdom.JSDOM.fromURL(url, { resources: "usable", runScripts: "dangerously" }).then((dom) => {
+	const url = `http://${address}:${port}`;
-			dom.window.name = "jsdom";
-			global.window = dom.window;
-			// Following fixes `navigator is not defined` errors in e2e tests, found here
-			// https://www.appsloveworld.com/reactjs/100/37/mocha-react-navigator-is-not-defined
-			global.navigator = {
-				useragent: "node.js"
-			};
-			dom.window.fetch = fetch;
-			dom.window.onload = () => {
-				global.document = dom.window.document;
-				resolve();
-			};
-		});
-	});
-};
 
-exports.waitForElement = (selector, ignoreValue = "", timeout = 0) => {
+	await openPage(url);
-	return new Promise((resolve) => {
-		let oldVal = "dummy12345";
-		let element = null;
-		const interval = setInterval(() => {
-			element = document.querySelector(selector);
-			if (element) {
-				let newVal = element.textContent;
-				if (newVal === oldVal) {
-					clearInterval(interval);
-					resolve(element);
-				} else {
-					if (ignoreValue === "") {
-						oldVal = newVal;
-					} else {
-						if (!newVal.includes(ignoreValue)) oldVal = newVal;
-					}
-				}
-			}
-		}, 100);
-		if (timeout !== 0) {
-			setTimeout(() => {
-				if (interval) clearInterval(interval);
-				resolve(null);
-			}, timeout);
-		}
-	});
-};
-
-exports.waitForAllElements = (selector) => {
-	return new Promise((resolve) => {
-		let oldVal = 999999;
-		const interval = setInterval(() => {
-			const element = document.querySelectorAll(selector);
-			if (element) {
-				let newVal = element.length;
-				if (newVal === oldVal) {
-					clearInterval(interval);
-					resolve(element);
-				} else {
-					if (newVal !== 0) oldVal = newVal;
-				}
-			}
-		}, 100);
-	});
-};
-
-exports.testMatch = async (element, regex) => {
-	const elem = await this.waitForElement(element);
-	expect(elem).not.toBeNull();
-	expect(elem.textContent).toMatch(regex);
-	return true;
 };
 
 exports.fixupIndex = async () => {
 	// read and save the git level index file
 	indexData = (await fs.promises.readFile(indexFile)).toString();
 	// make lines of the content
-	let workIndexLines = indexData.split(os.EOL);
+	const workIndexLines = indexData.split(os.EOL);
 	// loop thru the lines to find place to insert new region
 	for (let l in workIndexLines) {
 		if (workIndexLines[l].includes("region top right")) {
@@ -181,7 +169,7 @@ exports.fixupIndex = async () => {
 
 exports.restoreIndex = async () => {
 	// if we read in data
-	if (indexData.length > 1) {
+	if (indexData.length > 0) {
 		//write out saved index.html
 		await fs.promises.writeFile(indexFile, indexData, { flush: true });
 		// write out saved custom.css

tests/e2e/helpers/weather-functions.js

@@ -1,18 +1,6 @@
 const { injectMockData, cleanupMockData } = require("../../utils/weather_mocker");
 const helpers = require("./global-setup");
 
-exports.getText = async (element, result) => {
-	const elem = await helpers.waitForElement(element);
-	expect(elem).not.toBeNull();
-	expect(
-		elem.textContent
-			.trim()
-			.replace(/(\r\n|\n|\r)/gm, "")
-			.replace(/[ ]+/g, " ")
-	).toBe(result);
-	return true;
-};
-
 exports.startApplication = async (configFileName, additionalMockData) => {
 	await helpers.startApplication(injectMockData(configFileName, additionalMockData));
 	await helpers.getDocument();

tests/e2e/modules/alert_spec.js

@@ -1,6 +1,9 @@
+const { expect } = require("playwright/test");
 const helpers = require("../helpers/global-setup");
 
 describe("Alert module", () => {
+	let page;
+
 	afterAll(async () => {
 		await helpers.stopApplication();
 	});
@@ -9,6 +12,7 @@ describe("Alert module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/alert/welcome_false.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("should not show any welcome message", async () => {
@@ -16,8 +20,7 @@ describe("Alert module", () => {
 			await new Promise((resolve) => setTimeout(resolve, 1000));
 
 			// Check that no alert/notification elements are present
-			const alertElements = document.querySelectorAll(".ns-box .ns-box-inner .light.bright.small");
+			await expect(page.locator(".ns-box .ns-box-inner .light.bright.small")).toHaveCount(0);
-			expect(alertElements).toHaveLength(0);
 		});
 	});
 
@@ -25,15 +28,14 @@ describe("Alert module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/alert/welcome_true.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 
 			// Wait for the application to initialize
 			await new Promise((resolve) => setTimeout(resolve, 1000));
 		});
 
 		it("should show the translated welcome message", async () => {
-			const elem = await helpers.waitForElement(".ns-box .ns-box-inner .light.bright.small");
+			await expect(page.locator(".ns-box .ns-box-inner .light.bright.small")).toContainText("Welcome, start was successful!");
-			expect(elem).not.toBeNull();
-			expect(elem.textContent).toContain("Welcome, start was successful!");
 		});
 	});
 
@@ -41,12 +43,11 @@ describe("Alert module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/alert/welcome_string.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("should show the custom welcome message", async () => {
-			const elem = await helpers.waitForElement(".ns-box .ns-box-inner .light.bright.small");
+			await expect(page.locator(".ns-box .ns-box-inner .light.bright.small")).toContainText("Custom welcome message!");
-			expect(elem).not.toBeNull();
-			expect(elem.textContent).toContain("Custom welcome message!");
 		});
 	});
 });

tests/e2e/modules/calendar_spec.js

@@ -1,30 +1,28 @@
+const { expect } = require("playwright/test");
 const helpers = require("../helpers/global-setup");
 const serverBasicAuth = require("../helpers/basic-auth");
 
 describe("Calendar module", () => {
+	let page;
 
 	/**
-	 * @param {string} element css selector
+	 * Assert the number of matching elements.
-	 * @param {string} result expected number
+	 * @param {string} selector css selector
-	 * @param {string} not reverse result
+	 * @param {number} expectedLength expected number of elements
-	 * @returns {boolean} result
+	 * @param {string} [not] optional negation marker (use "not" to negate)
+	 * @returns {Promise<void>}
 	 */
-	const testElementLength = async (element, result, not) => {
+	const testElementLength = async (selector, expectedLength, not) => {
-		const elem = await helpers.waitForAllElements(element);
+		const locator = page.locator(selector);
-		expect(elem).not.toBeNull();
 		if (not === "not") {
-			expect(elem).not.toHaveLength(result);
+			await expect(locator).not.toHaveCount(expectedLength);
 		} else {
-			expect(elem).toHaveLength(result);
+			await expect(locator).toHaveCount(expectedLength);
 		}
-		return true;
 	};
 
-	const testTextContain = async (element, text) => {
+	const testTextContain = async (selector, expectedText) => {
-		const elem = await helpers.waitForElement(element, "undefinedLoading");
+		await expect(page.locator(selector).first()).toContainText(expectedText);
-		expect(elem).not.toBeNull();
-		expect(elem.textContent).toContain(text);
-		return true;
 	};
 
 	afterAll(async () => {
@@ -35,14 +33,15 @@ describe("Calendar module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/calendar/default.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("should show the default maximumEntries of 10", async () => {
-			await expect(testElementLength(".calendar .event", 10)).resolves.toBe(true);
+			await testElementLength(".calendar .event", 10);
 		});
 
 		it("should show the default calendar symbol in each event", async () => {
-			await expect(testElementLength(".calendar .event .fa-calendar-days", 0, "not")).resolves.toBe(true);
+			await testElementLength(".calendar .event .fa-calendar-days", 0, "not");
 		});
 	});
 
@@ -50,30 +49,31 @@ describe("Calendar module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/calendar/custom.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("should show the custom maximumEntries of 5", async () => {
-			await expect(testElementLength(".calendar .event", 5)).resolves.toBe(true);
+			await testElementLength(".calendar .event", 5);
 		});
 
 		it("should show the custom calendar symbol in four events", async () => {
-			await expect(testElementLength(".calendar .event .fa-birthday-cake", 4)).resolves.toBe(true);
+			await testElementLength(".calendar .event .fa-birthday-cake", 4);
 		});
 
 		it("should show a customEvent calendar symbol in one event", async () => {
-			await expect(testElementLength(".calendar .event .fa-dice", 1)).resolves.toBe(true);
+			await testElementLength(".calendar .event .fa-dice", 1);
 		});
 
 		it("should show a customEvent calendar eventClass in one event", async () => {
-			await expect(testElementLength(".calendar .event.undo", 1)).resolves.toBe(true);
+			await testElementLength(".calendar .event.undo", 1);
 		});
 
 		it("should show two custom icons for repeating events", async () => {
-			await expect(testElementLength(".calendar .event .fa-undo", 2)).resolves.toBe(true);
+			await testElementLength(".calendar .event .fa-undo", 2);
 		});
 
 		it("should show two custom icons for day events", async () => {
-			await expect(testElementLength(".calendar .event .fa-calendar-day", 2)).resolves.toBe(true);
+			await testElementLength(".calendar .event .fa-calendar-day", 2);
 		});
 	});
 
@@ -81,10 +81,11 @@ describe("Calendar module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/calendar/recurring.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("should show the recurring birthday event 6 times", async () => {
-			await expect(testElementLength(".calendar .event", 6)).resolves.toBe(true);
+			await testElementLength(".calendar .event", 6);
 		});
 	});
 
@@ -93,15 +94,16 @@ describe("Calendar module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/calendar/long-fullday-event.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("should contain text 'Ends in' with the left days", async () => {
-			await expect(testTextContain(".calendar .today .time", "Ends in")).resolves.toBe(true);
+			await testTextContain(".calendar .today .time", "Ends in");
-			await expect(testTextContain(".calendar .yesterday .time", "Today")).resolves.toBe(true);
+			await testTextContain(".calendar .yesterday .time", "Today");
-			await expect(testTextContain(".calendar .tomorrow .time", "Tomorrow")).resolves.toBe(true);
+			await testTextContain(".calendar .tomorrow .time", "Tomorrow");
 		});
 		it("should contain in total three events", async () => {
-			await expect(testElementLength(".calendar .event", 3)).resolves.toBe(true);
+			await testElementLength(".calendar .event", 3);
 		});
 	});
 
@@ -109,13 +111,14 @@ describe("Calendar module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/calendar/single-fullday-event.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("should contain text 'Today'", async () => {
-			await expect(testTextContain(".calendar .time", "Today")).resolves.toBe(true);
+			await testTextContain(".calendar .time", "Today");
 		});
 		it("should contain in total two events", async () => {
-			await expect(testElementLength(".calendar .event", 2)).resolves.toBe(true);
+			await testElementLength(".calendar .event", 2);
 		});
 	});
 
@@ -124,6 +127,7 @@ describe("Calendar module", () => {
 			await helpers.startApplication("tests/configs/modules/calendar/changed-port.js");
 			serverBasicAuth.listen(8010);
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		afterAll(async () => {
@@ -131,7 +135,7 @@ describe("Calendar module", () => {
 		});
 
 		it("should return TestEvents", async () => {
-			await expect(testElementLength(".calendar .event", 0, "not")).resolves.toBe(true);
+			await testElementLength(".calendar .event", 0, "not");
 		});
 	});
 
@@ -139,10 +143,11 @@ describe("Calendar module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/calendar/basic-auth.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("should return TestEvents", async () => {
-			await expect(testElementLength(".calendar .event", 0, "not")).resolves.toBe(true);
+			await testElementLength(".calendar .event", 0, "not");
 		});
 	});
 
@@ -150,10 +155,11 @@ describe("Calendar module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/calendar/auth-default.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("should return TestEvents", async () => {
-			await expect(testElementLength(".calendar .event", 0, "not")).resolves.toBe(true);
+			await testElementLength(".calendar .event", 0, "not");
 		});
 	});
 
@@ -161,10 +167,11 @@ describe("Calendar module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/calendar/old-basic-auth.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("should return TestEvents", async () => {
-			await expect(testElementLength(".calendar .event", 0, "not")).resolves.toBe(true);
+			await testElementLength(".calendar .event", 0, "not");
 		});
 	});
 
@@ -173,6 +180,7 @@ describe("Calendar module", () => {
 			await helpers.startApplication("tests/configs/modules/calendar/fail-basic-auth.js");
 			serverBasicAuth.listen(8020);
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		afterAll(async () => {
@@ -180,7 +188,7 @@ describe("Calendar module", () => {
 		});
 
 		it("should show Unauthorized error", async () => {
-			await expect(testTextContain(".calendar", "Error in the calendar module. Authorization failed")).resolves.toBe(true);
+			await testTextContain(".calendar", "Error in the calendar module. Authorization failed");
 		});
 	});
 });

tests/e2e/modules/clock_de_spec.js

@@ -1,6 +1,9 @@
+const { expect } = require("playwright/test");
 const helpers = require("../helpers/global-setup");
 
 describe("Clock set to german language module", () => {
+	let page;
+
 	afterAll(async () => {
 		await helpers.stopApplication();
 	});
@@ -9,11 +12,12 @@ describe("Clock set to german language module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/clock/de/clock_showWeek.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("shows week with correct format", async () => {
 			const weekRegex = /^[0-9]{1,2}. Kalenderwoche$/;
-			await expect(helpers.testMatch(".clock .week", weekRegex)).resolves.toBe(true);
+			await expect(page.locator(".clock .week")).toHaveText(weekRegex);
 		});
 	});
 
@@ -21,11 +25,12 @@ describe("Clock set to german language module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/clock/de/clock_showWeek_short.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("shows week with correct format", async () => {
 			const weekRegex = /^[0-9]{1,2}KW$/;
-			await expect(helpers.testMatch(".clock .week", weekRegex)).resolves.toBe(true);
+			await expect(page.locator(".clock .week")).toHaveText(weekRegex);
 		});
 	});
 });

tests/e2e/modules/clock_es_spec.js

@@ -1,6 +1,9 @@
+const { expect } = require("playwright/test");
 const helpers = require("../helpers/global-setup");
 
 describe("Clock set to spanish language module", () => {
+	let page;
+
 	afterAll(async () => {
 		await helpers.stopApplication();
 	});
@@ -9,16 +12,17 @@ describe("Clock set to spanish language module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/clock/es/clock_24hr.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("shows date with correct format", async () => {
 			const dateRegex = /^(?:lunes|martes|miércoles|jueves|viernes|sábado|domingo), \d{1,2} de (?:enero|febrero|marzo|abril|mayo|junio|julio|agosto|septiembre|octubre|noviembre|diciembre) de \d{4}$/;
-			await expect(helpers.testMatch(".clock .date", dateRegex)).resolves.toBe(true);
+			await expect(page.locator(".clock .date")).toHaveText(dateRegex);
 		});
 
 		it("shows time in 24hr format", async () => {
 			const timeRegex = /^(?:2[0-3]|[01]\d):[0-5]\d[0-5]\d$/;
-			await expect(helpers.testMatch(".clock .time", timeRegex)).resolves.toBe(true);
+			await expect(page.locator(".clock .time")).toHaveText(timeRegex);
 		});
 	});
 
@@ -26,16 +30,17 @@ describe("Clock set to spanish language module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/clock/es/clock_12hr.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("shows date with correct format", async () => {
 			const dateRegex = /^(?:lunes|martes|miércoles|jueves|viernes|sábado|domingo), \d{1,2} de (?:enero|febrero|marzo|abril|mayo|junio|julio|agosto|septiembre|octubre|noviembre|diciembre) de \d{4}$/;
-			await expect(helpers.testMatch(".clock .date", dateRegex)).resolves.toBe(true);
+			await expect(page.locator(".clock .date")).toHaveText(dateRegex);
 		});
 
 		it("shows time in 12hr format", async () => {
 			const timeRegex = /^(?:1[0-2]|[1-9]):[0-5]\d[0-5]\d[ap]m$/;
-			await expect(helpers.testMatch(".clock .time", timeRegex)).resolves.toBe(true);
+			await expect(page.locator(".clock .time")).toHaveText(timeRegex);
 		});
 	});
 
@@ -43,11 +48,12 @@ describe("Clock set to spanish language module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/clock/es/clock_showPeriodUpper.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("shows 12hr time with upper case AM/PM", async () => {
 			const timeRegex = /^(?:1[0-2]|[1-9]):[0-5]\d[0-5]\d[AP]M$/;
-			await expect(helpers.testMatch(".clock .time", timeRegex)).resolves.toBe(true);
+			await expect(page.locator(".clock .time")).toHaveText(timeRegex);
 		});
 	});
 
@@ -55,11 +61,12 @@ describe("Clock set to spanish language module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/clock/es/clock_showWeek.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("shows week with correct format", async () => {
 			const weekRegex = /^Semana [0-9]{1,2}$/;
-			await expect(helpers.testMatch(".clock .week", weekRegex)).resolves.toBe(true);
+			await expect(page.locator(".clock .week")).toHaveText(weekRegex);
 		});
 	});
 
@@ -67,11 +74,12 @@ describe("Clock set to spanish language module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/clock/es/clock_showWeek_short.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("shows week with correct format", async () => {
 			const weekRegex = /^S[0-9]{1,2}$/;
-			await expect(helpers.testMatch(".clock .week", weekRegex)).resolves.toBe(true);
+			await expect(page.locator(".clock .week")).toHaveText(weekRegex);
 		});
 	});
 });

tests/e2e/modules/clock_spec.js

@@ -1,7 +1,10 @@
+const { expect } = require("playwright/test");
 const moment = require("moment");
 const helpers = require("../helpers/global-setup");
 
 describe("Clock module", () => {
+	let page;
+
 	afterAll(async () => {
 		await helpers.stopApplication();
 	});
@@ -10,16 +13,17 @@ describe("Clock module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/clock/clock_24hr.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("should show the date in the correct format", async () => {
 			const dateRegex = /^(?:Monday|Tuesday|Wednesday|Thursday|Friday|Saturday|Sunday), (?:January|February|March|April|May|June|July|August|September|October|November|December) \d{1,2}, \d{4}$/;
-			await expect(helpers.testMatch(".clock .date", dateRegex)).resolves.toBe(true);
+			await expect(page.locator(".clock .date")).toHaveText(dateRegex);
 		});
 
 		it("should show the time in 24hr format", async () => {
 			const timeRegex = /^(?:2[0-3]|[01]\d):[0-5]\d[0-5]\d$/;
-			await expect(helpers.testMatch(".clock .time", timeRegex)).resolves.toBe(true);
+			await expect(page.locator(".clock .time")).toHaveText(timeRegex);
 		});
 	});
 
@@ -27,23 +31,22 @@ describe("Clock module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/clock/clock_12hr.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("should show the date in the correct format", async () => {
 			const dateRegex = /^(?:Monday|Tuesday|Wednesday|Thursday|Friday|Saturday|Sunday), (?:January|February|March|April|May|June|July|August|September|October|November|December) \d{1,2}, \d{4}$/;
-			await expect(helpers.testMatch(".clock .date", dateRegex)).resolves.toBe(true);
+			await expect(page.locator(".clock .date")).toHaveText(dateRegex);
 		});
 
 		it("should show the time in 12hr format", async () => {
 			const timeRegex = /^(?:1[0-2]|[1-9]):[0-5]\d[0-5]\d[ap]m$/;
-			await expect(helpers.testMatch(".clock .time", timeRegex)).resolves.toBe(true);
+			await expect(page.locator(".clock .time")).toHaveText(timeRegex);
 		});
 
 		it("check for discreet elements of clock", async () => {
-			let elemClock = await helpers.waitForElement(".clock-hour-digital");
+			await expect(page.locator(".clock-hour-digital")).toBeVisible();
-			await expect(elemClock).not.toBeNull();
+			await expect(page.locator(".clock-minute-digital")).toBeVisible();
-			elemClock = await helpers.waitForElement(".clock-minute-digital");
-			await expect(elemClock).not.toBeNull();
 		});
 	});
 
@@ -51,11 +54,12 @@ describe("Clock module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/clock/clock_showPeriodUpper.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("should show 12hr time with upper case AM/PM", async () => {
 			const timeRegex = /^(?:1[0-2]|[1-9]):[0-5]\d[0-5]\d[AP]M$/;
-			await expect(helpers.testMatch(".clock .time", timeRegex)).resolves.toBe(true);
+			await expect(page.locator(".clock .time")).toHaveText(timeRegex);
 		});
 	});
 
@@ -63,11 +67,12 @@ describe("Clock module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/clock/clock_displaySeconds_false.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("should show 12hr time without seconds am/pm", async () => {
 			const timeRegex = /^(?:1[0-2]|[1-9]):[0-5]\d[ap]m$/;
-			await expect(helpers.testMatch(".clock .time", timeRegex)).resolves.toBe(true);
+			await expect(page.locator(".clock .time")).toHaveText(timeRegex);
 		});
 	});
 
@@ -75,11 +80,11 @@ describe("Clock module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/clock/clock_showTime.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("should not show the time when digital clock is shown", async () => {
-			const elem = document.querySelector(".clock .digital .time");
+			await expect(page.locator(".clock .digital .time")).toHaveCount(0);
-			expect(elem).toBeNull();
 		});
 	});
 
@@ -87,19 +92,16 @@ describe("Clock module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/clock/clock_showSunMoon.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("should show the sun times", async () => {
-			const elem = await helpers.waitForElement(".clock .digital .sun");
+			await expect(page.locator(".clock .digital .sun")).toBeVisible();
-			expect(elem).not.toBeNull();
+			await expect(page.locator(".clock .digital .sun .fas.fa-sun")).toBeVisible();
-
-			const elem2 = await helpers.waitForElement(".clock .digital .sun .fas.fa-sun");
-			expect(elem2).not.toBeNull();
 		});
 
 		it("should show the moon times", async () => {
-			const elem = await helpers.waitForElement(".clock .digital .moon");
+			await expect(page.locator(".clock .digital .moon")).toBeVisible();
-			expect(elem).not.toBeNull();
 		});
 	});
 
@@ -107,14 +109,12 @@ describe("Clock module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/clock/clock_showSunNoEvent.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("should show the sun times", async () => {
-			const elem = await helpers.waitForElement(".clock .digital .sun");
+			await expect(page.locator(".clock .digital .sun")).toBeVisible();
-			expect(elem).not.toBeNull();
+			await expect(page.locator(".clock .digital .sun .fas.fa-sun")).toHaveCount(0);
-
-			const elem2 = document.querySelector(".clock .digital .sun .fas.fa-sun");
-			expect(elem2).toBeNull();
 		});
 	});
 
@@ -122,19 +122,18 @@ describe("Clock module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/clock/clock_showWeek.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("should show the week in the correct format", async () => {
 			const weekRegex = /^Week [0-9]{1,2}$/;
-			await expect(helpers.testMatch(".clock .week", weekRegex)).resolves.toBe(true);
+			await expect(page.locator(".clock .week")).toHaveText(weekRegex);
 		});
 
 		it("should show the week with the correct number of week of year", async () => {
 			const currentWeekNumber = moment().week();
 			const weekToShow = `Week ${currentWeekNumber}`;
-			const elem = await helpers.waitForElement(".clock .week");
+			await expect(page.locator(".clock .week")).toHaveText(weekToShow);
-			expect(elem).not.toBeNull();
-			expect(elem.textContent).toBe(weekToShow);
 		});
 	});
 
@@ -142,19 +141,18 @@ describe("Clock module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/clock/clock_showWeek_short.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("should show the week in the correct format", async () => {
 			const weekRegex = /^W[0-9]{1,2}$/;
-			await expect(helpers.testMatch(".clock .week", weekRegex)).resolves.toBe(true);
+			await expect(page.locator(".clock .week")).toHaveText(weekRegex);
 		});
 
 		it("should show the week with the correct number of week of year", async () => {
 			const currentWeekNumber = moment().week();
 			const weekToShow = `W${currentWeekNumber}`;
-			const elem = await helpers.waitForElement(".clock .week");
+			await expect(page.locator(".clock .week")).toHaveText(weekToShow);
-			expect(elem).not.toBeNull();
-			expect(elem.textContent).toBe(weekToShow);
 		});
 	});
 
@@ -162,11 +160,11 @@ describe("Clock module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/clock/clock_analog.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("should show the analog clock face", async () => {
-			const elem = await helpers.waitForElement(".clock-circle");
+			await expect(page.locator(".clock-circle")).toBeVisible();
-			expect(elem).not.toBeNull();
 		});
 	});
 
@@ -174,13 +172,12 @@ describe("Clock module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/clock/clock_showDateAnalog.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("should show the analog clock face and the date", async () => {
-			const elemClock = await helpers.waitForElement(".clock-circle");
+			await expect(page.locator(".clock-circle")).toBeVisible();
-			await expect(elemClock).not.toBeNull();
+			await expect(page.locator(".clock .date")).toBeVisible();
-			const elemDate = await helpers.waitForElement(".clock .date");
-			await expect(elemDate).not.toBeNull();
 		});
 	});
 });

tests/e2e/modules/compliments_spec.js

@@ -1,19 +1,20 @@
+const { expect } = require("playwright/test");
 const helpers = require("../helpers/global-setup");
 
 describe("Compliments module", () => {
+	let page;
 
 	/**
 	 * move similar tests in function doTest
 	 * @param {Array} complimentsArray The array of compliments.
-	 * @returns {boolean} result
+	 * @returns {Promise<void>}
 	 */
 	const doTest = async (complimentsArray) => {
-		let elem = await helpers.waitForElement(".compliments");
+		await expect(page.locator(".compliments")).toBeVisible();
-		expect(elem).not.toBeNull();
+		const contentLocator = page.locator(".module-content");
-		elem = await helpers.waitForElement(".module-content");
+		await contentLocator.waitFor({ state: "visible" });
-		expect(elem).not.toBeNull();
+		const content = await contentLocator.textContent();
-		expect(complimentsArray).toContain(elem.textContent);
+		expect(complimentsArray).toContain(content);
-		return true;
 	};
 
 	afterAll(async () => {
@@ -25,10 +26,11 @@ describe("Compliments module", () => {
 			beforeAll(async () => {
 				await helpers.startApplication("tests/configs/modules/compliments/compliments_anytime.js");
 				await helpers.getDocument();
+				page = helpers.getPage();
 			});
 
 			it("shows anytime because if configure empty parts of day compliments and set anytime compliments", async () => {
-				await expect(doTest(["Anytime here"])).resolves.toBe(true);
+				await doTest(["Anytime here"]);
 			});
 		});
 
@@ -36,10 +38,11 @@ describe("Compliments module", () => {
 			beforeAll(async () => {
 				await helpers.startApplication("tests/configs/modules/compliments/compliments_only_anytime.js");
 				await helpers.getDocument();
+				page = helpers.getPage();
 			});
 
 			it("shows anytime compliments", async () => {
-				await expect(doTest(["Anytime here"])).resolves.toBe(true);
+				await doTest(["Anytime here"]);
 			});
 		});
 	});
@@ -48,10 +51,11 @@ describe("Compliments module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/compliments/compliments_remote.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("should show compliments from a remote file", async () => {
-			await expect(doTest(["Remote compliment file works!"])).resolves.toBe(true);
+			await doTest(["Remote compliment file works!"]);
 		});
 	});
 
@@ -60,10 +64,11 @@ describe("Compliments module", () => {
 			beforeAll(async () => {
 				await helpers.startApplication("tests/configs/modules/compliments/compliments_specialDayUnique_false.js");
 				await helpers.getDocument();
+				page = helpers.getPage();
 			});
 
 			it("compliments array can contain all values", async () => {
-				await expect(doTest(["Special day message", "Typical message 1", "Typical message 2", "Typical message 3"])).resolves.toBe(true);
+				await doTest(["Special day message", "Typical message 1", "Typical message 2", "Typical message 3"]);
 			});
 		});
 
@@ -71,10 +76,11 @@ describe("Compliments module", () => {
 			beforeAll(async () => {
 				await helpers.startApplication("tests/configs/modules/compliments/compliments_specialDayUnique_true.js");
 				await helpers.getDocument();
+				page = helpers.getPage();
 			});
 
 			it("compliments array contains only special value", async () => {
-				await expect(doTest(["Special day message"])).resolves.toBe(true);
+				await doTest(["Special day message"]);
 			});
 		});
 
@@ -82,10 +88,11 @@ describe("Compliments module", () => {
 			beforeAll(async () => {
 				await helpers.startApplication("tests/configs/modules/compliments/compliments_e2e_cron_entry.js");
 				await helpers.getDocument();
+				page = helpers.getPage();
 			});
 
 			it("compliments array contains only special value", async () => {
-				await expect(doTest(["anytime cron"])).resolves.toBe(true);
+				await doTest(["anytime cron"]);
 			});
 		});
 	});
@@ -95,10 +102,11 @@ describe("Compliments module", () => {
 			beforeAll(async () => {
 				await helpers.startApplication("tests/configs/modules/compliments/compliments_file.js");
 				await helpers.getDocument();
+				page = helpers.getPage();
 			});
 			it("shows 'Remote compliment file works!' as only anytime list set", async () => {
 				//await helpers.startApplication("tests/configs/modules/compliments/compliments_file.js", "01 Jan 2022 10:00:00 GMT");
-				await expect(doTest(["Remote compliment file works!"])).resolves.toBe(true);
+				await doTest(["Remote compliment file works!"]);
 			});
 			//			afterAll(async () =>{
 			//				await helpers.stopApplication()
@@ -109,12 +117,13 @@ describe("Compliments module", () => {
 			beforeAll(async () => {
 				await helpers.startApplication("tests/configs/modules/compliments/compliments_file_change.js");
 				await helpers.getDocument();
+				page = helpers.getPage();
 			});
 			it("shows 'test in morning' as test time set to 10am", async () => {
 				//await helpers.startApplication("tests/configs/modules/compliments/compliments_file_change.js", "01 Jan 2022 10:00:00 GMT");
-				await expect(doTest(["Remote compliment file works!"])).resolves.toBe(true);
+				await doTest(["Remote compliment file works!"]);
 				await new Promise((r) => setTimeout(r, 10000));
-				await expect(doTest(["test in morning"])).resolves.toBe(true);
+				await doTest(["test in morning"]);
 			});
 			//			afterAll(async () =>{
 			//				await helpers.stopApplication()

tests/e2e/modules/helloworld_spec.js

@@ -1,6 +1,9 @@
+const { expect } = require("playwright/test");
 const helpers = require("../helpers/global-setup");
 
 describe("Test helloworld module", () => {
+	let page;
+
 	afterAll(async () => {
 		await helpers.stopApplication();
 	});
@@ -9,12 +12,11 @@ describe("Test helloworld module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/helloworld/helloworld.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("Test message helloworld module", async () => {
-			const elem = await helpers.waitForElement(".helloworld");
+			await expect(page.locator(".helloworld")).toContainText("Test HelloWorld Module");
-			expect(elem).not.toBeNull();
-			expect(elem.textContent).toContain("Test HelloWorld Module");
 		});
 	});
 
@@ -22,12 +24,11 @@ describe("Test helloworld module", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/helloworld/helloworld_default.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("Test message helloworld module", async () => {
-			const elem = await helpers.waitForElement(".helloworld");
+			await expect(page.locator(".helloworld")).toContainText("Hello World!");
-			expect(elem).not.toBeNull();
-			expect(elem.textContent).toContain("Hello World!");
 		});
 	});
 });

tests/e2e/modules/newsfeed_spec.js

@@ -1,29 +1,28 @@
 const fs = require("node:fs");
+const { expect } = require("playwright/test");
 const helpers = require("../helpers/global-setup");
 
 const runTests = async () => {
+	let page;
+
 	describe("Default configuration", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/newsfeed/default.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("should show the newsfeed title", async () => {
-			const elem = await helpers.waitForElement(".newsfeed .newsfeed-source");
+			await expect(page.locator(".newsfeed .newsfeed-source")).toContainText("Rodrigo Ramirez Blog");
-			expect(elem).not.toBeNull();
-			expect(elem.textContent).toContain("Rodrigo Ramirez Blog");
 		});
 
 		it("should show the newsfeed article", async () => {
-			const elem = await helpers.waitForElement(".newsfeed .newsfeed-title");
+			await expect(page.locator(".newsfeed .newsfeed-title")).toContainText("QPanel");
-			expect(elem).not.toBeNull();
-			expect(elem.textContent).toContain("QPanel");
 		});
 
 		it("should NOT show the newsfeed description", async () => {
-			await helpers.waitForElement(".newsfeed");
+			await page.locator(".newsfeed").waitFor({ state: "visible" });
-			const elem = document.querySelector(".newsfeed .newsfeed-desc");
+			await expect(page.locator(".newsfeed .newsfeed-desc")).toHaveCount(0);
-			expect(elem).toBeNull();
 		});
 	});
 
@@ -31,18 +30,18 @@ const runTests = async () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/newsfeed/prohibited_words.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("should not show articles with prohibited words", async () => {
-			const elem = await helpers.waitForElement(".newsfeed .newsfeed-title");
+			await expect(page.locator(".newsfeed .newsfeed-title")).toContainText("Problema VirtualBox");
-			expect(elem).not.toBeNull();
-			expect(elem.textContent).toContain("Problema VirtualBox");
 		});
 
 		it("should show the newsfeed description", async () => {
-			const elem = await helpers.waitForElement(".newsfeed .newsfeed-desc");
+			const locator = page.locator(".newsfeed .newsfeed-desc");
-			expect(elem).not.toBeNull();
+			await expect(locator).toBeVisible();
-			expect(elem.textContent).not.toHaveLength(0);
+			const text = await locator.textContent();
+			expect(text).toMatch(/\S/);
 		});
 	});
 
@@ -50,12 +49,11 @@ const runTests = async () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/newsfeed/incorrect_url.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("should show malformed url warning", async () => {
-			const elem = await helpers.waitForElement(".newsfeed .small", "No news at the moment.");
+			await expect(page.locator(".newsfeed .small")).toContainText("Error in the Newsfeed module. Malformed url.");
-			expect(elem).not.toBeNull();
-			expect(elem.textContent).toContain("Error in the Newsfeed module. Malformed url.");
 		});
 	});
 
@@ -63,12 +61,11 @@ const runTests = async () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/newsfeed/ignore_items.js");
 			await helpers.getDocument();
+			page = helpers.getPage();
 		});
 
 		it("should show empty items info message", async () => {
-			const elem = await helpers.waitForElement(".newsfeed .small");
+			await expect(page.locator(".newsfeed .small")).toContainText("No news at the moment.");
-			expect(elem).not.toBeNull();
-			expect(elem.textContent).toContain("No news at the moment.");
 		});
 	});
 };

tests/e2e/modules/weather_current_spec.js

@@ -1,7 +1,10 @@
+const { expect } = require("playwright/test");
 const helpers = require("../helpers/global-setup");
 const weatherFunc = require("../helpers/weather-functions");
 
 describe("Weather module", () => {
+	let page;
+
 	afterAll(async () => {
 		await weatherFunc.stopApplication();
 	});
@@ -10,26 +13,25 @@ describe("Weather module", () => {
 		describe("Default configuration", () => {
 			beforeAll(async () => {
 				await weatherFunc.startApplication("tests/configs/modules/weather/currentweather_default.js", {});
+				page = helpers.getPage();
 			});
 
 			it("should render wind speed and wind direction", async () => {
-				await expect(weatherFunc.getText(".weather .normal.medium span:nth-child(2)", "12 WSW")).resolves.toBe(true);
+				await expect(page.locator(".weather .normal.medium span:nth-child(2)")).toHaveText("12 WSW");
 			});
 
 			it("should render temperature with icon", async () => {
-				await expect(weatherFunc.getText(".weather .large span.light.bright", "1.5°")).resolves.toBe(true);
+				await expect(page.locator(".weather .large span.light.bright")).toHaveText("1.5°");
-
+				await expect(page.locator(".weather .large span.weathericon")).toBeVisible();
-				const elem = await helpers.waitForElement(".weather .large span.weathericon");
-				expect(elem).not.toBeNull();
 			});
 
 			it("should render feels like temperature", async () => {
 				// Template contains   which renders as \xa0
-				await expect(weatherFunc.getText(".weather .normal.medium.feelslike span.dimmed", "93.7\xa0 Feels like -5.6°")).resolves.toBe(true);
+				await expect(page.locator(".weather .normal.medium.feelslike span.dimmed")).toHaveText("93.7\xa0 Feels like -5.6°");
 			});
 
 			it("should render humidity next to feels-like", async () => {
-				await expect(weatherFunc.getText(".weather .normal.medium.feelslike span.dimmed .humidity", "93.7")).resolves.toBe(true);
+				await expect(page.locator(".weather .normal.medium.feelslike span.dimmed .humidity")).toHaveText("93.7");
 			});
 		});
 	});
@@ -37,56 +39,60 @@ describe("Weather module", () => {
 	describe("Compliments Integration", () => {
 		beforeAll(async () => {
 			await weatherFunc.startApplication("tests/configs/modules/weather/currentweather_compliments.js", {});
+			page = helpers.getPage();
 		});
 
 		it("should render a compliment based on the current weather", async () => {
-			await expect(weatherFunc.getText(".compliments .module-content span", "snow")).resolves.toBe(true);
+			const compliment = page.locator(".compliments .module-content span");
+			await compliment.waitFor({ state: "visible" });
+			await expect(compliment).toHaveText("snow");
 		});
 	});
 
 	describe("Configuration Options", () => {
 		beforeAll(async () => {
 			await weatherFunc.startApplication("tests/configs/modules/weather/currentweather_options.js", {});
+			page = helpers.getPage();
 		});
 
 		it("should render windUnits in beaufort", async () => {
-			await expect(weatherFunc.getText(".weather .normal.medium span:nth-child(2)", "6")).resolves.toBe(true);
+			await expect(page.locator(".weather .normal.medium span:nth-child(2)")).toHaveText("6");
 		});
 
 		it("should render windDirection with an arrow", async () => {
-			const elem = await helpers.waitForElement(".weather .normal.medium sup i.fa-long-arrow-alt-down");
+			const arrow = page.locator(".weather .normal.medium sup i.fa-long-arrow-alt-down");
-			expect(elem).not.toBeNull();
+			await expect(arrow).toHaveAttribute("style", "transform:rotate(250deg)");
-			expect(elem.outerHTML).toContain("transform:rotate(250deg)");
 		});
 
 		it("should render humidity next to wind", async () => {
-			await expect(weatherFunc.getText(".weather .normal.medium .humidity", "93.7")).resolves.toBe(true);
+			await expect(page.locator(".weather .normal.medium .humidity")).toHaveText("93.7");
 		});
 
 		it("should render degreeLabel for temp", async () => {
-			await expect(weatherFunc.getText(".weather .large span.bright.light", "1°C")).resolves.toBe(true);
+			await expect(page.locator(".weather .large span.bright.light")).toHaveText("1°C");
 		});
 
 		it("should render degreeLabel for feels like", async () => {
-			await expect(weatherFunc.getText(".weather .normal.medium.feelslike span.dimmed", "Feels like -6°C")).resolves.toBe(true);
+			await expect(page.locator(".weather .normal.medium.feelslike span.dimmed")).toHaveText("Feels like -6°C");
 		});
 	});
 
 	describe("Current weather with imperial units", () => {
 		beforeAll(async () => {
 			await weatherFunc.startApplication("tests/configs/modules/weather/currentweather_units.js", {});
+			page = helpers.getPage();
 		});
 
 		it("should render wind in imperial units", async () => {
-			await expect(weatherFunc.getText(".weather .normal.medium span:nth-child(2)", "26 WSW")).resolves.toBe(true);
+			await expect(page.locator(".weather .normal.medium span:nth-child(2)")).toHaveText("26 WSW");
 		});
 
 		it("should render temperatures in fahrenheit", async () => {
-			await expect(weatherFunc.getText(".weather .large span.bright.light", "34,7°")).resolves.toBe(true);
+			await expect(page.locator(".weather .large span.bright.light")).toHaveText("34,7°");
 		});
 
 		it("should render 'feels like' in fahrenheit", async () => {
-			await expect(weatherFunc.getText(".weather .normal.medium.feelslike span.dimmed", "Feels like 21,9°")).resolves.toBe(true);
+			await expect(page.locator(".weather .normal.medium.feelslike span.dimmed")).toHaveText("Feels like 21,9°");
 		});
 	});
 });

tests/e2e/modules/weather_forecast_spec.js

@@ -1,7 +1,10 @@
+const { expect } = require("playwright/test");
 const helpers = require("../helpers/global-setup");
 const weatherFunc = require("../helpers/weather-functions");
 
 describe("Weather module: Weather Forecast", () => {
+	let page;
+
 	afterAll(async () => {
 		await weatherFunc.stopApplication();
 	});
@@ -9,43 +12,46 @@ describe("Weather module: Weather Forecast", () => {
 	describe("Default configuration", () => {
 		beforeAll(async () => {
 			await weatherFunc.startApplication("tests/configs/modules/weather/forecastweather_default.js", {});
+			page = helpers.getPage();
 		});
 
 		const days = ["Today", "Tomorrow", "Sun", "Mon", "Tue"];
 		for (const [index, day] of days.entries()) {
 			it(`should render day ${day}`, async () => {
-				await expect(weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(1)`, day)).resolves.toBe(true);
+				const dayCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(1)`);
+				await expect(dayCell).toHaveText(day);
 			});
 		}
 
 		const icons = ["day-cloudy", "rain", "day-sunny", "day-sunny", "day-sunny"];
 		for (const [index, icon] of icons.entries()) {
 			it(`should render icon ${icon}`, async () => {
-				const elem = await helpers.waitForElement(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(2) span.wi-${icon}`);
+				const iconElement = page.locator(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(2) span.wi-${icon}`);
-				expect(elem).not.toBeNull();
+				await expect(iconElement).toBeVisible();
 			});
 		}
 
 		const maxTemps = ["24.4°", "21.0°", "22.9°", "23.4°", "20.6°"];
 		for (const [index, temp] of maxTemps.entries()) {
 			it(`should render max temperature ${temp}`, async () => {
-				await expect(weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(3)`, temp)).resolves.toBe(true);
+				const maxTempCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(3)`);
+				await expect(maxTempCell).toHaveText(temp);
 			});
 		}
 
 		const minTemps = ["15.3°", "13.6°", "13.8°", "13.9°", "10.9°"];
 		for (const [index, temp] of minTemps.entries()) {
 			it(`should render min temperature ${temp}`, async () => {
-				await expect(weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(4)`, temp)).resolves.toBe(true);
+				const minTempCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(4)`);
+				await expect(minTempCell).toHaveText(temp);
 			});
 		}
 
 		const opacities = [1, 1, 0.8, 0.5333333333333333, 0.2666666666666667];
 		for (const [index, opacity] of opacities.entries()) {
 			it(`should render fading of rows with opacity=${opacity}`, async () => {
-				const elem = await helpers.waitForElement(`.weather table.small tr:nth-child(${index + 1})`);
+				const row = page.locator(`.weather table.small tr:nth-child(${index + 1})`);
-				expect(elem).not.toBeNull();
+				await expect(row).toHaveAttribute("style", `opacity: ${opacity};`);
-				expect(elem.outerHTML).toContain(`<tr style="opacity: ${opacity};">`);
 			});
 		}
 	});
@@ -53,12 +59,14 @@ describe("Weather module: Weather Forecast", () => {
 	describe("Absolute configuration", () => {
 		beforeAll(async () => {
 			await weatherFunc.startApplication("tests/configs/modules/weather/forecastweather_absolute.js", {});
+			page = helpers.getPage();
 		});
 
 		const days = ["Fri", "Sat", "Sun", "Mon", "Tue"];
 		for (const [index, day] of days.entries()) {
 			it(`should render day ${day}`, async () => {
-				await expect(weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(1)`, day)).resolves.toBe(true);
+				const dayCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(1)`);
+				await expect(dayCell).toHaveText(day);
 			});
 		}
 	});
@@ -66,25 +74,24 @@ describe("Weather module: Weather Forecast", () => {
 	describe("Configuration Options", () => {
 		beforeAll(async () => {
 			await weatherFunc.startApplication("tests/configs/modules/weather/forecastweather_options.js", {});
+			page = helpers.getPage();
 		});
 
 		it("should render custom table class", async () => {
-			const elem = await helpers.waitForElement(".weather table.myTableClass");
+			await expect(page.locator(".weather table.myTableClass")).toBeVisible();
-			expect(elem).not.toBeNull();
 		});
 
 		it("should render colored rows", async () => {
-			const table = await helpers.waitForElement(".weather table.myTableClass");
+			const rows = page.locator(".weather table.myTableClass tr");
-			expect(table).not.toBeNull();
+			await expect(rows).toHaveCount(5);
-			expect(table.rows).not.toBeNull();
-			expect(table.rows).toHaveLength(5);
 		});
 
 		const precipitations = [undefined, "2.51 mm"];
 		for (const [index, precipitation] of precipitations.entries()) {
 			if (precipitation) {
 				it(`should render precipitation amount ${precipitation}`, async () => {
-					await expect(weatherFunc.getText(`.weather table tr:nth-child(${index + 1}) td.precipitation-amount`, precipitation)).resolves.toBe(true);
+					const precipCell = page.locator(`.weather table tr:nth-child(${index + 1}) td.precipitation-amount`);
+					await expect(precipCell).toHaveText(precipitation);
 				});
 			}
 		}
@@ -93,13 +100,15 @@ describe("Weather module: Weather Forecast", () => {
 	describe("Forecast weather with imperial units", () => {
 		beforeAll(async () => {
 			await weatherFunc.startApplication("tests/configs/modules/weather/forecastweather_units.js", {});
+			page = helpers.getPage();
 		});
 
 		describe("Temperature units", () => {
 			const temperatures = ["75_9°", "69_8°", "73_2°", "74_1°", "69_1°"];
 			for (const [index, temp] of temperatures.entries()) {
 				it(`should render custom decimalSymbol = '_' for temp ${temp}`, async () => {
-					await expect(weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(3)`, temp)).resolves.toBe(true);
+					const tempCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(3)`);
+					await expect(tempCell).toHaveText(temp);
 				});
 			}
 		});
@@ -109,7 +118,8 @@ describe("Weather module: Weather Forecast", () => {
 			for (const [index, precipitation] of precipitations.entries()) {
 				if (precipitation) {
 					it(`should render precipitation amount ${precipitation}`, async () => {
-						await expect(weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td.precipitation-amount`, precipitation)).resolves.toBe(true);
+						const precipCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td.precipitation-amount`);
+						await expect(precipCell).toHaveText(precipitation);
 					});
 				}
 			}

tests/e2e/modules/weather_hourly_spec.js

@@ -1,6 +1,10 @@
+const { expect } = require("playwright/test");
+const helpers = require("../helpers/global-setup");
 const weatherFunc = require("../helpers/weather-functions");
 
 describe("Weather module: Weather Hourly Forecast", () => {
+	let page;
+
 	afterAll(async () => {
 		await weatherFunc.stopApplication();
 	});
@@ -8,12 +12,14 @@ describe("Weather module: Weather Hourly Forecast", () => {
 	describe("Default configuration", () => {
 		beforeAll(async () => {
 			await weatherFunc.startApplication("tests/configs/modules/weather/hourlyweather_default.js", {});
+			page = helpers.getPage();
 		});
 
 		const minTemps = ["7:00 pm", "8:00 pm", "9:00 pm", "10:00 pm", "11:00 pm"];
 		for (const [index, hour] of minTemps.entries()) {
 			it(`should render forecast for hour ${hour}`, async () => {
-				await expect(weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td.day`, hour)).resolves.toBe(true);
+				const dayCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td.day`);
+				await expect(dayCell).toHaveText(hour);
 			});
 		}
 	});
@@ -21,13 +27,15 @@ describe("Weather module: Weather Hourly Forecast", () => {
 	describe("Hourly weather options", () => {
 		beforeAll(async () => {
 			await weatherFunc.startApplication("tests/configs/modules/weather/hourlyweather_options.js", {});
+			page = helpers.getPage();
 		});
 
 		describe("Hourly increments of 2", () => {
 			const minTemps = ["7:00 pm", "9:00 pm", "11:00 pm", "1:00 am", "3:00 am"];
 			for (const [index, hour] of minTemps.entries()) {
 				it(`should render forecast for hour ${hour}`, async () => {
-					await expect(weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td.day`, hour)).resolves.toBe(true);
+					const dayCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td.day`);
+					await expect(dayCell).toHaveText(hour);
 				});
 			}
 		});
@@ -36,6 +44,7 @@ describe("Weather module: Weather Hourly Forecast", () => {
 	describe("Show precipitations", () => {
 		beforeAll(async () => {
 			await weatherFunc.startApplication("tests/configs/modules/weather/hourlyweather_showPrecipitation.js", {});
+			page = helpers.getPage();
 		});
 
 		describe("Shows precipitation amount", () => {
@@ -43,7 +52,8 @@ describe("Weather module: Weather Hourly Forecast", () => {
 			for (const [index, amount] of amounts.entries()) {
 				if (amount) {
 					it(`should render precipitation amount ${amount}`, async () => {
-						await expect(weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td.precipitation-amount`, amount)).resolves.toBe(true);
+						const amountCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td.precipitation-amount`);
+						await expect(amountCell).toHaveText(amount);
 					});
 				}
 			}
@@ -51,10 +61,11 @@ describe("Weather module: Weather Hourly Forecast", () => {
 
 		describe("Shows precipitation probability", () => {
 			const probabilities = [undefined, undefined, "12 %", "36 %", "44 %"];
-			for (const [index, pop] of probabilities.entries()) {
+			for (const [index, probability] of probabilities.entries()) {
-				if (pop) {
+				if (probability) {
-					it(`should render probability ${pop}`, async () => {
+					it(`should render probability ${probability}`, async () => {
-						await expect(weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td.precipitation-prob`, pop)).resolves.toBe(true);
+						const probabilityCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td.precipitation-prob`);
+						await expect(probabilityCell).toHaveText(probability);
 					});
 				}
 			}

tests/e2e/modules_display_spec.js

@@ -1,24 +1,24 @@
+const { expect } = require("playwright/test");
 const helpers = require("./helpers/global-setup");
 
 describe("Display of modules", () => {
+	let page;
+
 	beforeAll(async () => {
 		await helpers.startApplication("tests/configs/modules/display.js");
 		await helpers.getDocument();
+		page = helpers.getPage();
 	});
 	afterAll(async () => {
 		await helpers.stopApplication();
 	});
 
 	it("should show the test header", async () => {
-		const elem = await helpers.waitForElement("#module_0_helloworld .module-header");
-		expect(elem).not.toBeNull();
 		// textContent returns lowercase here, the uppercase is realized by CSS, which therefore does not end up in textContent
-		expect(elem.textContent).toBe("test_header");
+		await expect(page.locator("#module_0_helloworld .module-header")).toHaveText("test_header");
 	});
 
 	it("should show no header if no header text is specified", async () => {
-		const elem = await helpers.waitForElement("#module_1_helloworld .module-header");
+		await expect(page.locator("#module_1_helloworld .module-header")).toHaveText("undefined");
-		expect(elem).not.toBeNull();
-		expect(elem.textContent).toBe("undefined");
 	});
 });

tests/e2e/modules_empty_spec.js

@@ -1,23 +1,23 @@
+const { expect } = require("playwright/test");
 const helpers = require("./helpers/global-setup");
 
 describe("Check configuration without modules", () => {
+	let page;
+
 	beforeAll(async () => {
 		await helpers.startApplication("tests/configs/without_modules.js");
 		await helpers.getDocument();
+		page = helpers.getPage();
 	});
 	afterAll(async () => {
 		await helpers.stopApplication();
 	});
 
 	it("shows the message MagicMirror² title", async () => {
-		const elem = await helpers.waitForElement("#module_1_helloworld .module-content");
+		await expect(page.locator("#module_1_helloworld .module-content")).toContainText("MagicMirror²");
-		expect(elem).not.toBeNull();
-		expect(elem.textContent).toContain("MagicMirror²");
 	});
 
 	it("shows the project URL", async () => {
-		const elem = await helpers.waitForElement("#module_5_helloworld .module-content");
+		await expect(page.locator("#module_5_helloworld .module-content")).toContainText("https://magicmirror.builders/");
-		expect(elem).not.toBeNull();
-		expect(elem.textContent).toContain("https://magicmirror.builders/");
 	});
 });

tests/e2e/modules_position_spec.js

@@ -1,5 +1,7 @@
 const helpers = require("./helpers/global-setup");
 
+const getPage = () => helpers.getPage();
+
 describe("Position of modules", () => {
 	beforeAll(async () => {
 		await helpers.startApplication("tests/configs/modules/positions.js");
@@ -14,9 +16,11 @@ describe("Position of modules", () => {
 	for (const position of positions) {
 		const className = position.replace("_", ".");
 		it(`should show text in ${position}`, async () => {
-			const elem = await helpers.waitForElement(`.${className}`);
+			const locator = getPage().locator(`.${className} .module-content`).first();
-			expect(elem).not.toBeNull();
+			await locator.waitFor({ state: "visible" });
-			expect(elem.textContent).toContain(`Text in ${position}`);
+			const text = await locator.textContent();
+			expect(text).not.toBeNull();
+			expect(text).toContain(`Text in ${position}`);
 		});
 	}
 });

tests/e2e/serveronly_spec.js

@@ -38,11 +38,13 @@ describe("App environment", () => {
 describe("Check config", () => {
 	it("config check should return without errors", async () => {
 		process.env.MM_CONFIG_FILE = "tests/configs/default.js";
-		await expect(runConfigCheck()).resolves.toBe(0);
+		const exitCode = await runConfigCheck();
+		expect(exitCode).toBe(0);
 	});
 
 	it("config check should fail with non existent config file", async () => {
 		process.env.MM_CONFIG_FILE = "tests/configs/not_exists.js";
-		await expect(runConfigCheck()).resolves.toBe(1);
+		const exitCode = await runConfigCheck();
+		expect(exitCode).toBe(1);
 	});
 });

tests/e2e/translations_spec.js

@@ -16,6 +16,7 @@ function createTranslationTestEnvironment () {
 
 	dom.window.Log = { log: vi.fn(), error: vi.fn() };
 	dom.window.translations = translations;
+	dom.window.fetch = fetch;
 	dom.window.eval(translatorJs);
 
 	const window = dom.window;

tests/unit/classes/translator_spec.js

@@ -13,6 +13,7 @@ function createTranslationTestEnvironment () {
 	const dom = new JSDOM("", { url: "http://localhost:3001", runScripts: "outside-only" });
 
 	dom.window.Log = { log: vi.fn(), error: vi.fn() };
+	dom.window.fetch = fetch;
 	dom.window.eval(translatorJs);
 
 	return { window: dom.window, Translator: dom.window.Translator };

tests/unit/modules/default/calendar/calendar_fetcher_utils_bad_rrule.js

@@ -9,10 +9,11 @@ describe("Calendar fetcher utils test", () => {
 
 	describe("filterEvents", () => {
 		it("no events, not crash", () => {
-			const minusOneHour = moment().subtract(1, "hours").toDate();
+			const base = moment().startOf("day").add(12, "hours");
-			const minusTwoHours = moment().subtract(2, "hours").toDate();
+			const minusOneHour = base.clone().subtract(1, "hours").toDate();
-			const plusOneHour = moment().add(1, "hours").toDate();
+			const minusTwoHours = base.clone().subtract(2, "hours").toDate();
-			const plusTwoHours = moment().add(2, "hours").toDate();
+			const plusOneHour = base.clone().add(1, "hours").toDate();
+			const plusTwoHours = base.clone().add(2, "hours").toDate();
 
 			const filteredEvents = CalendarFetcherUtils.filterEvents(
 				{

vitest.config.mjs

@@ -8,28 +8,21 @@ import {defineConfig} from "vitest/config";
  *
  * Parallel execution would require dynamic ports and isolated fixtures,
  * so we intentionally cap Vitest at a single worker for now.
+ *
+ * Projects separate unit, e2e (Playwright), and electron tests with
+ * appropriate timeouts for each test type.
  */
 
 export default defineConfig({
 	test: {
-		// Global settings
+		// Shared settings for all test types
 		globals: true,
 		environment: "node",
-		// Setup files for require aliasing
 		setupFiles: ["./tests/utils/vitest-setup.js"],
-		// Increased from 20s to 60s for E2E tests, 120s for Electron tests
-		testTimeout: 120000,
-		// Increase hook timeout for Electron cleanup
-		hookTimeout: 30000,
 		// Stop test execution on first failure
-		bail: 1,
+		bail: 3,
 
-		// File patterns
+		// Shared exclude patterns
-		include: [
-			"tests/**/*_spec.js",
-			// Legacy regression test without the _spec suffix
-			"tests/unit/modules/default/calendar/calendar_fetcher_utils_bad_rrule.js"
-		],
 		exclude: [
 			"**/node_modules/**",
 			"**/dist/**",
@@ -42,6 +35,46 @@ export default defineConfig({
 			"tests/utils/**"
 		],
 
+		// Projects with specific configurations per test type
+		projects: [
+			{
+				test: {
+					name: "unit",
+					globals: true,
+					environment: "node",
+					setupFiles: ["./tests/utils/vitest-setup.js"],
+					include: [
+						"tests/unit/**/*_spec.js",
+						"tests/unit/modules/default/calendar/calendar_fetcher_utils_bad_rrule.js"
+					],
+					testTimeout: 20000,
+					hookTimeout: 10000
+				}
+			},
+			{
+				test: {
+					name: "e2e",
+					globals: true,
+					environment: "node",
+					setupFiles: ["./tests/utils/vitest-setup.js"],
+					include: ["tests/e2e/**/*_spec.js"],
+					testTimeout: 60000,
+					hookTimeout: 30000
+				}
+			},
+			{
+				test: {
+					name: "electron",
+					globals: true,
+					environment: "node",
+					setupFiles: ["./tests/utils/vitest-setup.js"],
+					include: ["tests/electron/**/*_spec.js"],
+					testTimeout: 120000,
+					hookTimeout: 30000
+				}
+			}
+		],
+
 		// Coverage configuration
 		coverage: {
 			provider: "v8",